TypeScript 之 接口 基本类型 类 函数

2019-09-26  本文已影响0人  _一九九一_

本文关键字:

interface
as
type
public
private
protected
readonly
static
implements

接口定义对象 变量 数组等

interface List {
  readonly id:number; // 只读  属性
  name:string,
  [x:string]:any,   // 用任意的字符串去索引List,可以得到任意的结果
  age?:number,    // 可选属性
}

interface Result {
  data:List[]
}

function render(result: Result){
  result:data.forEach(value => {
    console.log(value.id,value.name)
  })
}
// 后端接口返回
let result = {
  data:[
    {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
    {id:3,name:'B'}
  ]
}

render(result);

类型断言

// 方式1:
render({
  data:[
    {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
    {id:3,name:'B'}
  ]
} as Result)

// 方式2:
render(<Result>{
  data:[
    {id:2,name:'A',sex:'man'}, // sex:不可控字段 莫名其妙传来
    {id:3,name:'B'}
  ]
})

不确定一个接口有多少属性的时候,使用可索引接口

interface StringArray {
  [index: number]: string   // 用任意的数字去索引StringArray 都会得到一个string 声明了一个字符串类型的数组
}

let chars: StringArray = ['A','B'];
interface Names {
  [index: string]: string,   // 用任意的字符串去索引Names 都会得到一个string 声明了一个字符串类型的数组
  [z: number]: string,      // 用数字去索引Names  兼容number的类型
  [z: number]: any,        // 用数字去索引Names  兼容number的类型
  // y: number,           // 报错
}

let chars: Names = ['A','B'];

接口定义函数


 // 方式一:
  let add: (x: number, y: number) => number;

  // 方式二:
  interface Add {
    (x: number, y: number) : number
  }

  // 方式三: 类型别名
  type Add = (x: number, y: numner) => number

  // 方式四:
  let add: Add = (a,b) => a+b

  function (x: number, y: number) {
    return x + y;
  }

  // 混合定义接口
  interface Lib {
    (): void;
    version: string;
    doSomething: void;
  }

  // 可选参数必须位于必选参数之后
  function (x: number, y?: number) { 
    return y? x + y : x ;
  }

成员修饰符

class Dog{
  constructor(name: string){
    this.name = name
  }
  public name: string = 'dog'
  private pro(){}
  protected pro(){}
  readonly leg: number = 4  // 只读属性一定要被初始化
  static food: string = 'bones'
}

抽象类 只能被继承 无法实例化

 abstract class Animal{
   eat(){
     console.log('eat')
   }
 }
 class Dog extend Animal{
   constructor(name: string){
     super(name)
     this.name = name
   }
   name: string
   run(){}
 }

类与接口的关系

interface Human{
  name: string,
  eat(): void
}

//类与接口继承
class Asiam implements Human {
  constructor(name: string){
    this.name = name
  }
  name: string
  // private name: string   报错
  eat(){}
  sleep(){}
}

//接口继承接口
interface Man extends Human{
  run(): void
}

interface Child{
  cry(): void 
}

//接口继承接口
interface Boy extends Man,Child{}

let boy: Boy = {
  name:'',
  run(),
  eat(),
  cry()
}
class Auto {
  state = 1
}
// 接口继承类
interface AutoInterface extends Auto {

}

// 接口只能约束类的共有成员
class C implements AutoInterface{
  state = 1
}

// Auto的子类 不必实现state属性 继承类state属性   实现AutoInterface接口 
class Bus extends Auto implements AutoInterface{

}
上一篇 下一篇

猜你喜欢

热点阅读