TS:|TS: 接口 TS:接口

文章图片
接口算是官方文档里的第一个知识点了，这篇文章会简单介绍 TypeScrip 里的接口。
类型在说接口之前我们先来了解下 TypeScript 里的类型，因为在接口的使用和类型密不可分。
JS 类型
JS 有 7 种数据类型

number
string
boolean
object，里面包含 Array, Function, Date, Object, RegExp 等
symbol，这是 ES 6 里的，主要用来表示一个东西是唯一的，实际上比较少用。好吧，根本没用过。。。
null，表示空
undefined，表示未定义

let bool: boolean = true let str: string = 'Hi' let num: number = 1.222 let obj: object = {name: 'Jack'} let n: null = null let u: undefined = undefined

TS 的新类型
any 【TS:|TS: 接口】如果在 TS 里没有声明类型，那么默认就是 any 类型，这样就直接一夜回到 JS 时代。

let a: number = 1 a = 'Hello' // 报错let a: any = 1 a = 'Hello' // OK

enum 枚举类主要用来规定只能选 XXX 或者 YYY，如

enum Gender { Male = 'Male', Female = 'Female' }let gender: Gender = Gender.Malegender = Gender.Female console.log(gender) // 'Female'gender = Gender.Woman // 报错

而如果不在 enum 里初始化，那么 Male 和 Female 的值就会以数值的方式显示。

enum Gender { Male, Female }let gender: Gender = Gender.Malegender = Gender.Male console.log(gender) // 0 gender = Gender.Female console.log(gender) // 1

void 这个类型就是指空值，在 C 语言和 Java 里应该是很常见的，一般用在函数的返回值里。

function fn(): void { console.log('fn') }

断言
断言的用法是主观地认为这个变量的类型是什么，如

let n: any = '123'console.log(n.split(''))

这里主观地认为 n 是一个字符串，但是声明的时候确是 any 类型。如果主观认为错了，会报错。

let n: any = 123console.log(n.split('')) // 报错

也可以用 as 来断言。

let n: any = '123' console.log((n as string).split(''))

这个一般可以用在表单组件的测试用例里，首先模拟用户输入非法类型，然后 expect(xxxx).to.抛出TS主观错误 就可以完成一个测试用例了。
接口基础现在回到我们的主题。在学习 Java 的时候我就觉得这个名字很难理解，不知道用来干嘛的，因为 Java 还有一个抽象类，两者很像而且使用场景差不多，但是用法又有点差别，真的烦。幸好 TS 里就只有接口，还是容易理解一些。
接口简单来说就是规定一些 “事”，在后台中，接口指的是双方规定的 API，在 TS 里接口一般指这个变量拥有什么东西。

interface Shape { head: string; arm: string; } interface Human { name: string; age: number; shape: Shape; say(word: string): void; }let jack: Human = { name: 'Jack', age: 18, shape: { head: 'head', arm: 'arm' }, say(word: string) { console.log(word) } } jack.say('hi')

上面规定了类型为 Shape 的变量应该有 head 和 arm，而 Human 类型的应该有 name, age, shape, say 属性。其中还对函数以及 shape 做了一些规定。
这就是接口，不过是一些规范而已。
接口里的属性接口除了对属性类型做了规定，还能做以下规定
readonly

interface Human { readonly name: string }let jack: Human = { name: 'Jack' }jack.name = 'Ivan' // 报错: name 是只读的

这里指定 name 是只读的，初始化后就不能再次赋值了。
可选
有时候我们不一定要设置对象里的某个属性，接口里可以用 "?" 来表示一个属性是否是可选的。

interface Human { gender: string, age?: number }let jack: Human = { gender: 'Male' // 可以不赋值 age 属性，因为是可选的 }

描述属性
除此之外，我们还可以控制接口里属性规定的写法，不懂？看代码。

interface Rect { height: number; width: number; [propName: string]: number }

这里规定 Rect 这个接口里 Key: Value 对只能是 Key 为 string 类型，而 Value 为 number 类型。
函数接口因为函数也是对象，所以我们也可以通过接口来对函数做“规定”。

interface Fn { (a: number, b: number): number; }let add: Fn = function(a: number, b: number): number { return a + b }console.log(add(1, 2))

这里定义了 Fn 接口，规定了参数的类型为 number，返回值的类型为 number。
接口的继承就像 ES 6 的 class 一样，接口也可以做继承操作，效果就是会继承父接口的“规定”。

interface Animal { move(): void; }interface Human extends Animal { name: string; age: number; }let jack: Human = { age: 18, name: 'Jack', move() { console.log('move') } }

Human 接口继承了 Animal 里的 move 函数的“规定”，所以在初始化 jack 变量时也要加上 move 函数，否则报错。