打字稿的接口差异？

Question

我有几个接口：

interface ISubstitution {
   id: number;
   name: string;
   date: string;
   subject: number;
   new: string;
   group: number;
   form: boolean;
}

interface ISubstitutionHot {
  new: string;
  group: number;
  form: boolean;
}

其对应的接口类型为一个对象：

public a: any;
a = <ISubstitution> {
       id: 1,
       name:"O",
       date: "2018-01-1",
       subject: "M",
       new: "A", 
       group: 1,
       form: true
}

注意 ISubstitutionHot 扩展 ISubstitution。

所以，总之我已经填充了对象a。

如何区分 objects/interfaces 如：

let c = <a>ISubstitution / <b>ISubstitutionHot;

要仅检索对象 a 中接口 ISubstitutionHot 中的字段？应该return我：

c = {
new: "A", 
group: 1,
form: true
}

在 TypeScript 中可以吗？

Answer 1

TypeScript 中的类型和接口仅在 compile/design 时存在，当代码编译为 JavaScript 时为 erased。这意味着在运行时让事情发生的唯一方法是将所需的信息放在 value 而不仅仅是 type 中。这是一种继续进行的方法：

首先，定义hotKeys，一个字符串数组"new"，"group"，和"form"。函数 keyArray() 只是一个辅助函数，它允许 TypeScript 推断文字类型而不仅仅是 string[]:

const keyArray = <K extends string>(...keys: K[]) => keys;
const hotKeys = keyArray('new', 'group', 'form');
type HotKeys = typeof hotKeys[number];

如果您检查它，hotKeys 是 ('new' | 'group' | 'form')[] 类型，因此 HotKeys 是 'new' | 'group' | 'form'。

现在我们将定义 pick() 函数，它获取一个对象和该对象的键数组，以及 returns 另一个对象，该对象仅具有与这些键对应的属性。像这样：

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const ret = {} as Pick<T, K>; // empty to start
  keys.forEach(k => ret[k] = obj[k]); // copy some properties
  return ret; 
}

这是一个generic function which uses the built-in Pick mapped type。

如果需要，您可以按照现有方式将 ISubstitutionHot 定义为接口，也可以像这样根据 ISubstitution 和 HotKeys 定义它：

type ISubstitutionHot = Pick<ISubstitution, HotKeys>; 
// { new: string; group: number; form: boolean; }

最后，让我们编写将 ISubstitution 转换为 ISubtitutionHot 的函数：

function iSubstitutionHot(iSub: ISubstitution): ISubstitutionHot {
  return pick(iSub, hotKeys);
}

以上函数类型检查没有错误表明我们走在正确的轨道上。

好的，我们试试看：

const a: ISubstitution = {
  id: 1,
  name: "O",
  date: "2018-01-1",
  subject: 1, // "M" <-- number!
  new: "A",
  group: 1,
  form: true
}

let c = iSubstitutionHot(a);
console.log(c); // { new: "A", group: 1, form: true }

有效！您可以看到正在运行的代码 here。希望有所帮助。祝你好运。

打字稿的接口差异？

Inerfaces difference in Typescript?

typescript

typescript2.0