最近知ったTypeScriptのちょっとしたTipsとか

相変わらずインターンではTypeScriptを書いています。

最近は、ちょっと自分でも成長したなと思うのですが、バグの原因を追い求めてライブラリの中をウロウロしていたりします。

人生22年、ライブラリの中をのぞいてみよう、なんならバグ見つけてPRだそうとか考えたこともなかったですが、人間必要になればやるし、やってみると案外できるもんですね。(もちろん楽ではないけど、一個ずつ読み解くことくらいは、努力次第でできるな、と思った。)

雑談はさておき、そんなこんなの業務の中で知って、「へー」と思ったTypeScriptの諸々をメモ書き程度に書いておきます。

---

tscのメッセージを日本語にする

Compiler Options · TypeScript

まぁ公式に書いていることなんですけど。(この記事に出てくることは、私が知らなかったというだけで、全部公式に書いていることです。私の勉強不足です。)

オプションとして--locale jaを渡してあげると、いろいろ日本語になります。

たとえばこんなの

$ tsc --locale ja
バージョン 3.2.4
構文: tsc [オプション] [ファイル...]

例:  tsc hello.ts
    tsc --outFile file.js file.ts
    tsc @args.txt
    tsc --build tsconfig.json

オプション:
 -h, --help                                 このメッセージを表示します。
 -w, --watch                                入力ファイルを監視します。
 --pretty                                   色とコンテキストを使用してエラーとメッセージにスタイルを適用します (試験的)。
 --all                                      コンパイラ オプションをすべて表示します。
 -v, --version                              コンパイラのバージョンを表示します。
 --init                                     TypeScript プロジェクトを初期化して、tsconfig.json ファイルを作成します。
 -p ファイルまたはディレクトリ, --project ファイルまたはディレクトリ  構成ファイルか、'tsconfig.json' を含むフォルダーにパスが指定されたプロジェクトをコンパイルします。
 -b, --build                                最新でない場合は、1 つ以上のプロジェクトとその依存関係をビルドします
 -t バージョン, --target バージョン                   ECMAScript のターゲット バージョンを指定します: 'ES3' (既定)、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ESNEXT'。
 -m 種類, --module 種類                         モジュール コード生成を指定します: 'none'、'commonjs'、'amd'、'system'、'umd'、'es2015'、'ESNext'。
 --lib                                      コンパイルに含めるライブラリ ファイルを指定します。

例がぱっと用意できなかったですが、コンパイルエラーなどももちろん日本語になります。

英語がわからんとき、やってみると救われるかもしれない。

(TSのコンパイルエラー自体そんなに難しい英語は一切出てこないので、必要かと言われれば微妙ですが)

(変数名)!(Non-null assertion operator)

コード読んでいたら、hoge!(hogeは変数)みたいなのが出てきて、これはなんだ？と思ったという話。

!という時点で察しのいい人は分かりそうな気もしますが、これはコンパイラに対して、変数が強制的にnullにならないと伝えるためのオペレーターみたいです。(Non-null assertion operatorと言うらしい)

つまり、hoge変数の型がstring | undefinedだったとき、hoge!とするとhoge as stringとした時と同じ動きをすることができるようです。asなんちゃらと書くとどうしても長くなるので、これは使っていきたいテク。(本来はキャストなんぞ使いたくないが)

ここに書いてた。

TypeScript 2.0 · TypeScript

型と型を&でつなぐ(Intersection Types)

うまい例が思いつかないですが、こんな感じ。(公式の例をパクってシンプルにした)

interface Person {
  name: string;
  age: number;
}

interface Speakable {
  greet(): void;
}

const kanameRin: Person & Speakable = {
  name: '鹿目凛',
  age: 22,
  greet() {
    console.log('イラストも描けちゃうあなたの彼女♡');
  }
}

PersonとSpeakableというインタフェースが宣言されていて、定数kanameRinはPerson & Speakable型になっています。

右辺を見てもらえれば一目瞭然ですが、型名と型名を&でつなぐことで、型を組み合わせることができます。

(ちなみに、サンプルコードの元ネタはこちら。最近の推しです。)

ちなみに

interface A {
  hoge: string;
}

interface B {
  hoge: number;
}

const aAndB: A & B = {
  hoge: 'hoge' // ここでコンパイルエラーになる、hogeはstring & number型
};

こんな感じで、同名で別の方が存在すると、hogeはstirng & number型として扱われるみたいです。(なので上記の例はエラーになります。)

これ、string | numberとして扱ってくれた方がいいような気がしなくないけど、そうでもないのかしら。

あ、ちなみにこのような感じで、型を&でつなぐのをIntersection Typesというみたいで、以下に載ってます。

Advanced Types · TypeScript