TypeScript--接口

在 TypeScript 中，我们使用 接口（interface） 来定义 对象的类型。

示例

interface Person {
    name: string
    age: number
}

// ✅正确
// 对象的属性必须和接口保持一致
const tom1: Person = {
    name: 'Tom',
    age: 23,
}

// ❌错误
// Property 'age' is missing ...
// 缺少 'age' 属性
const tom2: Person = {
    name: 'Tom',
}

// ❌错误
// 'gender' does not exist in type 'Person'
// 'Person' 不存在 'gender' 属性
const tom3: Person = {
    name: 'Tom',
    age: 23,
    gender: 'male',
}

// ❌错误
// 'name1' does not exist in type 'Person'
// 'Person' 不存在 'name1' 属性
const tom4: Person = {
    name1: 'Tom',
    age: 23,
}

可选属性

可选属性的含义是该属性可以不存在。

interface Person {
    name: string
    age?: number
}

// ✅正确
const tom1: Person = {
    name: 'Tom',
    age: 23,
}

// ✅正确
const tom2: Person = {
    name: 'Tom',
}

// ❌错误
// 'gender' does not exist in type 'Person'
// 'Person' 不存在 'gender' 属性
const tom3: Person = {
    name: 'Tom',
    gender: 'male',
}

任意属性

有时候我们希望一个接口允许有任意的属性

interface Person {
    [key: string]: any
    name: string
}

// ✅正确
const tom1: Person = {
    name: 'Tom',
}

// ✅正确
const tom2: Person = {
    name: 'Tom',
    gender: 'male',
}

// ✅正确
const tom3: Person = {
    name: 'Tom',
    age: 23,
}

注意：

• 如果在接口中定义了任意属性，那么接口中的其它属性的类型都必须是任意属性的类型的子集

示例：

interface Person {
    [key: string]: string
    name: string
}

// ❌错误
// Property 'age' of type 'number' is not assignable to string index type 'string'.
interface Person {
    [key: string]: string
    name: string
    age: number
}

Person 中定义了任意属性 [key: string]，任意属性的类型为 string；因此 Person 中的其它属性 name，name 属性的类型必须是 string 的子集 （string null undefined）。

age 属性是 number 类型，number 类型不是 string 类型的子集，所以会报错。

注意：

• 如果接口中有多个类型的属性，则可以在任意属性中使用联合类型

示例：

interface Person {
    [key: string]: string | number
    name: string
    age: number
}

// ✅正确
const tom1: Person = {
    name: 'Tom',
    age: 23,
    address: 'ShangHai',
    height: 180,
}

注意：

• 一个接口中只能定义一个任意属性。

只读属性

有时候对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性

interface Person {
    readonly idNo: number
    name: string
    age?: number
}

const tom1: Person = {
    idNo: 1000001,
    name: 'Tom',
}

// ❌错误
// Cannot assign to 'idNo' because it is a read-only
// 不能给 'idNo' 赋值，因为它是 'read-only' 的
tom1.idNo = 1000002

注意：

• 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

interface Person {
    name: string
    readonly idNo?: number
}

const tom1: Person = {
    name: 'Tom',
}

// ❌错误
// Cannot assign to 'idNo' because it is a read-only
// 不能给 'idNo' 赋值，因为它是 'read-only' 的
tom1.idNo = 1000002