Typescript入门__3__接口Typescript的核心原则是对值所具有的机构进行类型检查。类型检测不会去检查

1、介绍

Typescript的核心原则是对值所具有的机构进行类型检查。

接口的作用就是为了这些类型命名和为你的代码或第三方代码定义契约

2、接口初探

类型检测不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

interface  Person{  
  name:string,  
  age:number,
}
function addPeople(person:Person){}

3、可选属性

接口的属性不全都是必须的。有些只是在某些条件下存在，或者根本不存在。

可选属性在应用“options bags”模式是很常用，即给函数传入的参数对象

中只有部分属性赋值了。

interface Car{  
  brand?:string,  
  name:string
}
function createCar(car:Car):{brand:string;name:string}{  
  let newCar = {brand:'BMW',name:'宝马'};  
  if(car.brand){    
    newCar.brand = car.brand;  
  }  
  if(car.name){  
      newCar.name = car.name;  
  }   
 return newCar;
}
let myCar = createCar({name:"宝马"})

带可选属性的好处

1、是可以对存在的属性进行预定义；

2、可以捕获引用了不存在的属性是的错误

4、只读属性

一些对象属性只能在对象刚刚创建的时候修改其值

interface Point{  
 readonly x: number;  
  readonly y: number;
}
let p1:Point = {    x:1,y:2}
p1.x = 3;//error

readonly vs const

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

做为变量使用的话用 const，若做为属性则使用readonly。

5、额外的属性检查

对象字面量会被特殊对待而且会经过额外属性检查，当将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

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

function createSquare(config: SquareConfig): { color: string; area: number } {  
  // ...
}
let mySquare = createSquare({ colour: "red", width: 100 });
// error: 'colour' not expected in type 'SquareConfig'
// 可以带有任意数量的属性：
interface SquareConfig {  
  [propName: string]: any;
}

6、函数类型

接口能够描述javascript中对象拥有的各种各样的外形。除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使接口表示函数类型，我们需要给接口定义一个调用签名。他就像一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

interface SearchFunc {  
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {   }

对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配

7、可索引的类型

与使用接口描述的类型差不多，我们也可以描述那些“通过索引得到”的类型

interface StringArray { 
 [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0]

8、类类型

1、实现接口

TypeScript也能够用它来明确的强制一个类去符合某种契约。

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

2、类静态部分与实例部分的区别

9、继承接口

和类一样，接口也是可以相互继承。

单接口继承

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

10、混合类型

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

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

11、接口类继承

当接口继承一个类类型，他会继承类的成员但不包括其实现。

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 {}

Typescript入门__3__接口