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