查看TypeScript库中原生JS的声明文件

拥抱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自带原生JS的声明文件

进入本篇的正题，咱们经过TS的自带原生JS声明文件，学习一下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。