TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约
接口初探
下面通过一个简单的示例来观察接口如何工作的:
类型检查器会查看printBabel的调用。printLabel 有一个参数，并要求这个对象参数有一个名为label类型为string的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必须得属性是否存在，并且类型是否匹配。然而，有时候ts却并不会这么宽松,我们下面会稍作讲解。
function printLable(params:{label:string}) {
console.log(params.label);
}
const myObj={size:10,label:'Size 10 Object'}
printLable(myObj);
用接口描述对象
下面我们重新写上面的例子，这次使用接口来描述：必须包含一个label属性且类型为string
interface LabelleadValue{
label:string
}
function printLableOne(params : LabelleadValue) {
console.log('xin',params.label);
}
printLableOne(myObj)
LabelledValue接口就好比一个名字,用来描述上面例子的要求。它代表了有一个label属性 且类型为string的一些。需要注意的是，我们在这里并不能像在其他语言一样，说传给printLable的对象实现这个接口 。我们只会去关注值的外形。只要传入的对象满足上面提到的必要条件，那么它就是被允许的。 还有一点值得提的是，类型检察器不会去检查属性的顺序，只要对应的数下存在并且类型也是对的就可以。
可选属性
接口里的数下不全是必须得，有些事只在某些条件爱存在，或者根本不存在。可选属性在应用‘option bags’模式时很常用，即给函数传入的参数对象中部分属性赋值了
下面是应用了‘option bags’的例子带有可选属性的接口与普通的接口定义差不多，之色在可选属性名字定义的后面加一个？符号可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。未定义的属性可以 [propName:string]: any;
interface SquareConfig{
color?:string;
width?:number;
[propName: string]: any;
}
function createSquare(params:SquareConfig):{color:string;area:number} {
const newSquare = {color:'white',area:100}
if(params.color){
newSquare.color = params.color
//Error:
Property 'clor' does not exist on type 'SquareConfig'
//newSquare.color
= params.colr
}
if(params.width){
newSquare.area = params.width * params.width
}
return newSquare;
}
const mySquare = createSquare({color:'black'});
只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。你可以在属性名前用 readonly来指定只读属性
ineterface Point{
readonly x:number;
readonly y:number;
}
let p1: Point = { x: 10, y: 20};
p1.x = 5; // 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=100;//error
a=ro//error
函数类型接口
接口能够描述JavaScript 中对象拥有的各种各样的外形。除了描述带有属性的普通对象外， 接口也可以描述函数类型。 为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只要参数列表和返回值类型的函数定义。参数列表里每个参数都需要名字和类型。
interface SearchFunc{
(source:string,subString:string): boolean
}
这样定义后，我们可以像使用其他接口一样使用这个函数类型的接口。下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量
let mySearch:SearchFunc;
mySearch = function(src:string,sub:string):boolean{
let result = src.search(sub)
return result > -1
}
函数的参数会逐个进行检查，要求对应位置上的参数类型是兼容的。如果你不想指定类型，ts类型系统会推断出参数类型，因为函数直接赋值给了SearchFunc类型变量。函数的返回值是推断出来的（此例是false和true）.如果让这个函数返回数字或字符串，类型检察器会警告我们函数的返回值类型和SearchFunc接口中的定义不匹配
let mySearch:SearchFunc;
mySearch = function() {
let result = src.search(sub)
return result > -1
}
可索引的类型
与使用接口描述函数类型差不多，我们也可以描述那些能够‘通过索引得到’的类型，比如a[10]或ageMap['daniel']。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型
eg:我们定义了StringArray接口，它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。
interface StringArray{
[index:number]:string
}
let myArray:StringArray
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
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;
}
类类型
实现接口
与C#和Java里接口的基本作用一样，ts也能够用它来明确的强制一个类去符合某种契约。
你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：
接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。
interface ClockInterface{
currentTime:Date;
setTime(d: Date);
}
class Clock implements ClockInterface{
currentTime:Date;
setTime(d: Date);
constructor(h: number, m: number) { }
}
类静态部分与实力部分的区别
当你操作类和接口的时候，你要指定类具有两个类型的：静态部分的类型和实例的类型。你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误这里因为当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。
interface ClockConstructor{
new (hour: number, minute: number);
}
class Clock implements ClockConstructor{
currentTime: Date;
constructor(h: number, m: number) { }
}
所以我们要定义实例的接口，也要定义构造函数的接口
我们定义了两个接口，ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock，它用传入的类型创建实例。
定义构造函数接口
interface ClockConstructor{
new (hour:number,minute:number) : ClockInterface
}
构造实例的接口
interface ClockInterface{
tick();
}
implements 描述的是实例
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);
继承接口
和类一样，接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。
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;
接口继承类
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的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类并不是这样的。
网友评论