Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
接口
接口的定义
使用接口,我们可以定义对象里的属性和其类型。
interface Person {
name: string
age: number
}
const mingren: Person = {
name: "鸣人",
age: 18,
}
接口定义的对象有以下限制:
- 属性名必须一致。
- 属性类型必须一致。
- 属性数量必须一致。
interface Person {
name: string
age: number
}
// ok
const mingren: Person = {
name: "鸣人",
age: 18,
}
// Type 'string' is not assignable to type 'number'.
const zuozhu: Person = {
name: "佐助",
age: "18",
}
// Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.
const ningci: Person = {
name: "宁次",
}
// Type '{ name: string; age: number; sex: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'sex' does not exist in type 'Person'.
const xiaoying: Person = {
name: "小樱",
age: 19,
sex: "female",
}
可选属性
我们可以将一个属性指定为可选属性,这样它就是可以存在的也可以不存在的。
interface Person {
name: string
age?: number
}
// ok
const mingren: Person = {
name: "鸣人",
age: 18,
}
// ok
const ningci: Person = {
name: "宁次",
}
只读属性
如果希望一些属性只能在创建时被赋值,之后无法被修改,那可以使用只读属性。
interface Person {
readonly name: string
age: number
}
const mingren: Person = {
name: "鸣人",
age: 18,
}
// Cannot assign to 'name' because it is a read-only property.
mingren.name = "宁次"
任意属性
我们希望接口有任意的属性任意类型时可以如下定义。
interface Person {
name: string
[propName: string]: any
}
const mingren: Person = {
name: "鸣人",
age: 18,
height: 1.8,
}
$$tip
任意属性同样慎用,这会失去使用 TypeScript 的意义。
$$