ts的学习历程 -- 02

ts的学习历程 – 02

ts接口

ts的核心原则之一是对该值所对应的数据类型进行一个检测

作用:为你规定的这些类型命名,【签订契约】

/**
 * 通过ts对函数的参数进行检测
 */
function lable(lable: {lable: string}){
  console.log(lable)
}

let lables = {
  lable: 'storing',
  mine: 1
}

lable(lables)

对参数lable进行检测,必须包括一个lable属性,并且值为string类型

使用接口进行描述

interface lableV {
  lable: string;
}
function lable(lable: lableV){
  console.log(lable)
}

let lables = {
  lable: 'storing',
  mine: 1
}

lable(lables)

lableV此接口就相当于一个名字,用来描述参数的要求【它代表了有一个label属性且类型为string的对象】

可选属性

接口里面的属性不全是必须的,根据页面需求,有些参数可传可不传:

interface lableV {
  lable?: string;
  mine?: number
}
function lable(lable: lableV){
  console.log(lable)
}

let lables = {
  lable: 'storing',
  mine: 1
}

lable(lables)

只读属性

一些对象属性只能在对象创建的时候进行创建的时候修改他的值,你可以使用readonly指定只读属性

interface lableV {
  readonly a?: string;
  readonly b?: number
}

let str: lableV = {
  a: '1',
  b: 1
}

str.a = 1  // 报错 。 Cannot assign to 'a' because it is a read-only property.ts(2540)

确保创建完以后不能再修改

typeScript具有ReadonlyArray类型,它与Array相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改:

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!         类型“readonly number[]”中的索引签名仅允许读取。ts(2542)
ro.push(5); // error!         类型“readonly number[]”上不存在属性“push”。ts(2339)
ro.length = 100; // error!    Cannot assign to 'length' because it is a read-only property.ts(2540)
a = ro; // error!             Type 'readonly number[]' is missing the following properties from type 'number[]': pop, push, reverse, shift, and 6 more.ts(2740)

    ||

  //使用类型断言重写
a = ro as number[];

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用const,若做为属性则使用readonly。

额外的属性检测

当我们在传参的过程中,对于某个属性,写错的时候,如下

interface lableV {
    lable?: string;
    mine?: number;
    maxs: number;
  }
  function lable(lable: lableV){
    console.log(lable)
  }

  let lables = {
    lable: 'storing',
    mine: 1,
    max: 20,
    min: 10,
    array: [1,2,3,5]
  }

  lable(lables)

  //类型“{ lable: string; mine: number; max: number; min: number; array: number[]; }”的参数不能赋给类型“lableV”的参数。
  //Property 'maxs' is missing in type '{ lable: string; mine: number; max: number; min: number; array: number[]; }' but required in type 'lableV'.ts(2345)
  //type.ts(50, 5): 'maxs' is declared here

在js中没什么问题,如果传递的参数在函数中没有使用到,则可以正确执行,但是在ts中会认为这段代码存在bug,最佳的解决方法如下

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

函数类型

接口也可以用来描述函数类型

interface SearchFunc {
    (source: string, subString: string): boolean;
}


let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

 //不能将类型“(source: string, subString: string) => string”分配给类型“SearchFunc”。
   //不能将类型“string”分配给类型“boolean”。ts(2322)

SearchFunc 该接口规定了函数的参数类型,以及该函数的返回值,如果与接口中定义的不匹配,则会出错

可索引类型

接口可以描述那些能够通过索引得到的类型,可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引值类型,索引签名支持两种类型:number 和 string,但是由于 number 实际上会被转化为 string 类型(根据对象 key 的性质),所以需要遵守:number 索引的返回值类型是 string 索引的返回值类型的子类型。

interface IPerson {
    [index: string]: string;
}
let me: IPerson = {love: 'TS'}
me.name = 'funlee';
me.age = 18; // error 不能将类型“18”分配给类型“string”。ts(2322)

如果 interface 里还声明了一个和索引签名索引返回值类型不匹配的属性,会报错

interface ITest {
    [index: string]: string;
    name: string;
    age: 18; // 报错,因为返回值类型是number,不符合string类型  [类型“18”的属性“age”不能赋给字符串索引类型“string”。ts(2411)]
 }

还可以声明一个 readonly 的索引签名

  interface IPerson {
    readonly [index: string]: string;
  }
  let p: IPerson = {name: 'funlee'};
  p.love = 'TS'; // error   类型“IPerson”中的索引签名仅允许读取。ts(2542)

类类型

typeScript也可以使用class来实现一个接口,只不过他描述得是类的公共部分,因此不会检查类是否具有某些私有成员

interface ISome {
  prop: string // 描述一个属性
  method(paramA: string, paramB: number) // 描述一个方法
}
class A implements ISome {
  prop: 'propValue'
  method(a: string, b: number) {
    // ...
  }
  constructor(paramA: number){
    // ...
  }
}

继承接口

和类一样,接口也可以互相继承

interface Shape {
  color: string;
}
interface Square extends Shape {
  sideLength: number;
}
const square = <Square>{};
square.color = 'blue';
square.sideLength = 10;

同时,一个接口也可以继承多个接口,创建出多个接口的合成接口,如:

interface Shape {
  color: string;
}
interface PenStroke {
  penWidth: number;
}
interface Square extends Shape, PenStroke {
  sideLength
}
const square = <Square>{};
square.color = 'blue';
square.sideLength = 10;
square.penWidth = 5.0;