对象接口的好处

对象接口, 对象对接的好处是可以明确对象的类型，避免一些边界问题。

下面我们来看一个例子。

interface List {
    id: number;
    name: string;
}

interface Result {
    data: List[]
}

function render(result: Result) {    
    result.data.forEach((value) => {
        console.log(value.id, value.name)
    })
}

let result = {
    data: [
        {id: 1, name: ‘A‘},
        {id: 2, name: ‘B‘}
    ]
}

render(result);

类型断言

类型断言是告诉编译器绕过这种检查。所以类型断言更像是类型的选择，而不是类型转换。

什么时候需要类型断言

在实际开发过程中，后端会传过来预定之外的字段， 比如后端传入的data多了sex字段。

interface List {
    id: number;
    name: string;
}

interface Result {
    data: List[]
}

function render(result: Result) {    
    result.data.forEach((value) => {
        console.log(value.id, value.name)
    })
}

let result = {
    data: [
        {id: 1, name: ‘A‘, sex: ‘male‘},
        {id: 2, name: ‘B‘}
    ]
}

render(result);

类型断言的方法

使用类型断言有两种方法：

<类型>值

// 或者

值 as 类型

as 方法

interface List {
    id: number;
    name: string;
}

interface Result {
    data: List[]
}

function render(result: Result) {    
    result.data.forEach((value) => {
        console.log(value.id, value.name)
    })
}

let result = {
    data: [
        {id: 1, name: ‘A‘, sex: ‘male‘},
        {id: 2, name: ‘B‘}
    ]
}

render(result as Result);

<类型>值

推荐以 as 方式，因为 jsx 这样的语法中只支持 as 方式。

interface List {
    id: number;
    name: string;
}

interface Result {
    data: List[]
}

function render(result: Result) {    
    result.data.forEach((value) => {
        console.log(value.id, value.name)
    })
}

let result = {
    data: [
        {id: 1, name: ‘A‘, sex: ‘male‘},
        {id: 2, name: ‘B‘}
    ]
}

render(<Result>result);

可选属性，只读属性

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 例如给函数传入的参数对象中只有部分属性赋值了。带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

只读属性

顾名思义就是这个属性是不可写的，对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性。 只读属性是不可以修改的。

interface List {
    readonly id: number; // 这里是只读属性
    name: string;
    age?: number; // 这里是可选属性
}

interface Result {
    data: List[]
}

function render(result: Result) {    
    result.data.forEach((value) => {
        console.log(value.id, value.name)
    })
}

let result = {
    data: [
        {id: 1, name: ‘A‘, sex: ‘male‘},
        {id: 2, name: ‘B‘}
    ]
}

render(<Result>result);

【Typescript】对象类型接口（4）

原文：https://www.cnblogs.com/Joannamo/p/14493394.html