手を動かしながら学ぶTypeScript 1日目(概要~環境設定)
■ 思ったこと
Reactをやる前に、TypeScriptの勉強をガッツリしたい。
■ 覚えておきたいこと
ECMAScriptって何
やばい!初めて聞いた!
- 言語! ・・もっというと、ブラウザことに自由に使われていたJavaScriptをECMAという標準化団体が規格を定め標準化した言語!
- たくさんバージョンがあるが、後方互換性があり、便利。
- TypeScriptはというと、ECMAScript + 型システム!
そもそも型について
- プログラムで使用する値を分類するラベル的なものだ
- 正しく分類した型通りにプログラムを動かす仕組みが「型システム」
- 実行前に判別するのが静的型付け、実行しながら判別するのが動的型付け
- TypeScriptは静的型付け、JavaScriptは動的型付け、へ~~!!
- 静的型付けだと、コンパイル時にエラーが分かるのがメリットですね
TypeScriptについてもっとおせーて
- そのままでは実行できず、一回JavaScriptに変換してあげる必要アリ
- 変換機能もろもろnpmでインストールできます、てかnpmって依存関係をひっくるめてパッケージをインストール出来るシステム!
じゃあさっそく環境構築DA!
リポジトリ作る
package.json作る
VScode で開いてターミナルでnpm init
すると作成できる。やらなくても動くけど、インストールしたパッケージの依存関係が分からなくなるのでやっとくべし。いろいろ聞かれるが全部Enterでおけ
TypeScriptインストールする
教本通りnpm install typescript@4.3.5
とやったよん。 こうしてnode_modulesが立派に出来上がりました。
.gitignore作る
node_modulesはgitに入れてはイカンので(重すぎるしnpm installすればpackage.jsonの依存関係通りに落とせるから)commit対象から外そう。以下を参考にさせていただきました。
Commit&Push
以下が対象です、ウンウンnode_modulesは対象から外れてるNE!
tsconfig.jsonを作ったほうがいい
コンパイル時の設定を色々決めれる設定ファイル。package.jsonと同じ階層でnpx tsc --init
すればおけ。上書きされないので注意!デフォルトに加えて設定したのは
- outDir…作成されたjsファイルの格納場所を指定できる
- include…tsファイルを指定しなくても配下の全部コンパイル対象にできる
- strictNullChecks…nullやundefinedを許容しない、絶対trueにした方がいいぞ!
実装にあたって基礎知識
型アノテーション( = 型注釈)を使おう
- 定義した変数にどんな値を入れられるか?指定すること
- 「const = num: number」の
: number
の部分をいう! - ちなみに正数も少数も全部number型になるぜ
- プリミティブ型 = 基本的な型のこと(string、number、boolean、undefinedなど…)
- undefinedは値が入るか入らないか分からない変数に併用してつけてあげる。これをユニオン型という。
- 関数そのものを関数型として変数に入れることができる!・・・??
■ 感想
教本に乗ってた関数型サンプルがなんかめっちゃアローで置いてかれました。一回別の記事作って勉強しなおします・・