拥抱TypeScript

我很喜欢TypeScript。

我是名C#转前端的程序员，当第一次看到TypeScript时，感觉好熟悉，当上网查询到TS是由微软出品时，瞬间明白了。微软将很多的C#特性移植到了JS上，就是TypeScript。

那TypeScript有哪些让人喜欢的优点呢？

1. 类型系统给我带来稳定感。

JS的变量可以随意赋值一个数字或是字符串，JS的对象给人感觉就是一些键值对的集合，可以随意增删改。JS的函数可以传任意数目的参数。这当然也有好处，但构建大型应用时，这种不确定性不利于理解和维护代码。有了TS的类型系统之后，代码会给你稳定的感觉，你会清楚的知道你拿到的对象是什么样的类型，有哪些属性和方法可用。

2. 类型系统给我带来安全感。

在编码的过程中，如果方法都有确定类型，类都有确定的定义，那在写代码的时候，就会暴露出很多类型错误，而不是等到运行时才发现它。我们的代码更加安全了。

3. 类型系统提示的编程体验。

最最重要的是可以提升我们的编程体验。当我们调用一个对象时，编辑器会在我们打出点时，自动提示我们此对象包含的所有属性和方法，当我们选择我们想要的方法时，编辑器又会解释此方法的用意和参数的含义。代码补全、接口提示等功能让我们的编程更加轻松了。

4. 类型系统让代码更加易读。

类型信息是一层编码之外的额外的信息，相当于我们又多了一个维度来解释我们所写的代码。会让代码更加易读。

准备工作

安装

npm install -g typescript
复制代码

新建项目

利用npm install新建一个项目，叫做firstTS，再新建一个文件，test.ts。显然typescript的文件要以ts结尾。

编写一个函数

function test() {
  const num = Math.abs(-1);
  console.log(num);
}
复制代码

准备工作完毕，我们将鼠标移动到Math.abs上，看到如下：

多了一个TS提示框，第一行就包含了TS的语法，入参数是x:number，代表传入的参数要是一个数字，函数后面还跟着一个:number，代表返回值是一个数字。下面还是这个函数的说明，参数说明，帮助我们理解和使用它。

在abs上点击右键，在弹出框中选择转到定义，我们就到的abs函数的声明文件lib.es5.d.ts啦。

这也是我刚才选择Math对象的原因，可以直接转到TS内置声明文件，TS已经帮我们把现有的js内置对象，都做了类型约束。我们通过看它们，一方面熟悉TS的语法，一方面回顾一下JS的知识吧。

TypeScirpt自带声明文件

进入本篇的正题，我们通过TS的自带声明文件，学习一下TS的语法。

为了方便查看，我们在项目中引入typescript:

npm install typescript
复制代码

刚才我们没有引入typescript库啊，为啥也能看到Math.abs的ts声明呢？原因是我们使用的vscode编辑器，目前已经内置了typescript。不用咱们引用，就可以给出ts的提示了。

然后我们就在项目中的node_modules文件夹下，看到一个typescript文件夹，如下图：

打开它，看看里面是什么

cs，de到zh-tw都是跟本地化相关的，直接略过。下面有非常多的.d.ts文件。第一个知识点来了。

声明文件

声明文件以 .d.ts 为后缀，例如：

lib.es5.d.ts
复制代码

声明文件的作用：为第三方库定义类型，让使用者获得对应的代码补全、接口提示等功能。

我们也看到了声明文件的作用，在我们编写的Math.abs这句代码上，鼠标指上去有提示框，转到定义就到了lib.es5.d.ts这个声明文件了。

再看看声明文件内的内容吧。我们先从lib.d.ts开始看，如下：

/// <reference no-default-lib="true"/>


/// <reference lib="es5" />
/// <reference lib="dom" />
/// <reference lib="webworker.importscripts" />
/// <reference lib="scripthost" />
复制代码

这又是什么，知识点又来了，看看三斜杠加reference标签代表什么？

：此指令允许文件显式包含现有的内置lib文件。比如es5，就是代表引用了lib.es5.d.ts。也就是说lib.d.ts是下面这四个声明文件的集合，整体作为一个输出。

我们看到lib文件下有很多的*.d.ts文件，非别对es5,es6,es2016等这种版本作了类型约束，大家可以都打开看看。

回头来看lib.d.ts文件。dom,webworker.importscripts,scripthost这三个声明文件我们都可以不看，重点看看lib.es5.d.ts吧。

lib.es5.d.ts下的内容

头两句代码是这样的：

declare var NaN: number;
declare var Infinity: number;
复制代码

又碰到了一个新的关键字：declare。

declare就是声明的意思，这里不是真的定义了一个var NaN变量，而是告诉我们NaN这么个变量，是个数字。我们试试这个NaN变量。

function test() {
  let num: number;

  num = '嗯哼';
  num = NaN;

  console.log(num);

}
复制代码

我们为num添加了一个number类型约束，然后为num赋值个字符串，如下图，提示错误，但是赋值NaN，就没有报错，这就符合我们对NaN的认知，在Js的知识中，它就是代表一个数字。

这里再介绍一个知识点，类型推断。

function test() {
  let num = Math.abs(-1);

  num = '嗯哼';

  console.log(num);

}
复制代码

如上面的代码，赋值字符串的时候，同样会报错。如下图

这里我们没有给num设置类型约束啊，但是ts会因为Math.abs的返回值类型，推断出num是个数字类型。相当于为其加了类型约束了。

我们接着往下看，是一些declare function，都是js内置函数的定义。eval，parseInt等，这里看一下parseInt，encodeURIComponent，上面有两个TS的知识点：

declare function parseInt(s: string, radix?: number): number;

declare function encodeURIComponent(uriComponent: string | number | boolean): string;
复制代码

parseInt是我们常用的转化字符串到数字的函数，第二个参数上多了个问好，意思是可以传，可以不传。

encodeURIComponent的参数，用竖线分割，意思是参数即可以传字符串，又可以传数字，又可以传布尔值。

接下来，最主要的就是Object类型的声明了，我们来看一下：

interface Object {
    /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
    constructor: Function;

    /** Returns a string representation of an object. */
    toString(): string;

    /** Returns a date converted to a string using the current locale. */
    toLocaleString(): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): Object;

    /**
      * Determines whether an object has a property with the specified name.
      * @param v A property name.
      */
    hasOwnProperty(v: PropertyKey): boolean;

    /**
      * Determines whether an object exists in another object's prototype chain.
      * @param v Another object whose prototype chain is to be checked.
      */
    isPrototypeOf(v: Object): boolean;

    /**
      * Determines whether a specified property is enumerable.
      * @param v A property name.
      */
    propertyIsEnumerable(v: PropertyKey): boolean;
}
复制代码

首先是interface关键字，不同于基础的数字，字符串类型，Object是一个对象了，在TS中也是一种结构，对结构进行类型检查，就要使用interface。从上面的代码中，我们可以看到Oject在JS中的属性和方法了。

注意下面还有一个interface ObjectConstructor 。

interface ObjectConstructor {
    new(value?: any): Object;
    (): any;
    (value: any): any;

    ... // 这里还有很多方法。
}
    
复制代码

这里面就是Object作为构造器，所拥有的方法，而不是Object对象，拥有的方法。文件下面还有更多内容，感兴趣的同学可以自行查看，遇到不懂得关键字，可以在官网上查看。

结束语

本篇文章就介绍到这里，感兴趣的同学可以一起研究，共同学习TypeScript。

查看TypeScript库自带的声明文件