TypeScript

【TS導入編】超初心者向けTypeScript〜環境構築の補足&クラスなど〜

前置き

環境構築編で$ npm init
サラッと書いただけだったり、
「自動コンパイル設定いらないかも❓」
の検証が終わったので
tsconfigのオプションなども含めて
諸々補足をしていきます。
フレームワークなしの前提です。

⬇️以前の記事はこちら
【Nuxt.js】超初心者向けTypeScript〜環境構築編〜
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜

参考:
TypeScript初心者が知っておくと嬉しいこと
TypeScriptの型入門 > asによるダウンキャスト
TypeScript でクラスを書くための初歩


環境構築の補足

package.jsonの作成

$ npm init

参考サイト:
⬇️なぜpackage.jsonが必要なのか
npmとpackage.json
⬇️作成方法
【初心者向け】NPMとpackage.jsonを概念的に理解する > パッケージの作成

コマンドを実行すると
こんな表示が出ます。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See npm help init for definitive documentation on these fields
and exactly what they do.

Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

package name:

そのままエンターを押します。
そのあとは以下の項目をチェック、
変更があれば書き足してエンター

version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

この内容で良いかと確認が入るので、
OKならエンターすると
package.jsonが作成されます。


lite-serverを使用

lite-server
ターミナルとVSC内のターミナルを
併用すると確認が楽になります✨✌️

インストールが完了すると、
package-lock.json
node_modulesが作成されます。

$ npm install --save-dev lite-server

⬇️--save-devがよく分からない
 という方はこちらを参考にしてください
npm install の --save-dev って何?

package.jsonにこちらを追記


tsconfig.jsonの作成

$ tsc --init

オプション

必要なものがあれば使用しましょう。
コンパイルの対象から外すexclude
コンパイル対象と、
コンパイル後のファイルパスを指定する
rootDir, outDir
デバッグをしやすくするための
sourceMapなどがあります。
SourceMapとは何なのか

そういえばロードマップ
デバッグの基礎知識とか入れてなかった、
初心者がブラウザーでデバッグするための基礎知識

オプションについては
ここが参考になります
tsconfig.jsonの全オプションを理解する(随時追加中)> outDir


ターミナルの併用

ターミナルとVSCode内のターミナルを併用します。
どちらのコマンドを割り当ててもOKです⭕️

片方で

$ npm start

もう片方では
このどちらかを使用

$ tsc app.ts // コンパイルしたいファイルを指定
$ tsc -watch // 全てのtsファイルをwatch、自動コンパイルできます。


まとめ

コマンドだけまとめたものです。

$ npm init
$ sudo npm install -g typescript
$ tsc -v
$ npm install --save-dev lite-server
$ tsc --init
// 下記は併用
$ npm start
$ tsc -w


初心者が知っておくと良いこと

クラスとコンストラクタ

TSを使用する上で理解しておくべき
classconstructor
constructorのサンプルコードを見た方が
classでオブジェクトを生成する、
ということが分かりやすいかもしれません。
classは変数と値を書くところですね。

実際にはconstructorの前に
変数の宣言をしておく必要があります。

正しいコードはこちら

⬇️こちらの例も見ておくと⭕️
TypeScript初心者が知っておくと嬉しいこと > コンストラクタ

new 演算子については
MDNをご確認ください。


アクセス修飾子

クラス内に定義されたメンバの
アクセス制御を行うことができます。
public > protected > privateの順で
アクセスできる範囲が狭まります。
publicはクラス外からも可
protectedは継承されたクラス内で可
privateはクラス内のみ可

こちらが参考になります。
【TypeScript】3つのアクセス修飾子について簡単に解説【public/private/protected】
仕事ですぐに使えるTypeScript > クラス > アクセス制御

サンプルコードはこちら。
参考サイトの上の方からお借りしています。
voidは返り値がない場合に使用でしたね。
【TS導入編】超初心者向けTypeScript〜自動コンパイル〜 > 書き方 > void


まとめ

環境構築がスッキリ整理できました✨🙌
あとは実装で使える知識をどんどん
書いていこうと思います!
次はゲッターとセッターあたりかな…🤔💭


-TypeScript
-,

© 2021 aLiz Nuxt