TypeScript 学習ノート: 型の絞り込み

序文

TS の最も優れた点は、強力な型付けとそれに続く型の絞り込みです。ついでにまとめておきます。

型推論

TypeScript では、型推論により明示的な型がない場合に型を提供できます。

例：

let x = [0, 1, null] // 数値

let x = Math.random() < 0.5 ? 100 : "helloword" // 数値|文字列

let x: Animal[] = [new Rhino(), new Elephant(), new Snake()]; // サイ | 象 | ヘビ

最適な共通型が見つからない場合、型推論の結果は共用体配列型になります。

ユニオン型と型ガード

例：

// ユニオン型 type Types = number | string

関数 typeFn(型: Types、入力: 文字列): 文字列 {
  // これを書く場合は、type の型を決定する必要があります}

型推論を直接割り当てることができる

x:数値|文字列 = 1 とします
x="ティエダン"

判断しないとエラーになります。

関数 typeFn(型: 数値 | 文字列、入力: 文字列) {
  // エラー演算子 + は文字列には適用できません 
  新しい配列(type + 1).join("") + 入力を返す
}

だから私たちは判断しなければならない

関数 typeFn(型: 数値 | 文字列、入力: 文字列) {
  // 型ガード if (typeof type === 'number') {
    新しい配列(type + 1).join(" ") + input を返す
  }
  戻り値の型 + 入力
}

型絞り込みとは、判定型に基づいてより具体的な型を再定義することです。

では、なぜこれを学ぶのかという疑問が生じます。js は良いものではないのですか?

個人的な意見:

TypeScript を使用すると、弱い言語としての JavaScript の脆弱性を軽減し、誤った型によって発生するエラーのリスクや、さまざまな JavaScript バージョンの混在によって発生するエラーのリスクを軽減できます。

TypeScript は、高級言語の強力な型付けという最も重要な機能を JavaScript に簡単に導入し、JavaScript コードの記述時にデータ型の変換によって発生する予期しないエラーを防ぎ、トラブルシューティングの難易度を高めるという問題を解決します。

typeof の型ガード:

"弦"
"番号"
"bigint" // ES10 では "boolean" が追加されます
"symbol" // ES6 では "undefined" が追加されます
"物体"
"関数"

注意: typeof nullはobjectと等しい

したがって：

関数 strOrName(str: 文字列 | 文字列[] | null) {
  if (typeof str === 'object') {
    (const s of str) の場合 {
      // str が null の可能性があるためエラーを報告します
      コンソール.log(複数)
    }
  } そうでない場合 (typeof str === 'string') {
    コンソール.log(文字列)
  } それ以外 {
    //.......
  }
}

真理値の絞り込み

js の真理値表は非常に複雑です。以下は偽ですが、それ以外はすべて真です。

0
ナン
「」
0n // 0 の Bigint バージョン null
未定義

nullエラーを回避するには、真理値絞り込みを使用することができます。

// true 値を使用して判断します if (str && typeof strs === 'object') {
  (const s of strs) の場合 {
    コンソール.log(複数)
  }
}

これもOK

関数valOrName(値: number[] | undefined, フィルター: number): number[] | undefined {
  if (!値) {
    戻り値
  } それ以外 {
    戻り値.filter(x => x > filter)
  }
}

要約: 真理値の絞り込みにより、null/undefined/0 などの値の処理が容易になります。

平等の縮小

等価性を絞り込みたい場合は、===、!==、==、and、!= などの演算子を使用して等価性を絞り込むことができます。

例1:

関数 strOrNum(x: 文字列 | 数値, y: 文字列 | ブール値) {
  もし (x === y) {
    // 弦
  } それ以外 {
    // 文字列|数値
  }
}

例2:

関数 strOrName(str: 文字列 | 文字列[] | null) {
  if (str !== null) {
    if (typeof str === 'object') {
      (const s of str) の場合 {
        console.log(s) // []
      }
    } そうでない場合 (typeof str === 'string') {
      console.log(str) // 文字列
    } それ以外 {
      // .....
    }
  }
}

例3:

インターフェース型 {
  値: 数値 | null | 未定義
}

関数 valOrType(type: Types, val: number) {
  // null と undefined はどちらも false であり、数値のみになります
  （type.value != null）の場合{
    タイプ.値 *= val
  }
}

演算子の絞り込み

in はオブジェクトにプロパティがあるかどうかをチェックし、「型ガード」として機能します。

例：

インターフェースA { a: 数値 };
インターフェース B { b: 文字列 };

関数foo(x:A | B) {
    if ("a" in x) {
        xa を返します。
    }
    xb を返します。
}

インスタンスの絞り込み

instanceof 式の右側は、any 型、または Function インターフェース型に割り当て可能な型である必要があります。

例：

関数 dateInval(x: 日付 | 文字列) {
  if (x インスタンスの日付) {
    // 日付
  } それ以外 {
    // 弦
  }
}

狭まりの本質

絞り込みの本質は、型を再定義することである

例：

関数の例() {
  x: 文字列 | 数値 | ブール値
  x = Math.random() < 0.5
  もし（Math.random() < 0.5）{
    x = 'hello' // 文字列
  } それ以外 {
    x = 100 // 数値
  }
  return x; // 文字列|数値
}

ユニオン型の縮小

例1:

インターフェースシェイプ{
  種類: "円" | "四角"、
  redius?: 番号
  サイドの長さ?: 数値
}

// エラー関数 getArea(shape: Shape) {
	Math.PI * shape.redius ** 2 を返す
}
// 絞り込みまたはエラー function getArea(shape: Shape) {
  if (shape.kind === '円') {
    Math.PI * shape.redius ** 2 を返す
  }
}
// 非nullアサーション関数を使用する getArea(shape: Shape) {
  if (shape.kind === '円') {
    Math.PI * shape.redius! ** 2 を返す
  }
}

例2:

インターフェースサークル{
  種類: "circle";
  redius: 数値;
}

インターフェーススクエア{
  種類: "正方形";
  redius: 数値;
}

タイプ 形状 = 円 | 四角形

関数 getArea(shape: Shape) {
  if (shape.kind === 'cirle') { // narrow return Math.PI * shape.redius ** 2
  }
}

// または関数 getArea(shape: Shape) {
  スイッチ (形状.種類) {
    ケース「円」:
      Math.PI * shape.redius ** 2 を返す
    ケース「正方形」:
      shape.sideLength ** 2 を返す
    デフォルト：
      const _example: 決して = シェイプ
      戻り値 _example
  }
}

要約する

TypeScript の型絞り込みに関する学習ノートはこれで終了です。TypeScript の型絞り込みに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: