TypeScript快速了解_接口_03

TypeScript

接口

1.接口初探

function pr(labelledObj: { lable: string }) {
	console.log(labelledObj.lable)
}
let myObj = { size: 10, lable: 'size 10 object' };
pr(myObj)

使用接口描述来重现上面代码，使必须包含lable属性且类型为string

interface lableledvalue {
	lable: string
}
function pr( labelledObj: lableledvalue  ) {
	console.log(labelledObj.lable)
}
let myObj = {size: 10, label: "Size 10 Object"};
pr(myObj);

lableledvalue接口就像一个名字， 它代表有一个lable属性为string的对象，只要传入的对象满足上面lableledvalue提到的必要条件，那么就是可以被允许。

2.可选属性

interface SquareConfig {
  color?: string;
  width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}
let mySquare = createSquare({color: "black"});

可选属性的接口就是在属性名定义的后面加一个?符号,表示不传也可以

3.只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

设置属性命前用readonly来指定只读属性

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

也可以通过赋值一个对象字面量来构造一个Point，赋值后x和y再也不能被改变了

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

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

a = ro as number[];

上面代码最后一行使用ReadonlyArray赋值到一个普通数组不可以，但是可以使用类型断言重写 可以用来手动指定一个值的类型