11、Interface 接口

const getPersonName = (p: {name: string}) => {
  console.log(p.name)
}
const setPersonName = (p: {name: string}, name: string) => {
  p.name = name;
}
// 发现 p 的结构重复了
interface P {
  name: string
}
type P_1 = {
  name: string
}
const getPersonName = (p: P) => {
  console.log(p.name)
}
const setPersonName = (p: P, name: string) => {
  p.name = name;
}
// interface 和 type 区别
// 区别不大，主要是
type P_2 = string; // 而interface不可以直接等于基础类型
// TS 中建议，可以使用 interface 的地方就使用interface，实在不可以的时候再选择 type
// 如果需要 P 再有一个可有可无的 age
interface P {
  name: string,
  age?: number
}
// readonly
interface P {
  readonly name: string,
  age?: number
}

interface P {
  readonly name: string
}

const getPersonName = (p: P) => {
  console.log(p.name)
}

const p = {
  name: 'zwx',
  age: 26
}

getPersonName(p) //ok

getPersonName({
  name: 'zwx',
  age: 26 // 报错
})

/*
  当字面量传递的时候 是强校验
  反之，不是强校验
*/

interface P {
  readonly name: string;
  age: number;
  [propName: string]: any; // 除了name、age，其他的属性只要是满足 key:string = value:any
  say(): string; // 还要求必须有一个say方法，返回值是string
}

interface P {
  readonly name: string;
  [propName: string]: any;
  say(): string
}

class User implements P {
  name: 'zwx'
  say() {
    return 'hi'
  }
}

interface P {
  readonly name: string;
  [propName: string]: any;
  say(): string
}

interface T extends P {
  teach(word: string): string // 要求参数word，并且是 string 类型
}

• type 和 interface 相类似，但并不完全一致
• 接口只在编辑代码时的语法校验工具，并不会编译到 js 中