在 TypeScript 中从接口创建对象

Shuvayan Ghosh Dastidar 2023年1月30日
  1. 在 TypeScript 中分配已创建对象中的所有字段
  2. 在 TypeScript 中使用 as 关键字设置空对象
  3. 在 TypeScript 中使用 as 关键字仅设置必需的属性
  4. 在 TypeScript 中使用 PartialOmitPick 类型创建对象
  5. 在 TypeScript 中使用 ? 使接口中的属性成为可选的运算符
在 TypeScript 中从接口创建对象

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

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

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

在 TypeScript 中分配已创建对象中的所有字段

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

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

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

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

在 TypeScript 中使用 as 关键字设置空对象

可以使用 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 的空对象,并设置了属性 legsname。打印对象时,它只显示设置的属性。

在 TypeScript 中使用 as 关键字仅设置必需的属性

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

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

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

在 TypeScript 中使用 PartialOmitPick 类型创建对象

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
};

在 TypeScript 中使用 ? 使接口中的属性成为可选的运算符

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

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

const dog : Animal = {
    legs : 4,
    name : 'Dog'
};
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相关文章 - TypeScript Interface