[TypeScript] 型削減

タイプ絞り込み

タイプリダクションとは?

Type Narrowing は英語で Type Narrowing です。

TypeScript の実行パスは、次のようtypeof padding === "number"なます。

特定の実行パスで、宣言されたものよりも小さい型を縮小できます。これは、縮小と呼ばれるプロセスです。

そして、 typeof padding === "number ステートメントを呼び出すことができます类型保护(型ガード);

一般的な保護の種類は次のとおりです。

  • タイプ

  • 均等縮小 (例 ===、!==)

  • インスタンス

  • などなど…

主に、typeof、等式還元、instanceof の 4 種類について説明します。

タイプ

TypeScript では、typeof の戻り値をチェックすることは一種の保護です。TypeScript は typeof がさまざまな値でどのように動作するかをエンコードするためです

たとえば、関数をカプセル化する次の一般的なものがあります。関数にはパラメーター ID を渡す必要があり、渡された ID は文字列型または数値型の場合があります。

入力 ID が文字列タイプの場合、ID のすべての文字を大文字に変換する必要があります。

function printID(id: string|number) {
    
    
  if (typeof id === "string") {
    
    
    console.log(id.toUpperCase())
  } else {
    
    
    console.log(id)
  }
}

// 测试
printID(123)
printID("aaa")
  • 上記のコードでは、if 判定ステートメント全体が型削減されます. たとえば、コードが if ステートメントの最初の分岐に入るとき、それは型 string である必要があり、2 番目の分岐は型 number である必要があります.
  • if の判定文を型保護と呼ぶ

平等が狭まる

Switch または一部の等値演算子 ( === 、 !== 、 == 、 != など) を使用して等値を表現できます

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {
    
    
  // 平等类型缩小
  switch (direction) {
    
    
    case "left":
      console.log(direction)
      break
    case "right":
      console.log(direction)
      break
    case "top":
      console.log(direction)
      break
    case "bottom":
      console.log(direction)
      break
    default:
      console.log("调用默认方法")
  }
}

// 测试
printDirection("left")
printDirection("right")
printDirection("top")
printDirection("bottom")

インスタンス

JavaScript には、値が別の値の「インスタンス」であるかどうかをチェックする演算子があります

function printTime(time: string|Date) {
    
    
  // 判断time是否是Date的实例
  if (time instanceof Date) {
    
    
    console.log(time.toUTCString())
  } else {
    
    
    console.log(time)
  }
}

// 测试
printTime("2020-01-02")
const date = new Date()
printTime(date)
  • よくわからない場合は、次の例を見てください。
class Teacher {
    
    
  working() {
    
    
    console.log("正在工作")
  }
}

class Student {
    
    
  studying() {
    
    
    console.log("正在学习")
  }
}

function work(p: Student | Teacher) {
    
    
  // 判断是哪一个实例
  if (p instanceof Teacher) {
    
    
    p.working()
  } else {
    
    
    p.studying()
  }
}

// 测试
const stu = new Student()
const tec = new Teacher()

work(stu) // 正在学习
work(tec) // 正在工作

Javascript には、オブジェクトに名前付きのプロパティがあるかどうかを判断する演算子があります: in 演算子

in 演算子は、指定されたプロパティが指定されたオブジェクトまたはそのプロトタイプ チェーンにある場合に true を返します。

// () => void表示是一个函数类型
type Dog = {
    
    running: () => void}
type Fish = {
    
    swimming: () => void}

function walk(animal: Dog|Fish) {
    
    
  // 判断函数是否在animal中
  if ("swimming" in animal) {
    
    
    animal.swimming()
  } else {
    
    
    animal.running()
  }
}

// 测试
const dog: Dog = {
    
    
  running() {
    
    
    console.log("狗是跑的")
  }
}
const fish: Fish = {
    
    
  swimming() {
    
    
    console.log("鱼是游的")
  }
}

walk(dog) // 狗是跑的
walk(fish) // 鱼是游的

おすすめ

転載: blog.csdn.net/m0_71485750/article/details/126329246