ts接口使用

1、基本使用

点击查看代码

//定义好接口
interface User {
  name: string
  //User的可选属性
  age?: number
  //User的只读属性
  readonly isMale: boolean
};

const getUserName = (user: User) => user.name
//接口的只读属性不能被赋值，只能读取值
//User.isMale = true; //error

注意：接口不会去检查属性的顺序，只要相应的属性存在并且类型兼容即可。

2、函数类型

点击查看代码

//定义好接口
interface User {
  name: string
  //函数类型的属性：
  //定义函数类型的参数，write函数要求传参words是字符串类型，返回值是字符串类型
  write: (words:string) => string
};

3、属性检查

点击查看代码

// 定义接口
interface regular {
  // 可选属性
  member?: number
  // error解决方式一：添加字符串索引签名
  //表示这个函数在接收参数的时候可能会有额外参数接收，所以用来存储额外参数，防止额外参数传入报错
  // propName是属姓名，string是定义属性名的类型，any是属性值的类型
  // [propName: string]: any,
};

function test(params: regular) {
  const { label } = params;
  let newObj = { label: '', member: 2 };
  if (params.member) {
    newObj.member = params.member;
  }
}

// 传参时，参数属性的顺序不会被属性类型检查器检查
// test({ memebr: 3 }); //error
// error解决方式二：类型断言
//test({memebr: 3} as regular);
//error解决方式三：any类型接收
//先使用变量接收参数，再进行传参，因为ts不会对普通的对象进行属性检查
//let para = { memebr: 2 };
//test(para);

注意：开发中一般会报这样的错误，大多是因为传参的属性名拼错了，所以最好不使用第一种方式，第三种方式相当于是any类型的，万不得已也不要使用

4、可索引类型

情况：小张和小名的个人信息都有很多相似之处，都是由字符串类型的属性名和字符串类型的属性值组成，但是数量又不等此时可以使用索引类型

点击查看代码

//小张的信息
{
    name: 'xiaozhang',
    privateInfo: {
        NetEase: 'xiaozhang@163.com',
        qq: '1845751425@qq.com',
    }
}

//小名的信息
{
    name: 'xiaoming',
    privateInfo: {
        NetEase: 'xiaoming@163.com',
        qq: '784536325@qq.com',
        sina: 'abc784536325@sina.com',
    }
}

//使用索引类型对属性进行合并
interface User {
    name: string
    privateInfo: {
		[name:string]:string
	}
}

5、继承接口

情况：设立vip用户，除了具有普通用户的属性，还有一些额外的特权属性，此时可用继承的方式，继承普通用户的属性，然后额外添加新的特权属性

点击查看代码

// 继承接口
interface User {
  name: string
}
interface Info {
  age: number
}
//使用继承给vip特权用户添加一个broadcast方法
interface VIPUser extends User {
  broadcast: () => void;
}
// 还可以继承多个接口
interface Vip extends Info, VIPUser {
  more: () => void;
}