前端 - typescript 联合类型类型推断？

Question

type TestType = {
    value:string
    run:(v:string)=>void
  }
|
{
  value:string[],
  run:(v:string[])=>void
}
  
var obj:TestType = {
  value:'12',
  run:(val)=>{ // val为什么是any？而不是string?
  }
}

想实现value是string那么val就是string，value是string[]那么val就是string[]

Answer 1

要实现这个需求，你可以使用 TypeScript 的联合类型和类型守卫。首先，将TestType类型定义为两个独立的类型，然后使用类型守卫在run函数内部确定value的类型。

type TestTypeString = {
  value: string;
  run: (v: string) => void;
};

type TestTypeStringArray = {
  value: string[];
  run: (v: string[]) => void;
};

type TestType = TestTypeString | TestTypeStringArray;

function isTestTypeString(obj: TestType): obj is TestTypeString {
  return typeof obj.value === "string";
}

var obj: TestType = {
  value: "12",
  run: (val) => {
    if (isTestTypeString(obj)) {
      // Now TypeScript knows that val is a string
      const newVal: string = val;
      // ...
    } else {
      // Now TypeScript knows that val is a string[]
      const newVal: string[] = val;
      // ...
    }
  },
};

上面的代码中，将TestType定义为两个独立的类型TestTypeString和TestTypeStringArray，然后将它们组合成一个联合类型TestType。接下来，我们创建了一个类型守卫函数isTestTypeString，以确定obj是否为TestTypeString类型。最后，在run函数内部，我们使用类型守卫函数来判断value的类型，从而使 TypeScript 能够正确推断val的类型。