接口算是官方文档里的第一个知识点了，这篇文章会简单介绍 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 里没有声明类型，那么默认就是 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.Male
gender = Gender.Female
console.log(gender) // 'Female'
gender = Gender.Woman // 报错
而如果不在 enum 里初始化，那么 Male 和 Female 的值就会以数值的方式显示。
enum Gender {
Male,
Female
}
let gender: Gender = Gender.Male
gender = 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(<string>n.split(''))
这里主观地认为 n 是一个字符串，但是声明的时候确是 any 类型。如果主观认为错了，会报错。
let n: any = 123
console.log(<string>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 函数，否则报错。
网友评论