型推論｜基礎を学ぶ - ゆめさくコード

書かなくても型は付いている

前のレッスンで型注釈を書きました。ところが実際の TypeScript のコードを見ると、注釈だらけではありません。

const workName = "プロフィールサイト";

注釈はありませんが、この workName は string 型です。TypeScript が代入された値を見て、型を自分で決めています。これを型推論と呼びます。

推論された型も、注釈で書いた型とまったく同じ強さで働きます。

const workName = "プロフィールサイト";
const length = workName.lenght;
// エラー Property 'lenght' does not exist on type 'string'.

書いていないのに守られている、というのが TypeScript の気持ちよさの半分です。

エディタで確かめる

推論された型は、変数名にマウスカーソルを合わせると出てきます。これをホバーと呼びます。

const works = ["プロフィールサイト", "自己紹介カード"];
// ホバーすると const works: string[]

const workCount = works.length;
// ホバーすると const workCount: number

const firstWork = works[0];
// ホバーすると const firstWork: string

works に文字列だけを入れたので string[] になり、length は数値なので number になり、その配列から 1 つ取り出したものは string になります。値をたどれば型もたどれる、という関係です。

自分が思っている型と、ホバーに出る型が食い違っていたら、そこがバグの入り口です。型を読む習慣は、この 1 手だけで身に付きます。

関数の戻り値も推論される

引数と違い、戻り値の型は書かなくても推論されます。

function workLabel(title: string, count: number) {
  return title + "ほか" + count + "件";
}
// ホバーすると function workLabel(title: string, count: number): string

中身が文字列を返しているので、戻り値は string だと分かります。

それでも戻り値の型を書くことがあります。書いておくと、中身を直したときに戻り値が変わってしまう事故を、その関数の中で止められるからです。呼び出し側まで壊れが広がる前に気付けます。

どこまで書くか

目安は次のとおりです。関数の引数には書きます。外に公開する関数の戻り値には書きます。変数への代入は、推論に任せます。

// 書く
function publishedCount(flags: boolean[]): number {
  // 書かない
  let count = 0;
  for (const flag of flags) {
    if (flag) count++;
  }
  return count;
}

let count = 0 にわざわざ number と書いても、情報は増えません。型注釈は多いほど良いものではなく、推論できないところと、約束として残したいところに置くものです。

手を動かす

エディタに次のコードを貼って、total と titles にホバーしてみてください。自分の予想と一致するか確かめてから、次のレッスンへ進みます。

const titles = ["プロフィールサイト", "自己紹介カード"];
const total = titles.length * 2;