3-ts接口 Interface

定义对象形状、可选属性 ?、只读属性 readonly、函数类型接口、接口继承 extends

1、interface

TypeScript 只关心我们传递给 函数参数 的值的_结构_ ------ 它只关心该值是否具有预期的属性。之所以只关注类型的结构和能力，是我们称 TypeScript 为_结构类型_类型系统的原因。

interface Point {
    x: string,
    y: number,
}

2、接口 interface同类型别名 type的区别

类型别名和接口非常类似，大多数情况下你可以自由选择使用哪一个。

几乎所有interface的功能在type中都可以使用。

关键的区别在于 向定义的类型添加属性

类型不能重新打开来添加新属性，而接口则总是可以扩展。

// interface能够直接使用extends继承其他接口类型的内容
interface Point {
    name: string
}
interface User extends Point {
    age: number
}
function setUser(user: User) {
    user.name; // √
    user.age; // √
}


// type不能使用extends直接继承其他类型的内容，需要使用 &
type Point = {
    name: string
}
type User = Pointer & {
    age: number
}
function setUser(user: User) {
    user.name; // √
    user.age; // √
}

// interface
inteface Point {
    name: string
}
interface Point {
    age: number
}
function setUser(user:Point) {
    user.name; // √
    user.age; // √
}

// type
type Point {
    name: string
}
type Point {  // Error: Duplicate identifier 'Point'.
    age: number
}
function setUser(user:Point) {
    user.name; // 报错
    user.age; // 报错
}

• 使用 extends 的接口 通常比使用交叉类型的类型别名 对编译器更高效

3、可选属性 ?、只读属性 readonly

interface Point {
    color?: string,
    width?: number,
    readonly height: number,
}

readonly

1. 在 TypeScript 中，属性也可以被标记为 readonly。虽然这不会改变运行时的任何行为，但在类型检查期间，被标记为 readonly 的属性不能被写入。
2. 使用 readonly 修饰符并不一定意味着一个值是完全不可变的------换句话说，它的内部内容是可以被改变的。它只是意味着属性本身不能被重新赋值。
3. 当 TypeScript 检查两个类型是否兼容时，它不会考虑两个类型上的属性是否是 readonly，因此 readonly 属性也可以通过别名进行修改。

可选属性 ?

interface Point {
    color?: string,
    width?: number,
}
function setPoint(point: Point) {}

// 1. 如果传入得实际参数的属性"小于"定义的属性，则不报错
setPoint({ width: 20; }) // √

// 2. 如果传入得实际参数的属性"大于"定义的属性，则报错（即存在定义的ts不存在的属性）
setPoint({ width: 20, clour: '#fff' }) // 报错，colour不存在定义的类型中

// 解决 【溢出属性】报错问题
// 1. [正统做法] 修改类型声明，从定义类型层面解决问题
// 2. [ 差一点的办法 ] 使用 [ 字符串索引签名 ]
interface Point {
    color?: string,
    width?: number,
    [propName: string]: unknown,
}
// 3. [ 再差一点的办法 ] 使用 [ 类型断言as ]
setPoint({ width: 20, colour: '#fff' } as Point)

4、接口继承 extends, 函数类型接口

// 接口继承
interface Point {
    name: string
}
interface User {
    age: number
}
interface Finally extends Point, User {
    sex: string
}

// 函数类型接口
// 在 JavaScript 中，函数除了可以被调用外，还可以拥有属性。然而，函数类型表达式的语法并不允许声明属性。如果我们想描述一个可调用且带有属性的东西，可以在对象类型中写一个 *调用签名*：
interface DescribeFn {
    description: string,
    (someArg: number, arg2: number): bolean
}
function doSomething(fn: DescribeFn) {
    console.log(fn.description + `returned` + fn(6, 2))
}