有没有办法“提取”TypeScript接口属性的类型？

Question

假设有一个库 X 的打字文件，其中包含一些接口。

interface I1 {
    x: any;
}
    
interface I2 {
    y: {
        a: I1,
        b: I1,
        c: I1
    }
    z: any
}

为了使用这个库，我需要传递一个与

I2.y

类型完全相同的对象。我当然可以在我的源文件中创建相同的界面：

interface MyInterface {
    a: I1,
    b: I1,
    c: I1
}

let myVar: MyInterface;

但随后我就有了保持它与库中的最新版本的负担，而且它可能非常大并导致大量代码重复。

那么，有没有办法“提取”接口的这个特定属性的类型呢？与

let myVar: typeof I2.y

类似的东西（不起作用并导致“找不到名称 I2”错误）。

---

编辑：在 TS Playground 玩了一段时间后，我注意到以下代码完全达到了我想要的效果：

declare var x: I2;
let y: typeof x.y;

但是它需要声明一个冗余变量

x

。我正在寻找一种无需声明即可实现此目标的方法。

Answer 1

这在以前是不可能的，但幸运的是，自从 TypeScript 版本 2.1 以来，现在可以了。它于 2016 年 12 月 7 日发布，并引入了索引访问类型，也称为查找类型。

语法看起来像元素访问，但是代替类型编写的。所以在你的情况下：

interface I1 {
    x: any;
}

interface I2 {
    y: {
        a: I1,
        b: I1,
        c: I1
    }
    z: any
}

let myVar: I2['y'];  // indexed access type

现在

myVar

的类型为

I2.y

。

在 TypeScript Playground 中查看。

Answer 2

要扩展已接受的答案，您还可以使用

type

关键字分配类型并在其他地方使用它。

// Some obscure library
interface A {
  prop: {
    name: string;
    age: number;
  }
}

// Your helper type
type A_Prop = A['prop']

// Usage
const myThing: A_prop = { name: 'June', age: 29 };

Answer 3

只是从 union 对象类型中提取文字类型的示例：

type Config = {
    key: "start_time",
    value: number,
} | {
    key: "currency",
    value: string,
}

export type ConfigKey = Config["key"];
// "start_time"|"currency"

Answer 4

keyof Colors

将返回所有键

"white" | "black"

的列表。当此键列表传递到 Colors 接口时，类型将是给定键的所有值，

"#fff" | #000

。

interface Colors {
  white: "#fff"
  black: "#000"
}

type ColorValues = Colors[keyof Colors]
// ColorValues = "#fff" | "#000"

Answer 5

const foo = ()=>{
   return {name: "test", age: 5}
}
type T1 = ReturnType<typeof foo> // {name: string, age: number}
type T2 = ReturnType<typeof foo>['name'] // string
type T3 = T1['age'] // number

Answer 6

接口就像对象的定义。那么 y 是 I2 对象的一个属性，它是某种类型，在这种情况下是“匿名”。

您可以使用另一个接口来定义 y，然后将其用作您的 y 类型，如下所示

interface ytype {
   a: I1;
   b: I1;
   c: I1;
}

interface I2 {
    y: ytype;
    z: any;
}

您可以将界面放入文件中并使用提取，以便您可以将其导入到项目的其他文件中

export interface ytype {
   a: I1;
   b: I1;
   c: I1;
}



 export interface I2 {
        y: ytype;
        z: any;
    }

您可以这样导入：

   import {I1, I2, ytype} from 'your_file'