在 TypeScript 中从接口创建对象
Shuvayan Ghosh Dastidar
2023年1月30日
- 在 TypeScript 中分配已创建对象中的所有字段
-
在 TypeScript 中使用
as
关键字设置空对象 -
在 TypeScript 中使用
as
关键字仅设置必需的属性 -
在 TypeScript 中使用
Partial
、Omit
和Pick
类型创建对象 -
在 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.name
或 dog.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
的空对象,并设置了属性 legs
和 name
。打印对象时,它只显示设置的属性。
在 TypeScript 中使用 as
关键字仅设置必需的属性
可以使用 as
关键字直接设置所需的属性。as
关键字强制编译器识别对象是某种类型,即使对象中的所有字段都没有设置。
interface Animal {
legs : number ;
eyes : number ;
name : string ;
wild : boolean ;
};
const dog : Animal = {
legs : 4,
name : 'Dog',
} as Animal;
在 TypeScript 中使用 Partial
、Omit
和 Pick
类型创建对象
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'
};