TypeScript interface接口

const getPersonName = person => {
　　console.log(person.name);
}

const setPersonName = (person, name) => {
　　person.name = name;
}

/**
* 这是没用 ts 语法，这样会有问题，比如 person 是 undefined
* 那么整个语句就会报错了
* 所以为了避免错误，person 一定要有 name 这个属性的话，该怎么做
* 给 person 加一个类型注解
*/

const getPersonName1 = (person: {name: string}) => {
　　console.log(person.name);
}

const setPersonName1 = (person: {name: string}, name: string) => {
　　person.name = name;
}

/**
* 这个时候，person 都是一样的类型，里面都包含 name，
* 这个参数在 getPersonName1 写了一遍，又在 setPersonName1 写了一遍
* 其实这个写一次就成了，就可以用 interface
*/

interface Person{
　　name: string
}
const getPersonName2 = (person: Person) => {
　　console.log(person.name);
}

const setPersonName2 = (person: Person, name: string) => {
　　person.name = name;
}

/**
* 所以通用型的集合可以用 interface 表示出来
* 之前还用过 type
*/

type Person1 = {
　　name: string
}
const getPersonName3 = (person: Person1) => {
　　console.log(person.name);
}

const setPersonName3 = (person: Person1, name: string) => {
　　person.name = name;
}

/**
* 这样写好像也没有问题，那么 interface 和 type 有什么区别呢？
* 区别不大，但是还是有区别的
*
* 比如 type Person1 = string
* type 中的变量可以直接代表基础类型，interface 不行，它只能代表个对象或者函数
* 所以类型别名和接口还是有区别的。但是通用型的规范是用接口表示，实在不行才用类型别名
*/

interface Person2 {
　　// readonly name: string, // 表示这个属性只读，不允许后续有修改 name 的操作
　　name: string,
　　age?: number // 表示这个属性可有可毋
}
const getPersonName4 = (person: Person2): void => {
　　console.log(person.name);
}

const setPersonName4 = (person: Person2, name: string) => {
　　person.name = name;
}
const person = {
　　name: 'zina',
　　sex: 'girl' // 这里允许传递其他属性，interface 里面是必须有的属性
}
getPersonName4(person);
getPersonName4({
　　name: 'zina',
　　sex: 'girl'
})
/**
* 当以字面量的形式传递会报错，而以 person 变量的形式不会报错
* 当以字面量传递的时候，这个时候 ts 会对这种方式进行强校验
* 也就是这里面只能有name,age是选填的，如果不一样就会提示错误
* 当把这个变量缓存一下，就不会强校验，只要有 interface 里面的东西
* 再多出点东西也没有关系
*
* 如果说我确实是需要传递其他参数，而且就想用字面量的形式，这个时候可以给接口加上限制
*/
interface Person2 {
　　name: string,
　　age?: number // 表示这个属性可有可无
　　[propName: string]: any
}
getPersonName4({
　　name: 'zina',
　　sex: 'girl'
})
// 这个时候就不会报错了

interface Person3 {
　　name: string,
　　age?: number // 表示这个属性可有可无
　　[propName: string]: any, // 允许传递其他属性
　　say(): string // 要求这里面有个 say 方法，返回值一定要是 string 类型
}
// 这时候类去应用这个接口，就必须有 name 和 say， 不然会报错
class User implements Person3{
　　name = 'zina'
　　say() {
　　　　return 'hi'
　　}
}

// 接口可以互相继承
interface Teacher extends Person3{
　　teach(): string
}

// 接口以函数的方式定义
interface SayHi {
　　(word: string): string
}
// 这个函数必须接收一个 string 类型的参数，同时返回值也是 string 类型
const say:SayHi = () => {
　　return 'hi'
}

 

总结：

1、interface 和 type 相类似，但不完全一致

2、interface 里面有这些方式

interface Person3 {
　　name: string,
　　readonly shortName: string, // 表示这个属性只读，不允许后续有修改 name 的操作
　　age?: number // 表示这个属性可有可无
　　[propName: string]: any, // 允许传递其他属性
　　say(): string // 要求这里面有个 say 方法，返回值一定要是 string 类型
}

3、接口可以继承

interface Teacher extends Person3{
　　teach(): string
}

4、接口除了以对象形式定义，还能以函数形式定义

interface SayHi {
　　(word: string): string
}
// 这个函数必须接收一个 string 类型的参数，同时返回值也是 string 类型
const say:SayHi = () => {
　　return 'hi'
}

5、一个类应用接口，语法是 implements

class User implements Person3{}