概要

TypeScript を勉強するにあたり、プログラミング初心者の私が詰まった点をメモに残す。
間違いがあれば教えていただけると幸いです。

環境

typescript: 4.1.2

考察

JavaScript はプログラムの変数が意図的に undefined や null を保持する柔軟な言語である。これらの型を保証し、より安全に開発を進める助けとなるのが TypeScript である。

例

const myExample = document.getElementById("example");
myExample.innerHTML = "Hello World!";

TypeScript を介してこれを実行してもエラーは起きない。
ID "example"を検索しようとしたときに存在しない場合は、myExample は null となり、null.innerHTML は読み取れない。

Uncaught TypeError: Cannot read property ‘innerHTML’ of null

VSCode などの TypeScript をサポートする IDE でメソッドにカーソルを合わせると、次のように表示される。

(method) Document.getElementById(elementId: string): HTMLElement

実行時には二つの可能な値（null or HTMLElement オブジェクト）があるが、コンパイル時に TypeScript は、戻り値が常に単一な型になる。これは「null 許容値」の概念があるからである。
この動作を有効にするために必要なのは、tsconfig.jsonで"strictNullChecks”: true（または“strict”: true）を設定する。これにより、エラーが生じる。

[ts] Object is possibly ‘null’

先程と同じようにメソッドにカーソルを合わせると、下記のようになる。

(method) Document.getElementById(elementId: string): HTMLElement | null

HTMLElement と null の共用型となっていることが分かる。
if などを用いて、真である事を確認することで、エラーがなくなる。
例

const myExample = document.getElementById("example");
if (myExample) {
  myExample.innerHTML = "Hello World!";
}

MicroSoft の TypeScript チームは、"strictNullChecks”を有効にする事を勧めている。
より高品質なコードを書くことができるので、私も使っていきたい。

参考

書籍「実戦 TypeScript-BFF と Next.js&Nuxt.js の型定義-　著者吉井健文」
https://jameshenry.blog/typescript-null-and-undefined-types/