初学TypeScript之接口定义

大家好，又见面了，我是你们的朋友全栈君。

TypeScript入门（2）

前面讲了如何使用TypeScript和TypeScript的数据类型有哪些，这一章就讲解TypeScript的接口。
如果不知道如何写TypeScript的朋友或者不知道TypeScript的数据类型有哪些的朋友可以转至 TypeScript的使用以及数据类型详解处观看。

接口：

简介：
TypeScript的核心原则是对值所具有的结构进行类型检查。在TypeScript里，接口的作用就是为这些类型命名和你的代码或第三方代码定义锲约。简单的来说就是每一次定义或者输出的时候都要定义类型。
小demo让你更加的了解TypeScript：

function test(labelObj: { 
    label: string }) { 
   
	console.log(labelObj);
}

let myObj = { 
    size: 10, label: 'size 10 Object'};
test(myObj);

类型检查器会查看test的调用。test有一个参数，并要求这个这个对象参数有一个名为label类型为string的属性。
改写上面的demo，让你更了解TypeScript的接口：

interface LabelValue { 
   
	label: string;
}

function test(labelObj: LabelValue) { 
   
	console.log(labelObj.label);
}

let myObj = { 
   size: 10, label: 'Size 10 Object'};
test(myObj);

labelValue接口就好比一个名字，用来描述上面例子里的要求。意思是与上面的例子意思一样的。不一样的是我们在这里并不能像在其他语言里一样，说传给test的对象实现了这个接口。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么就是被允许的。而且类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。
可选属性：
接口里的属性不全都是必须的。有些是只在某些条件下存在，或者根本不存在。可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。
下面是应用了“option bags”的demo：

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"});

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个“？”符号。
可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。比如，我们故意讲createSquare里的color属性名拼错，就会得到一个错误提示：

