迹忆客 专注技术分享

与纯 JavaScript 相比，TypeScript 中的接口提供了一种严格的类型支持结构。用户可以设计界面或存在于用户导入的第三方库中。

大多数时候，用户希望根据第三方库中提供的接口定义创建一个对象来访问第三方库提供的方法和功能。

本文将重点介绍从接口定义创建对象。

与接口定义相关的所有属性都可以直接分配给新创建的对象。下面的代码段演示了这一点。

interface Animal {
    legs : number ;
    eyes : number ;
    name : string ;
    wild : boolean ;
};

const dog : Animal = {
    legs : 4,
    eyes : 2,
    name : 'Dog',
    wild : false
};

现在可以从 dog.name 或 dog.wild 等对象访问属性。

可以使用 as 关键字初始化空对象，稍后可以设置其属性。下面的代码段演示了这一点。

interface Animal {
    legs : number ;
    eyes : number ;
    name : string ;
    wild : boolean ;
};

const dog : Animal = {} as Animal;

dog.legs = 4;
dog.name = "Dog";
console.log(dog);

输出：

{
  "legs": 4,
  "name": "Dog"
}

因此初始化了一个类型为 Animal 的空对象，并设置了属性 legs 和 name。打印对象时，它只显示设置的属性。

可以使用 as 关键字直接设置所需的属性。as 关键字强制编译器识别对象是某种类型，即使对象中的所有字段都没有设置。

interface Animal {
    legs : number ;
    eyes : number ;
    name : string ;
    wild : boolean ;
};

const dog : Animal = {
    legs : 4,
    name : 'Dog',
} as Animal;

Partial 类型用于使接口的所有属性都是可选的。当创建对象只需要某些接口属性时，使用 Pick 类型。

Omit 类型用作 Pick 类型的反面 - 从界面中删除某些属性，同时根据需要保留所有其他属性。

interface Animal {
    legs : number ;
    eyes : number ;
    name : string ;
    wild : boolean ;
};

const dogOnlyWithName : Pick<Animal, 'name'> = {
    name : "Dog"
};

const dogWithoutWildFlagAndEyes : Omit<Animal, "wild" | "eyes"> = {
    legs : 4,
    name : "Dog"
}

const dogWithAllOptionalTypes : Partial<Animal> = {
    eyes: 2
};

界面中的一些属性可以用 ? 标记为可选的。运算符。对于用户定义的接口，这是一个可行的选择，但在从第三方库导入的接口的情况下无法实现。

interface Animal {
    legs : number ;
    eyes? : number ;
    name : string ;
    wild? : boolean ;
};

const dog : Animal = {
    legs : 4,
    name : 'Dog'
};