为什么要引入类型

举几个

你能看出这个变量是什么类型吗？

    let a; // 这是什么类型？

你可能觉得这个变量名取得不好，没有意义，比如 let appleCount 就可以猜到它是一个数字。那我换一个栗子：

let requestOptions; // 这是什么类型？

这个变量名应该很明确了，这是一个请求的参数，而且它很可能是一个对象（也许是一个字符串？），那么下一个问题就是，这个对象里可以放什么属性？每个属性的值是什么类型？哪些属性是可选的？我们可以猜测也许有一个属性是 url，一个属性是 method，还有一个属性是 data 等等，我们试一下：

request({
  url: 'http://foo.bar',
  method: 'post',
  data: 'Hello'
})

这段代码的执行结果很可能不符合你的预期，因为：

它可能用的不是 url，而是 host、path 和 query
它的 method 不是 post，而是大写的 POST
它可能用的不是 data，而是 body

面对报错或者不符合预期的结果，你能做的就是去找到这个函数的文档，更差的情况是，这个函数没有文档，那你只能看源码，而看源码势必会花费很多精力，还不一定看得明白。

你能知道这个函数的返回值是什么吗？

还是以刚才的请求函数为例子，你能猜出这个 response 是什么类型吗？

const response = request({
  url: 'http://foo.bar',
  method: 'post',
  data: 'Hello'
})

我的直觉告诉我，它是一个 Promise，事实上很可能就是这样，但是也有可能是另一种情况 -- 回调函数 -- Node.js 的默认情况，如果不看文档，你并不知道到底是 Promise 还是回调函数，或者两者均可，或者甚至两者都不是，更差的情况，如果文档都没有，那你又双叒叕只能看源码了。

TypeScript 怎么解决这几个问题？

以[这段代码]为例子。

interface RequestOptions {
    url: string;
    method: 'GET' | 'POST',
    data?: string;
}

interface ResponseData {
    statusCode: number;
    header: Record<string, string | number>;
    body?: string;
}

async function request(options: RequestOptions): Promise<ResponseData> {
    return {
        statusCode: 200,
        header: {
            'Content-Type': 'text/plain'
        },
        body: 'Hello'
    }
}

// 如果用字符串调用 request 函数
const response0 = request('http://foo.bar');

// 如果我们用错误的选项进行调用
const response1 = request({
    host: 'foo.bar',
    protocol: 'http',
    path: '/index.html'
});

// 如果我们写错了某些参数
const response2 = request({
    url: 'http://foo.bar/index.html',
    method: 'get'
});

// 如果我们缺少了某些必须的参数
const response3 = request({
    url: 'http://foo.bar',
    data: 'Hello'
});

// 如何知道返回值的类型
const response4 = request({
    url: 'http://foo.bar/index.html',
    method: 'GET'
})

response4.then(res => console.log(res.body))

为什么要选择 TypeScript

你可能也听说过 Flow，或者是 CoffeeScript，但是为什么要选择 TypeScript 呢？TypeScript 有几个特点非常受大家的欢迎：

TypeScript 是 JavaScript 的超集，意思就是 JavaScript 就是合法的 TypeScript，只是没有类型
类型错误不会阻止生成 JavaScript
TypeScript 的类型系统是结构子类型，而非名义类型
TypeScript 可以和 JavaScript 共存，甚至可以检查 JavaScript
TypeScript 可以编译到任意版本的 JavaScript
即使是 JavaScript 编写的包，也可以通过类型文件获得 TypeScript 的支持
Facebook 已经宣布 Flow 不再维护，转而使用 TypeScript

类型是什么？

类型是描述某个值的类型或结构的注解 (annotation)（之所以称为注解是因为没有类型也是合法的 TypeScript，因此类型就像看书时写在某个词或某句话旁边的注解），因此在 TypeScript 中，类型被称为“类型注解” (type annotation)。

以下哪些可以被作为类型？

