TypeScriptで使われる表現チートシート｜SKILLDO

TypeScriptで同じことを調べている気がするので、よく使うものをまとめていきたいと思います。

1. x == null
2. ユーザ定義の型ガード
- 引数名 is 型
分割代入
さいごに

1. x == null

まずはx == nullです。これはxがnullまたはundefinedのときのみtrueを返します。基本的に比較演算子は「===」を使います(「==」は異なる型のときに暗黙的な型変換を行うためです。例) 3 == “3”がtrue)が、例外的に「==」が使われる代表的な例です。

nullとundefinedはどちらもデータがないことを表すことが多い似た値なので、x == nullを使って分岐させることが多いです。

if (x == null) {
  return
}

2. ユーザ定義の型ガード

ユーザ定義の型ガードは、返り値の型として型述語が書かれた特殊な関数です。

引数名 is 型

返り値で必ずbooleanを返す関数を作ります。自分が個人アプリで使っている例を示します。

export type ErrorMessage = {
  message: string;
  forDeveloperMessage: string;
};

export function isErrorMessage(value: any): value is ErrorMessage {
  if (value == null) return false;

  return (
    typeof value.message == "string" &&
    typeof value.forDeveloperMessage == "string"
  );
}

このisErrorMessageの関数は引数に値を受け取り、それがErrorMessageの型の条件を満たすかを調べています。この表現により、型の絞り込みが行われています。

この返り値の型をvalue is ErrorMessageからbooleanに変えると絞り込みが行われません。

export function isErrorMessage(value: any): boolean {
  if (value == null) return false;

  return (
    typeof value.message == "string" &&
    typeof value.forDeveloperMessage == "string"
  );
}

if (isErrorMessage(something)) {
  // コンパイルエラー
  console.log(something)
}

分割代入

JSの構文である「オブジェクトの分割代入」はオブジェクトからプロパティを取得し、変数に代入するという操作を簡単に書くことができます。

const { foo, bar } = obj;

これにより、「objのfooプロパティを変数fooに、objのbarプロパティを変数barに代入する」という意味になります。

これをReactコンポーネントの引数の型定義でも同じように使うことができます。

export const Description = ({ title }: { title: string }) => {
  return (
    <MainText text={title} />
  )
}

// あるいは

type Props = {
  title: string
}

export const Description = ({ title }: Props) => {
  return (
    <MainText text={title} />
  )
}

これにより、「オブジェクト型(Props型)のtitleプロパティの型(ここではstring型)を変数titleに代入する」という意味になります。

さいごに

チートシートにしては少なすぎるので、まだまだ増やしていく予定です。
分かりにくいやアドバイス等ありましたらコメントくださると幸いです。では！
Twitterもやってますので、フォローしていただけるとうれしいです。

Follow @sakai_1910

TypeScript