ペロハム大学

ヤルゾー

手を動かしながら学ぶTypeScript 1日目(概要~環境設定)

■ 思ったこと

Reactをやる前に、TypeScriptの勉強をガッツリしたい。

■ 覚えておきたいこと

ECMAScriptって何

やばい!初めて聞いた!

  • 言語! ・・もっというと、ブラウザことに自由に使われていたJavaScriptECMAという標準化団体が規格を定め標準化した言語!
  • たくさんバージョンがあるが、後方互換性があり、便利。
  • 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対象から外そう。以下を参考にさせていただきました。

qiita.com

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は値が入るか入らないか分からない変数に併用してつけてあげる。これをユニオン型という。
  • 関数そのものを関数型として変数に入れることができる!・・・??

■ 感想

教本に乗ってた関数型サンプルがなんかめっちゃアローで置いてかれました。一回別の記事作って勉強しなおします・・