了解接口 — interface

  1. 1. 使用在变量前声明'interface'
  2. 2. 简单案例:
  3. 声明一个interface,接口一般首字母大写:
  4. interface Person {
  5. name: string;
  6. age: number;
  7. }
  8. 然后就可以使用这个interface来限制一个对象的类型:
  9. let tom: Person = {
  10. name: 'Tom',
  11. age: 12
  12. }
  13. 3. 注意:不允许添加接口未定义的属性
  • 定义最基本的信息名字和性别,实现时必须按照这个规范来创建
  1. interface Baseinfo {
  2. name:string,
  3. sex:string
  4. }
  5. function pesonInfo(parmasinfo: Baseinfo) {
  6. console.log(`姓名:${parmasinfo.name }性别:${parmasinfo.sex}`)
  7. }
  8. let paramsinfo = {name:'Tom',age:12, sex:'男'}
  9. pesonInfo(paramsinfo) // 姓名:Tom性别:男

可选类型 — 用’?’号修饰

  1. 有时我们希望不要完全匹配一个接口,那么可以用可选属性,'TS' 提供了
  2. 一种'?' 来修饰,被问号修饰的参数就是可以选传,不是必须参数
  1. interface Baseinfo {
  2. name:string,
  3. sex?:string
  4. }
  5. function printPesonInfo(parmasinfo: Baseinfo) {
  6. console.log(`姓名:${parmasinfo.name }`)
  7. }
  8. let paramsinfo = {name:'Tom'}
  9. printPesonInfo(paramsinfo) // 姓名:Tom

索引签名 — 任意属性

  1. 1.刚才的'可选类型 '?'号修饰'让我们可以选填一些参数,那么如果需要增加一些不确定参数就
  2. 需要使用 '索引签名'(任意属性)
  3. 2.需要注意的是:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
  • 案例一
  1. interface Baseinfo {
  2. name:string,
  3. sex?:string,
  4. [other:string]:any
  5. }
  6. function printPesonInfo(parmasinfo: Baseinfo) {
  7. console.log(`姓名:${parmasinfo.name }`)
  8. }
  9. // 接口中的索引签名other 就会收到age
  10. printPesonInfo( {name:'Tom',age:13})
  • 案例二的错误示范
  1. // 错误示范
  2. interface Person {
  3. name: string;
  4. age?: number;
  5. [propName: string]: string;
  6. }
  7. let tom: Person = {
  8. name: 'Tom',
  9. age: 25,
  10. gender: 'male'
  11. };
  12. // 任意属性的值允许是 string类型,但是可选属性 age 的值却是 number,
  13. // number 不是 string 的子属性,所以报错了

限制接口中的参数是只读 — readonly

  1. readonly const 都是只读,但两者如何用区别在哪里,首先'readonly ''TS' 在接口提出,
  2. 只针对接口中的参数赋值后就禁止更改,而const es6 提出的针对变量,不让变量进行更改
  • 简单例子
  1. interface Person{
  2. readonly x: number;
  3. readonly y: number;
  4. }
  5. // tom 是接口Person类型
  6. let tom: Point = { x: 10, y: 20 };
  7. tom.x = 5; // error! 已经设置了readonly 属性所以禁止更改

接口 数组 和只读

  1. 我们还可以利用接口定义数组位置的类型,和元组不同,元组不仅限制了类型也
  2. 限制了最开始赋值时候的长度,所以元组可以利用在一些简单点的数组,对于一
  3. 些复杂的数组可以用接口定义相对灵活一些
  • 简单例子
  1. interface IArguments {
  2. [index: number]: any;
  3. length: number;
  4. callee: Function;
  5. }
  6. let args: IArguments = [{
  7. index: 1,
  8. length: 5,
  9. callee: function (){}
  10. }]
  • 接口 数组,只读
  1. // 定义了一个数组接口,数组第一位必须数字并且只读,第二位是字符串
  2. interface IArguments {
  3. readonly 0:number,
  4. 1:string
  5. }
  6. let arr: IArguments = [1,"w"]
  7. arr[0] = 5 // erro 只读类型禁止改变

接口定义函数

  1. 接口不止能定义变量值也可以定义函数
  1. // 定义了一个信息接口,里面有姓名,年龄和一个吃的方法返回的类型是string类型
  2. interface BaseInfo{
  3. name:string,
  4. age:number,
  5. eat(food: string):string
  6. }
  7. const personInfo:BaseInfo = {
  8. name:'wang',
  9. age:99,
  10. eat(parmas){
  11. return parmas
  12. }
  13. }
  • 只定义 方法的接口
  1. 对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配
  2. 函数的参数会逐个进行检查,要求对应位置上的参数类型是相同的
  1. interface SearchFunc {
  2. (source: string, subString: string): boolean;
  3. }
  4. let mySearch: SearchFunc;
  5. mySearch = function(src: string, sub: string): boolean {
  6. let result = src.search(sub);
  7. return result > -1;
  8. }

TypeScript -- interface 接口 - 图1