typescript学习-接口

接口

描述&&理解

typeScript的核心原则之一:对值的结构进行类型检查.

1
2
3
4
5
6
function printLabel (labeledObj: {label: string}) {
// 括号里的意思是存在一个参数,参数存在一个类型是string的label属性
console.log(labeledObj)
}
let myObj = { size: 10, label: 'xnnnn' }
printLabel(myObj)

重写,使用接口描述

1
2
3
4
5
6
7
interface LabeledValue {
label: string
}
// 接口是检查是否有相应属性和对应的类型(可参照上个代码段)
function printLable (labeledObj: LabeledValue) {
console.log(labeledObj.label)
}

可选属性

接口里的属性可以是非必须的。有些是只在某些条件下存在,或者根本不存在。

可在interface里key后面加上个 ?代表可选属性。如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface typeObj {
name: string;
age: number;
id?: number // id代表的就是可选属性
}
function printPerson(person: typeObj): void {
// 这里有个疑问?官网文档void部分是{ color: string; area: number }查了点资料并没有解释这里的,先mark
// 自问自答: void表示这个函数没有返回值,{ color: string; area: number }表示返回一个对象,对象里有color和area属性。
console.log(person.name) // 输出 xnnn
console.log(person.age) // 木的
}
let man = {
name: 'xnnn',
age: 20,
}
printPerson(man)

只读属性

字面意思,只能在刚创建的时候修改,不允许后来修改。

1
2
3
interface point {
readonly x: number // 此时x属性就是只读
}

判断该用 readonly 还是 const 。看把他作为变量使用还是作为一个属性使用。

变量的话用 const

作为属性用 readonly

额外的属性检查

如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。

我的理解是:interface检查一个没有声明的属性时会报错。声明了没有传入 (key?: value),和 传入一个不存在的,是有区别的。

解决办法:

  1. 最简洁:(官网管这种叫类型断言,目前还没有学到)

    1
    2
    3
    4
    5
    interface SquareConfig {
    color?: string;
    width?: number;
    }
    let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig)
2. 最佳: 添加字符串索引签名

1
2
3
4
5
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any
}
**这两周解决办法只限定两者之间存在同一个属性(上两例都存在 width 属性)**

函数类型

接口描述函数类型,主要描述的是函数的参数列表和返回值。

1
2
3
4
5
6
7
8
9
10
11
interface functionDescript {
(source: string, subString: string): boolean
// 👆括号里表示参数列表有两个值类型都是string。
// 冒号后面是 函数 的返回值
}
let mySearch: functionDescript
mySearch = function(src: string, sub: string): boolean {
// 形参可以不和接口里的对应上,但是类型顺序得对应上
// mark:又出现了: boolean这个,而且参数限定类型了,为什么还要二次限定函数类型
return true
}

可索引类型

描述那些能够通过索引得到的类型,例如:arr[2]、appMap[‘name’]的类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface StringArray {
[index: number]: string
}
// 包括一个索引签名和类型,还有对应索引返回值类型
interface StringMap {
[index: string]: string
}
interface ReadOnly {
readonly [index: number]: string
}
// 配置只读写法👆
let myArray: StringArray
myArray = ['xnn', 'xnnnn']
let myStr: string = myArray[0]

类类型(class语法不太熟悉,暂时跳过)

强制一个类去附和某种类型。

1
2
3
4
5
6
7
interface ClockInterface {
currentTime: Date
}
class Clock implements ClockInterface {
currentTime: date = new Date()
constructor(h: number, m: number) {}
}

继承接口

接口也能相互继承

1
2
3
4
5
6
7
8
9
interface shape {
color: string
}
interface square extends shape {
sideLength: number
}
let square = {} as square
square.color = 'blue'
square.sideLength = 10

多继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Shape {
color: string;
}

interface PenStroke {
penWidth: number;
}
interface square extends Shape, PenStroke {
// square 继承了Shape、PenStroke里的类型限制
sideLength: number
}
let square = {} as square
square.color = 'blue'
square.sideLength = 10
square.penWidth = 5.0

混合类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface counter {
(start: number): string;
interval: number
reset(): void // 这个写法不懂,和上面函数类型格式不一样
}
function getCounter(): Counter {
let counter = function(start: number) {} as Counter
counter.interval = 123
counter.reset = function() {}
return counter
}
let c = getCounter()
c(10) // 这个类型???
c.reset()
c.interval = 5.0

接口继承类 (真不熟,暂跳)

感谢您的阅读。 🙏