TypeScript学习笔记1

基础类型

布尔值
数字 支持二进制，八进制，十进制，十六进制
字符串
数组
两种定义方式：
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
元组Tuple 元组与数组类似，但每一项数据类型可不同（数组需要使用any类型）
枚举 为一组数值赋予友好的名字
Any 声明为 any 的变量可以赋予任意类型的值
Void 表示没有任何类型，当一个函数没有返回值时，就可以使用void
null 表示对象值缺失
undefined 用于初始化变量为一个为定义的值
never表示的是那些永不存在的值的类型

类型断言

可以用来手动指定一个值的类型
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

使用形式：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

注意： TypeScript里使用JSX时，只有 as语法断言是被允许的。

变量声明

使用let 声明变量
使用const声明常量
详情请看我另一篇博客：js中的const,var,let

解构

JS解构和 … 运算符

属性重命名

let { a: newName1, b: newName2 } = o;

等价于

let newName1 = o.a;
let newName2 = o.b;

接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

接口定义实例：

interface LabelledValue {
  label: string;
  color?: string;  // 可选属性，带？符号，表示不是必须的
  readonly x: number; // 只读属性，用readonly指定
}

`readonly` vs `const`

两者都表示只读，不可修改

变量使用const
属性使用readonly

注意：
TypeScript具有ReadonlyArray<T>类型，它与Array<T>相似。
不同的是，数组创建后不能修改。

额外的属性检查

额外的属性检查只会应用于对象字面量场景
如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

实例代码：

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

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

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

上述代码，向createSquare传入了一个对象字面量，就会对这个对象字面量进行检查，发现目标类型里不包含colour这个属性，就会报错。

解决方法：
一：使用类型断言

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

二：添加一个字符串索引签名（最佳）
如果 SquareConfig带有上面定义的类型的color和width属性，并且还会带有任意数量的其它属性，那么我们可以这样定义它：

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any; // 表示可以有任意数量和类型的属性
}

三：将对象赋值给一个变量，再传入，跳过属性检查

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

函数类型

接口也可以用来描述函数类型

函数类型接口示例代码：

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

使用方式：
创建一个函数类型的变量，就可以向这个变量赋值一个同类型的函数。
函数的参数名不需要与接口定义的名字匹配
如果没有指定类型，typescript类型系统会推断出参数类型，返回值类型则通过返回值推断出。

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

可索引的类型

TypeScript支持两种索引类型：字符串和数字。
可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。

索引也可以设置为只读：

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

类类型

代码示例：该接口描述了类的公共部分，它不会帮你检查类是否具有某些私有成员。

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

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

类静态部分与实例部分的区别
当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。

继承接口

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

混合类型

一个对象可以同时具备多种类型

接口继承类

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