ts入门学习笔记

基础

1. 原始数据类型

分为：boolean、number、string、void、undefined、null

// 布尔值
let isDone: boolean = false;

// 数值
let decLiteral: number = 6;

// 字符串
let myName: string = 'Tom';

// 空值
function alertName(): void {
    alert('My name is Tom');
}

// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;

2. 任意值

2.1 什么是任意值类型?

任意值（Any）用来表示允许赋值为任意类型。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

2.2 未声明类型的变量

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let something;
something = 'seven';
something = 7;
something.setName('Tom');

3. 类型推论

3.1 什么是类型推论?

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

// error:以下代码虽然没有指定类型，但是会在编译的时候报错：
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

// success
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

4. 联合类型

合类型（Union Types）表示取值可以为多种类型中的一种。

4.1 简单的例子

// 联合类型使用 | 分隔每个类型。
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

4.2 访问联合类型的属性或方法

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

// error: length 不是 string 和 number 的共有属性，所以会报错。
function getLength(something: string | number): number {
    return something.length;
}

// success
function getString(something: string | number): string {
    return something.toString();
}

5. 对象的类型——接口

5.1 什么是接口?

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

5.2 简单的例子

// 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。
interface Person {
    name: string;
    age: number;
}

//  success
let tom: Person = {
    name: 'Tom',
    age: 25
};

//error:定义的变量比接口少了一些属性是不允许的：
let tom: Person = {
    name: 'Tom'
};

// error:多一些属性也是不允许的：
let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

5.3 可选属性

// success:“？”代表可选属性，可选属性的含义是该属性可以不存在。
interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

5.4 任意属性

// success:使用 [propName: string] 定义了任意属性取 string 类型的值。
interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

// error
interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

5.5 只读属性

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

// 有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 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;

6. 数组的类型

6.1 创建方法

// 「类型 + 方括号」表示法
let fibonacci: number[] = [1, 1, 2, 3, 5];

// 数组泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

// 用接口表示数组
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

6.2 类数组

类数组（Array-like Object）不是数组类型，比如 arguments：

// error
function sum() {
    let args: number[] = arguments;
}
// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

// succuss
function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等

function sum() {
    let args: IArguments = arguments;
}

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

6.3 any 在数组中的应用

// 用 any 表示数组中允许出现任意类型：
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

7. 函数的类型

7.1 创建方法

// 函数声明
function sum(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let mySum = function (x: number, y: number): number {
    return x + y;
};

// 用接口定义函数的形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

7.2 可选参数

可选参数必须接在必需参数后面

// 用 ? 表示可选的参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom')

7.3 参数默认值

TypeScript 会将添加了默认值的参数识别为可选参数，不受可选参数必须接在必需参数后面的限制

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

7.4 剩余参数

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

7.5 重载