Typescript 学习笔记 ：day 2

接口声明

// interface 声明
interface LabelledValue {
  label: string;
}

// interface 能判断一个对象是否只包含指定的属性
let myObj: LabelledValue = {label: "Size 10 Object"}; // OK
let myObj: LabelledValue = {label: "Size 10 Object", size: 10}; // error
let myObj: LabelledValue = {}; // error

// OK
function printLabel(labelledObj: { label: string }) {}
let myObj = { size: 10, label: "Size 10 Object" };

// error
function printLabel(labelledObj: LabelledValue) {}
let myObj = { size: 10, label: "Size 10 Object" };

可选属性

// 接口可以添加可选属性，表示该属性不是必须存在的
interface LabelledValue {
  label?: string;
}
let myObj: LabelledValue = {label: "Size 10 Object"}; // OK
let myObj: LabelledValue = {}; // OK

只读属性

// 接口可以添加只读属性，表示该属性必须声明时赋值且之后不了修改该属性值
interface LabelledValue {
  readonly label: string;
}
let myObj: LabelledValue = {label: "old value"}; // OK
myObj.label = 'new value' // 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!

任意属性

interface SquareConfig {
    [propName: string]: any;
}
let squareOptions: SquareConfig  = { width: 100 }; // OK
let squareOptions: SquareConfig  = { width: 100, height: 200 }; // OK

// propName 的类型还可以为 number，这表示 属性名必须由数字组成
interface SquareConfig {
    [propName: number]: any;
}
let squareOptions: SquareConfig  = { 100: 'value'}; // OK
let squareOptions: SquareConfig  = { key: 'value'}; // error

函数类型

// 除了描述带有属性的普通对象外，接口也可以描述函数类型。
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;
}
// 如上会逐个进行检查，要求对应位置上的参数类型是兼容的
// (source: string, subString: string): boolean =》 (src: string, sub: string): boolean

可索引的类型

interface StringArray {
  [index: number]: string;
}
let myArray: StringArray = ["Bob", "Fred"];
let myStr: string = myArray[0]; // Bob
let myStr: string = myArray[1]; // Fred
// 与任意属性一致，暂时不明白两者之间的区别

类类型

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

继承接口

// 一个接口可以继承多个接口，创建出多个接口的合成接口。
interface Shape {
	color: string;
}
interface Square extends Shape {
	sideLength: number;
}
let square: Square = {color: 'Red', sideLength: 0}

混合类型

// 一个对象可以同时做为函数和对象使用，并带有额外的属性。
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}
let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };

接口继承类

// 当接口继承了一个类类型时，它会继承类的成员但不包括其实现
class Control {
    private state: any;
}
interface SelectableControl extends Control {
    select(): void;
}
class Button extends Control implements SelectableControl {
    select() { }
}
class TextBox extends Control {
    select() { }
}