ts学习笔记-interface

接口

• 可选属性

interface SquareConfig {
    
	color?: string;
	width?: number;
}
function createSquare(config: SquareConfig): {
     color: string, area: number } {
    
	// ...
}

• 额外的属性检查：跳过 interface 属性检测的方式

1. 类型断言
2. 添加字符串索引签名
3. 将对象赋值给另外一个变量

// 类型断言
let mySquare = createSquare({
    height:123, color:"red"} as SquareConfig)
// interface添加索引签名 ---->推荐
interface SquareConfig {
    
	color?: string;
	width?: number;
	[propName: string] : any;
}
// 将对象赋值给另外一个对象
let mySquareData = {
    height:123, color:"red"}
// 等同于 let mySquareData:any = {...}
let mySquare = createSquare(mySquare)

• 函数类型

  接口也可以定义函数类型->(参数列表):返回值类型,函数的参数名无需与接口里定义的名字相匹配,函数参数会自动推断类型

interface SerchFun {
    
	(name: string, title: string): boolean;
}
let mySearch: SerchFun = function (name: string, title: string): boolean {
    
	let result = source.search(subString);
	return result > -1;
};
const mySearchVal = mySearch('123', '123');

• 可引用数据类型

  引可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。引用数据类型的索引支持两种类型(string||number)，注意使用 number 的时候数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number 来索引时，JavaScript 会将它转换成 string 然后再去索引对象。 也就是说用 100（一个 number）去索引等同于使用"100"（一个 string）去索引，因此两者需要保持一致。

• 混合类型

  一个对象可以同时做为函数和对象使用，并带有额外的属性。

	interface Counter{
    
		(start: number): string;
		interval: number;
		reset(): void;
	}
	// <Counter>为类型断言
	function getCounter(): Counter{
    
		let counter = <Counter>function(start: number):string{
     };
		counter.interval = 123;
		counter.reset = function(){
    };
		return counter;
	}
	let c = getCounter();
	c(10)
	c.reset()
	c.interval = 5.0