やったこと

【世界で7万人が受講】Understanding TypeScript 日本語版

学んだこと

Union型

「AまたはBの型」といった表現が可能になる。

const combine = (input1:number | string, input2:number | string):number | string => {...}

Literal 型

「特定の値を持ったオブジェクトのみ有効」といった表現が可能

const combine = (
input1: number | string,
input2: number | string,
resultConversion: 'as-number' | 'as-string'
): number | string => {...}


上記の ResultConversion は、String型の内、 as-number と as-string という値のみ引き受ける。
これで、任意のstring型がやってくる可能性を排除できる。

alias型

type キーワードを使用した、任意の型を定義できる機能。
型定義に新たな名前を付与でき、再利用性を高める。

type addNumber = (n1: number, n2: number) => number; /*関数の型*/
type Combinable = number | string; /*Union型*/
type ResultConversion = 'as-number' | 'as-string'; /*Literal型*/
type TodoType = { /* Object型 */
  userId:number;
  id: number;
  title: string;
  completed: boolean;
}

typeで定義した型は、 export することで、ファイル分割された他のソースコードから参照できる。

Pick と Omit の復習

既存のオブジェクトから任意のフィールドを抜き出し、新たなオブジェクトを定義する記法。

export type TodoType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean
}
...
const Todo = (props: Omit<TodoType, "id">) => {...}
const Todo = (props: Pick<TodoType, "userId","title","completed">) => {...}

any型よりもunknown型

unknown型の変数を他の型（例えばstring）の変数へ代入するには、型チェックしなければならない（コンパイルエラーが発生する）。
any型で同様のことを実施すると、コンパイルエラーが発生しない。

コンパイルエラーを発生させ、プログラマに注意を促す意味で、unkown型の方が推奨される。