Typescript学习笔记--基础篇

1. 原始数据类型

JavaScript 的类型分为两种：原始数据类型(Primitive data types)和对象类型(Object types)。

原始数据类型包括：布尔值、数值、字符串、null、undefined 和 Symbol。

1.1 布尔值

let isDone: boolean = false;

let createdByNewBoolean: Boolean = new Boolean(1) // 返回的是 Boolean 对象

let createdByBoolean: boolean = Boolean(1); // 返回 boolean 类型

注意：new Boolean() 返回的是一个 Boolean 对象。

1.2 数值

let num: number = 100;

1.3 字符串

let username: string = 'jack';

let sentence: string = Hello, my name is ${username}; //使用 `

1.4 空值

JavaScript没有空值（void）的概念，在TypeScript中，可以用 void 表示没有任何返回值的函数。

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null。

void 一般常用于函数没有返回值的情况。

function alertName(): void
{
    alert('...');
}

let unusable: void = undefined;

1.5 Null 和 Undefined

在TypeScript中，可以使用 null 和 undefined 来定义这两个原始数据类型：

// undefined 类型只能被赋值为 undefined
// null 类型只能被赋值为 null
let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说，undefined 类型的变量可以赋值给 number 类型的变量；而 void 类型的变量不能赋值给 number 类型的值。

2. 任意值

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

如果是普通类型，在赋值过程中改变类型是不允许的。any 类型，则允许被赋值为任意类型，何时都可以。

声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

• 定义未赋值，则返回 undefined
• 可以修改为其他类型的值，其变量类型也会相应的改变

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

3. 类型推论

如果定义的时候，已赋值但没有明确的指定类型，那么 TypeScript 会依照类型推论的规则推断出一个类型。

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

4. 联合类型

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

使用 | 分隔每个类型。

let my: string | number;

每种类型都有自己特定的一些属性或者方法。当TypeScript不确定一个联合类型的变量到底是哪个类型的时候，只能访问此联合类型的所有类型里的共有的方法或属性。否则会报错。

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型。

5. 对象的类型————接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

5.1 什么是接口

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

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

接口一般首字母大写。有的编程语言会建议接口的名称加上 I 前缀。

赋值的时候，变量的形状必须和接口的形状保持一致。多一些或少一些必选属性都是不允许的。

interface Person {
    name: string;
    age: number;
    gender?: number // 可选属性
}
let tom: Person = {
    name: 'Tom',
    age: 22
}

// 定义的变量比接口少一些必选属性是不允许的，多一些也不允许。
// 也就是说变量tom中如果少age或name属性就会报错。

5.2 可选属性

可选属性的含义是该属性可以不存在。但仍然不允许添加未定义的属性。

上面定义的 Person 接口的 gender 属性就是可选属性。

5.3 任意属性

有时候我们希望一个接口有任意的属性，可以使用 [propName: string] 定义任意属性名取 string 类型的值。

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let jack: perosn = {
    name: 'Jack',
    age: 22,
    gender: 'male'
}

注意： 一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集。就是说，如上的接口 Person 的属性 name 和 age 的数据类型都必须是any的子集。如果把 any 变成 string 类型，因为 age 的类型是 number，其不是 string 类型的子集，则会报错。

5.4 只读属性

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

interface Student {
    readonly id: number;
    name: string;
    age? number;
    [propName: string]: any;
}

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

6. 数组的类型

6.1 [类型 + 方括号]表示法

let arr: number[] = [1, 2, 3, 4, 5];

此数组只能放number类型的元素，放其他元素则会报错。

6.2 数组泛型

使用数组泛型（Array Geneirc）Array<elemType> 来表示数组：

let arr: Array = [1, 2, 3, 4, 5];

6.3 用接口表示数组

interface NumberArray {
    [index: number]: number;
}
// NumberArray 表示：只要 index 的类型是 number，那么值的类型必须是 number。

6.4 any 在数组中的应用

一个比较常见的做法是，用 any 表示数组中允许出现任意类型：

let list: any[] = ['jack', 25, {foo: 'bar'}];

6.5 类数组

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

注意：类数组可以像数组一样的读取数据、读取长度，但不能调用数组的方法。

7. 函数的类型

函数是 JavaScript 中的一等公民。

7.1 函数声明

在 JavaScript 中，有两种常见的定义函数的方式：

• 函数声明（Function Declaration）
• 函数表达式（Function Expression）

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到。

// Function Declaration
// 注意：输入多余的（或者少于要求的）参数，都是不被允许的。
function sum(x: number, y: number): number{
    return x + y;
}

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

注意不要混淆了 TypeScript 中的 => 和 ES6中的 =>。

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

在 ES6 中，=> 叫做箭头函数，应用十分广泛。

7.2 用接口定义函数的类型

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

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

7.3 可选参数

用 ? 表示可选的参数。可选参数必须接在必需参数后面。

function sum(x: number, y: number, z?: number){ 
    // ...
}

7.4 参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript会将添加了默认值的参数识别为可选参数。

此时，就没有 [可选参数必须接在必需参数后面] 的限制了。

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');  // 只能使用undefined，不能使用null

7.5 剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest参数）。

注意：rest 参数只能是最后一个参数。

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}
let a = [];
push(a, 1, 2, 3);

// items 是一个数组，我们可以用数组的类型来定义它。
// function push(array: any[], ...items: any[]) {}

7.6 重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

// 我们实现一个函数 reserve，输入数字时，输出反转的数字；输入字符串时，输出反转的字符串。
// 利用联合类型：
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
// 缺点：不能精确的表达。输入数字，输出也该为数字；输入字符串，输出应该是字符串。

利用重载定义多个 reverse 的函数类型。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。

注意：TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

8. 类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

8.1 语法

<类型>值

或

值 as 类型

8.2 例子：将一个联合类型的变量指定为一个更加具体的类型

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

如果我们在还不确定类型的时候就访问其中一个类型的属性或方法，那可能就会报错。

此时，我们可以使用类型断言，将某一类型断言成希望的类型：

// 类型断言的用法如下，在需要断言的变量前加上 `<Type>` 即可。
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;      // string 类型
    } else {
        return something.toString().length;     // number 类型
    }
}

注意：类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的。