interface SquareConfig { 
   
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): { 
    color: string; area: number } { 
   
  let newSquare = { 
   color: "white", area: 100};
  if (config.clor) { 
   
    // Error: Property 'clor' does not exist on type 'SquareConfig'
    newSquare.color = config.clor;
  }
  if (config.width) { 
   
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({ 
   color: "black"});

只读属性：
一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用readonly来指定只读属性：

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

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

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

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

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

上面代码的最后一行，大家可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。但是你可以用 类型断言 重写：

a = ro as number[];

readonly VS const

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

额外的属性检查：

我们在第一个例子里面使用了接口，TypeScript让我们传入 { size: number; label: string; }到仅期望得到{label: string; }的函数里。我们已经学过了可选属性。并且知道他们在“option bags”模式里很有用。
然而，天真地将这俩者结合的话就会像在JavaScript里那样搬起石头砸自己的脚。比如，拿createSquare例子来说：

interface SquareConfig { 
   
	color?: string;
	width?: number;
}
function createSquare(config: SquereConfig): { 
    color: string; area: number } { 
   
	//...
}
let mySquare = createSquare({ 
    colour: "red", width: 100});

注意传入createSquare的参数拼写为colour而不是color。在JavaScript里，这会默默地失败。
你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。
然而，TypeScript会认为这段代码可能存在bug。对象字面量会被特殊对待而且会经过额外属性检查，当将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

//error: 'colour' not expected in type 'SquareConfig'
let mySquare = createSquare({ 
    colour: 'red', width: 100 });

绕开这些检查非常简单。最简单的方法是使用类型断言：

let mySquare = createSquare({ 
    width: 100, opacity: 0.5} as SquareConfig);

然而最佳的方式是能够添加一个字符串索引签名，前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。如果SquareConfig带有上面定义的类型的color和width属性，并且还会带有任意数量的其他属性，那么我们可以这么定义它：

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

待会会讲索引签名，但在这我们要表示的是SquareConfig可以有任意数量的属性，并且只要它们不是color和width，那么就无所谓它们的类型是什么。

还有一种跳过这些检查的方式，这可能会让你感到惊讶，它就是将这个对象赋值给另一个变量：因为squareOptions不会经过额外的属性检查，所以编译器不会报错。

let squareOptions = { 
    colour: "red", width: 100};
let mySquare = createSquare(squareOptions);

要留意，在像上面一样简单代码里，你可能不应该去绕开这些检查。对于包含方法和内部状态的复杂对象字面量来讲，你可能需要使用这些技巧，但是大部额外属性检查错误是真正的bug。就是说你遇到了额外类型检查出的错误，比如“option bags”，你应该去审查一下你的类型声明。在这里，如果支持传入 color或colour属性到createSquare，你应该修改SquareConfig定义来体现出这一点。
函数类型：
接口能够描述JavaScript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。
为了使接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要有名字和类型。

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

这样定义后，我们可以像使用其他接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。

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

对于函数类型的检查来说，函数的参数名不需要与接口里定义的名字相匹配。比如，我们使用下面的代码重写上面的例子：

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

函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。如果你不想指定类型，TypeScript的类型系统会推断出参数类型，因为函数之间赋值给了SearchFunc类型变量。函数的返回值类型是通过其返回值推断出来的（此例是false和true）。如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与SearchFunc接口中的定义不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) { 
   
	let result = src.search(sub);
	return result > -1;
}

可索引的类型：
与使用接口描述函数类型差不多，我们定义了StringArray接口，它具有索引签名。这个索引签名表示了当用number去索引StringArray时会得到string类型的返回值。
TypeScript支持俩种索引签名：字符串和数字。可以同时使用俩种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。这是因为当使用number来索引时，JavaScript会将它转换成string然后再去索引对象。也就是说用100（一个number）去索引等同于使用“100”（一个string）去索引，因此俩者需要保持一致。

class Animal { 
   
	name: string;
}
class Dog extends Animal { 
   
	breed: string;
}

//错误：使用数字型的字符串索引，有时会得到完全不同的Animal!
interface NotOkay { 
   
	[x: number]: Animal;
	[x: string]: Dog;
}

字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型想匹配。因为字符串索引声名了obj.property和obj[“property”]俩种形式都可以。下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示:

interface NumberDictionary { 
   
	[index: string]: number;
	length: number;		//可以，length是number类型
	name: string;		//错误，'name'的类型与索引类型返回值的类型不匹配
}

最后，你可以将索引签名设置为只读，这样就防止了给索引赋值：

interface ReadonlyStringArray { 
   
	readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice","Bob"];
myArray[2] = "Mallory";		//error!

你不能设置myArray[2]，因为索引签名是只读的。

类类型：
实现接口：
与C#或java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface { 
   
	currentTime: Date;
}

class Clock implements ClockInterface { 
   
	currentTime: Date;
	constructor(h: number, m: number) { 
   }
}

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

interface ClockInterface { 
   
	currentTime: Date;
	setTime(d: Date);
}

class Clock implements ClockInterface { 
   
	currentTime: Date;
	setTime(d: Date) { 
   
		this.currentTime = d;
	}
	constructor(h: number, m: number) { 
   }
}

接口描述了类的公共部分，而不是公共和私有俩部分。它不会帮你检查类是否具有某些私有成员。
类静态部分与实例部分的区别：
当你操作类和接口的时候，你要知道类是具有俩个类型的：静态部分的类型和实例的类型。你会注意到，当你用构造器签名去定义一个接口并视图定义一个类去实现这个接口时会得到一个错误：

interface ClockConstructor { 
   
	new (hour: number, minute: number);
}
class Clock implements ClockConstructor { 
   
	currentTime: Date;
	constructor(h: number, m: number) { 
   }
}

这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。constructor存在于类的静态部分，所以不在检查的范围内。
因此，我们应该直接操作类的静态部分。看下面的demo，我们定义了俩个接口，ClockConstructor为构造函数所用和ClockInterface为实例方法所用。为了方便我们定义一个构造函数createClock，它用传入的类型创建实例。

interface ClockConstructor { 
   
	new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface { 
   
	tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface { 
   
	return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface { 
   
	constructor(h: number, m: number) { 
   }
	tick() { 
   
		console.log('beep beep');
	}
}

class AnalogClock implements ClockInterface { 
   
	constructor(h: number, m: number) { 
   }
	tick() { 
   
		console.log('tick tock');
	}
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

因为createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数签名。
继承接口：
和类一样，接口也可以相互继承。这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

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

一个接口可以继承多个接口，创建出多个接口的合成接口。

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

混合类型：
先前我们提过，接口能够描述JavaScript里丰富的类型。因为JavaScript其动态灵活的特点，有时你会希望一个对象可以同时具有上面提到的多种类型。
一个例子就是，一个对象可以同时做为函数和对象使用，并带有额外的属性。

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

在使用JavaScript第三方库的时候，你可能需要像上面那样去完整地定义类型。
接口继承类：
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。就好像接口声名了所有类中存在的成员，但并没有提供具体实现一样。接口同样会继承到类的private和protected成员。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现(implement)。
当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。这个子类除了继承至基类外与基类没有任何关系。例：

class Control { 
   
	private state: any;
}
interface SelectableControl extends Control { 
   
	select(): void;
}
class Button extends Control implements SelectableControl { 
   
	select(){ 
   }
}
class TextBox extends Control { 
   
	select() { 
   }
}
//错误：“Image”类型确实“state”属性。
class Image implements SelectableControl { 
   
	select() { 
   }
}
class Location { 
   

}

在上面的例子里，SelectableControl包含了Control的所有成员，包括私有成员state。因为state是私有成员，所以只能够是Control的子类们才能实现SelectableControl接口。因为只有Control的子类才能够拥有一个声名于Control的私有成员state，这对私有成员的兼容性是必需的。
在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。实际上，SelectableControl接口和拥有select方法的Control类是一样的。Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。
下一章节我们来介绍类的概念。学习TypeScript之类的概念

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/132863.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...