number
string
object
true 在 JavaScript 中 true 是一个布尔值，那它能不能是一个类型呢？
1 在 JavaScript 中 1 是一个数值，那它能不能是一个类型呢？
'foo' 在 JavaScript 中 'foo' 是一个字符串值，那它能不能是一个类型呢？
undefined 在 JavaScript 中 undefined 表示空值，那它能不能是一个类型呢？
null 在 JavaScript 中 null 表示这应该是一个对象，但现在是空值，那它能不能是一个类型呢？

前三个 number``string``object 毫无疑问可以作为类型使用，那 true``1``'foo' 能不能作为类型使用呢？在 TypeScript 中是可以的，不仅仅是 true``1``'foo'，任何原始值类型都可以作为类型使用，也就是任意数字、任意字符串、任意布尔值，甚至是任意的 symbol（通过调用 Symbol() 得到的）也可以作为类型（它的类型是 unique symbol，以后会提到）使用。一个原始值作为类型使用的时候，就表示拥有该类型的值只能被赋值为该原始值，例如：

    type Foo = true;

    let foo: Foo = true; // ok
    let bar: Foo = 1; //  Error: type '1' is not assignable to type 'true'

TypeScript 中的基本类型

原始值类型

所有 JavaScript 中的原始值类型都是 TypeScript 的原始类型，包括：

boolean
number
string
undefined
symbol
bigint ES2020 新增

boolean

和 JavaScript 一样，TypeScript 的 boolean 类型只有两个值，true 和 false，分别代表真和假。

    let passed: boolean = true;

number

TypeScript 中的数字类型和 JavaScript 中的一样，都是符合 IEEE754 的双精度浮点数，数字类型可以被赋值为整数或者小数，支持十进制、二进制、八进制和十六进制：

     let  decimal: number = 6;
     let  hex: number = 0xf00d;
     let  binary: number = 0b1010;
     let  octal: number = 0o744;

string

