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,赋值后xy再也不能被改变了

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赋值到一个普通数组不可以,但是可以使用类型断言重写 可以用来手动指定一个值的类型

相关文章

我最大的一个关于TypeScript的问题是,它将原型的所有方法(无...
我对React很新,我正在尝试理解子组件之间相互通信的简洁方法...
我有一个非常简单的表单,我将用户电子邮件存储在组件的状态,...
我发现接口非常有用,但由于内存问题我需要开始优化我的应用程...
我得到了一个json响应并将其存储在mongodb中,但是我不需要的...
我试图使用loadsh从以下数组中获取唯一类别,[{"listing...