基础

接口

定义了tom变量，类型为Person，那么tom的形状必须和接口Person一致(不能多也不能少）

interface Person {
    name: string;
  age: number;
}
let tom: Person = {
    name: 'Tom',
  age: 21
}

可选属性（?:）

可选属性的含义是该属性可以不存在

interface Person {
    name: string;
    age?: number;
}
let tom: Person = {
    name: 'Tom'
};        //合法

任意属性（[propName: string]）

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它类型的子集

例如下面这种情况是不允许的

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

age是number类型，但任意类型只有字符串类型，任意类型应该要包括age的类型，正确写法如下

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

只读属性（readonly)

有时候我们希望对象中一些字段只能在创建时被赋值，那么可以用readonly定义只读属性。

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
tom.id = 9527;    //× id设置了只读，不允许被赋值

数组类型

声明数组的方式如下所示

let fibonacci: number[] = [1, 2, 3, 4, 5]
let fib: Array<number> = [1, 2, 3]

函数的类型

函数声明

在JavaScript中声明函数的两种方式

function sum(x, y){
    return x+y
}

typescript中函数的声明

function sum(x: number, y: number): number {
    return x + y;
}

不难看出，在typescript中，不仅参数要声明类型，函数的返回值也要声明类型
**

函数表达式

js中

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

typescript中**

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

这段代码是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的mySum，是通过赋值操作进行类型推论而判断出来的。如果需要我们手动给mySum添加类型，则应该是这样

let mySum: (x: number, y: number) => number =  = function (x: number, y: number): number {
    return x + y;
};

这里的箭头函数和ES6中的箭头函数不同。在ts的类型定义中， => 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

可选参数

ts中使用？表示可选参数，可选参数一般需要放在末尾

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

因为可选参数后面不允许再出现必要参数了
**

参数默认值

ts中可以给函数的参数添加默认值，此时就不受「可选参数必须在必要参数后面」的限制了：

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

联合类型 和 类型断言

联合类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

// 我们只需要用中竖线来分割两个
let numberOrString: number | string 
// 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
numberOrString.length
numberOrString.toString()

断言

// 这里我们可以用 as 关键字，告诉typescript 编译器，你没法判断我的代码，但是我本人很清楚，这里我就把它看作是一个 string，你可以给他用 string 的方法。
function getLength(input: string | number): number {
  const str = input as string
  if (str.length) {
    return str.length
  } else {
    const number = input as number
    return number.toString().length
  }
}