字符串类型是另一种非常重要的基础类型，几乎所有程序都会用到字符串，TypeScript 中的字符串和 JavaScript 中的一样，你可以使用单引号 (') 或者双引号 (") 来定义字符串的边界，两者没有任何区别：

    let  color: string = "blue";
    color = 'red';
当然，你也可以使用 ES2015 中新增的模板字符串来创建多行字符串，还可以在里面使用插值：
     let  fullName: string = `Bob Bobbington`;
     let  age: number = 37;
     let  sentence: string = `Hello, my name is ${ fullName }.

    I'll be ${ age + 1 } years old next month.`;

小提示：模板字符串是可以嵌套的，也就是说在插值里面可以再次使用模板字符串，但是一般不建议这么用，因为代码层级太深不直观，不太容易被理解。

undefined / null

在 TypeScript 中，undefined 和 null 分别有自己对应的类型，也就是 undefined 和 null，这个类型不太常用，因为这个类型只能被赋值为他们对应的值：

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

默认情况下，undefined 和 null 是任何类型的子类型，因此可以赋值给任意类型，比如 number：

    let num: number = null; // OK

但是如果开启了 \--strictNullChecks 时，undefined 和 null 只能被赋值给 any 类型和他们各自对应的类型（唯一的例外是 undefined 可以被赋值给 void 类型），这个 flag 可以避免非常多的常见错误，如果你想让某个值可以被赋值为 undefined 或者 null 或者 string，你可以使用联合类型 undefined | null | string。

联合类型会在后面的章节介绍。

symbol

symbol 是 ES2015 中引入的一个新的原始值类型，和 number、string 一样。可以通过调用 Symbol() 构造函数来生成一个新的 symbol，注意，symbol 是一个原始值类型而非对象，因此调用时不能在前面加上 new 运算符：

    let sym1 = Symbol();
    let sym2 = Symbol('Description'); // optional parameter key to describe a symbol

每一个 symbol 都是独一无二且不可变的：

    let sym3 = Symbol('key');
    let sym4 = Symbol('key');


    sym3 === sym4; // false

symbol 可以和 string 一样作为对象的 key：

    const sym = Symbol();

    let obj = {
    [sym]: "value"
    };

    console.log(obj[sym]); // "value"

symbol 还可以用在计算属性中，作为类的方法名或者对象的方法名：

    const getClassNameSymbol = Symbol();


    class C {
      [getClassNameSymbol]() {
        return "C";
      }
    }


    let c = new C();
    let className = c[getClassNameSymbol](); // "C"

bigint

bigint 类型是即将在 ES2020 中发布的一种新的原始值类型，主要用于大数运算，目前该提议已经到了 stage-4（定稿）阶段，点此可查看提议详情。bigint 类型有几个特点：

只能是整数，通过运算得到的小数会被丢弃，比如 7n/4n === 1n，7n/3/ === 2n
只能与 bigint 类型进行运算，与 number 类型混合运算时会报 TypeError，因为混合运算可能会导致精度丢失
bigint 和 number 类型可以进行比较，比如 7n > 4 === true，因为比较不会导致精度丢失
bigint 和 number 类型 不是严格相等 的，但是是 宽松相等 的，比如 1n !== 1 但是 2n ==2
bigint 也可以和 number 一样，可以作为 if 等条件语句的条件，其隐式转换和 number 类似

bigint 类型和 number 类型非常相似，比如都可以通过字面量来定义，在数字字面量后面加一个 n 即可定义个 bigint 的字面量：

    let count = 123n;

你也可以使用 BigInt 函数来创建 bigint 字面量：

    let num1 = BigInt(123); // 可以使用 number 类型的数字
    let num2 = BigInt('123'); // 可以使用字符串
    let num3 = BigInt(0x1fff); // 可以使用十六进制
    let num4 = BigInt(0b1fff); // 也可以使用二进制

BigInt 构造函数有两个静态方法，分别是 BigInt.asUintN(width, bigint) 和 BigInt.asIntN(width, bigint)，这两个函数的作用是将一个 bigint 转换为固定位数的 bitint 数值（有符号或者无符号）。BigInt.asUintN(width, bigint) 将 bigint 转换为 \-2n \*\* (width - 1n) 到 2n \*\* (width - 1n) - 1n 范围内的数字，超过此范围的话会导致溢出。BigInt.asIntN(width, bigint) 则会将 bigint 转换为 0 到 2n \*\* width - 1n 范围内的数字，超过此范围的话会导致溢出。

其他类型

除了原始值类型外，TypeScript 中还有别的类型，包括：

object
Tuple（元组）
Enum（枚举）
any
void
never

object

object 类型指的是除原始值类型以外的类型，也就是除 number, boolean, string, null, undefined, symbol 以及 bigint 以外的所有类型。

Tuple

元组可以让你用类似于数组的形式来表示一组类型，在元组中的每一个元素的类型都是确定的，且 可以是不同 的（这点和数组不一样，数组中所有元素的类型 都是一样 的），比如你可能想将一个字符串和数组放在一个数组中来表示一对值，这种类型就可以用元组来实现：

   let pair: [string, number] = ['foo', 1];
    pair = [1, 1]; //  Error: Type 'number' is not assignable to type 'string'.


    console.log(pair[0].slice(0)); // OK
    console.log(pair[1].slice(0)); //  Error: Property 'slice' does not exist on type 'number'.


    console.log(pair[2]); //  Error: Tuple type '[string, number]' of length '2' has no element at index '3'.

Enum

枚举类型是用于组织一组 确定的 、 标准化的 数据类型的一种类型，它是 TypeScript 中对于 JavaScript 的类型补充。枚举类型来自于 C#，它可以为一组数值提供更加友好的名字：

    enum Color {
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;

默认情况下，枚举的值从 0 开始，当然你可以为每一个枚举成员设置自定义的枚举值，比如，我们可以让枚举值从 1 开始，而不是从 0 开始：

    enum Color {
     Red = 1,
      Green,
      Blue,
    }
    let c: Color = Color.Green;

甚至，你可以为每个枚举成员都自定义枚举值：

    enum Color {
     Red = 1,
     Green = 2,
     Blue = 4,
    }
    let c: Color = Color.Green;

枚举有一个非常有用的特性就是，你可以通过枚举值获取枚举成员的名字，比如，现在有一个枚举值是 2，但是我并不知道它所对应的颜色是什么，这时候你就可以用到这个特性了：

    enum Color {
    Red = 1,
      Green,
      Blue,
    }
    let colorName: string = Color[2];


    console.log(colorName); // Displays 'Green' as its value is 2 above

常数项和计算所得项

上面的例子中枚举的值都是常数项，而枚举实际上还可以使用计算所得项，计算所得项的意思就是可以在运行时计算枚举的值，比如：

    enum Color {
      Red,
    Blue = 'Blue'.length,
    }

注意，在使用计算所得项时，计算所得项前面的枚举可以不需要手动赋值，比如上面这个例子中的 Red，但是任意一个计算所得项后面的所有枚举，都需要手动赋值，否则会报错：

    enum Color {
      Red,
    Blue = 'Blue'.length,
    Green // error TS1061: Enum member must have initializer.

常数项是可以在 TypeScript 编译阶段求值的值，除了常数项以外的值都是计算所得项，常数项仅包含以下几种情况：

不具有初始化值的枚举是常数，不具有初始化值的枚举值是上一个枚举值加 1，第一项枚举值如果没有初始化值的话，它的值是 0
枚举值使用常数表达式进行赋值，当某个枚举初始化值满足以下条件时，就是一个常数项：
使用字面量，包括字符串字面量和数字字面量
其他枚举中的常数项
带括号的常数表达式
+, \-, ~ 一元运算符应用于常数表达式
+, \-, \*, /, %, <<, \>>, \>>>, &, |, ^ 二元运算符，常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错

除以上情况外均为计算所得项。

any

很多时候我们并不能确定一个值的类型，比如某个值来自于用户输入，或者来自第三方库。这时候你也许想选择不使用类型检查，你可以使用 any 类型来实现：

   let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean

any 类型是将 JavaScript 迁移至 TypeScript 时最常使用的类型，你可以任意控制对某个值使用或者不使用类型检查。你可能会觉得 Object 也有类似的作用（像其他语言一样），但是在 TypeScript 中，Object 有点不一样，你可以给 Object 类型赋任何值，但是不能在 Object 类型上调用任何方法：

    let notSure: any = 4;
    notSure.ifItExists(); // okay, ifItExists might exist at runtime
    notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)
    let prettySure: Object = 4;
    prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.
    // Property 'toFixed' does not exist on type 'Object'.

当然你可能不想让某个值完全拥有任意类型，你可能只是想类型的一部分是任意类型，你可以和其他类型组合起来使用 any，比如：

    let list: any[] = [1, true, "free"];
    list[1] = 100;

void

void 有一点像 any 的反面：表示任何值的缺失。void 最常见的地方就是函数的返回值，表示该函数没有任何返回值：

    function  warnUser(): void  {
     console.log("This is my warning message");
    }

将一个值声明为 void 类型没什么用，因为你只能给它赋值 null （如果 \--strictNullChecks 没有指定的话）或者 undefined。

never

never 类型表示一个值永远不会出现。比如一个抛出错误的函数的返回值类型就是 never，因为这个函数的返回值永远不会出现。never 是任何类型的子类，因此可以赋值给任何类型，而 never 不能赋值给除 never 自己以外的任何类型，就算是 any 也不能赋值给 never。一些 never 的例子：

   // Function returning never must have unreachable end point
    function  error(message: string): never  {
     throw  new  Error(message);
    }


    // Inferred return type is never
    function  fail() {
     return error("Something failed");
    }


    // Function returning never must have unreachable end point
    function  infiniteLoop(): never  {
     while (true) {}
    }

类型断言

有时候你可能比 TypeScript 编译器更清楚一个值的类型。这时候你可以使用类型断言来告诉编译器：“相信我，我比你更清楚这个值的类型，我知道我在做什么”。类型断言有点类似于别的语言的强制转换，但是类型断言不会对值做任何操作，只是检查类型而已。类型断言假设 你（编程者） 已经做了必要的类型检查了。类型断言有两种方式，第一种是尖括号形式：

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

或者你可以使用 as 形式：

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

这两种形式没有区别，但是当你在使用 JSX 的时候，只有 as 是合法的（因为无法区分一个尖括号是 JSX 还是类型断言）。

TypeScript 安利系列（一）为什么要用TS和基本类型