项目总结 - ts中的declare let type: any和对.d.ts文件类型的认识

项目中用的是angular5.0+ionic3.0，由于现在angular现在都是用typescript写的了，虽然说typescript是Javascript的超集，但是在项目中还是会有一些问题，那就是全js写的插件怎么能引入到typescript写的模块呢？
TypeScript 的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JavaScript 编写的，并不支持类型系统。那么如何让这些第三方库也可以进行类型推导呢？
这篇文章我们来讲解 JavaScript 和 TypeScript 的静态类型交叉口 —— 类型定义文件。
之前在做项目的时候，老是看到这种写法，请看下面的代码：

        import { ViewChild, ElementRef } from "@angular/core";
        import { Company } from "../company/company";
        import { Electronic } from "../sign/electronic/electronic";
        import { Auth } from "../auth-pop/auth";
        import { Credit } from '../credit-pop/credit';
        declare let Talking: any;
        declare let Push: any;
        declare let cordova: any;
        declare let Swiper: any;

从上面的代码我们可以看到有import的导入，还有declare的声明，为什么会这样写？下面会一一讲解

    import { Electronic } from "../sign/electronic/electronic";

这行代码表示从electronic.ts引入我们定义的Electronic类，我们先看一下electronic.ts

    import { Component } from "@angular/core";
    import { NavController, NavParams, ModalController,Tabs, Events } from "ionic-angular";
    import { CallNumber } from '@ionic-native/call-number';
    import { Storage } from "@ionic/storage";
    
    @Component({
      templateUrl: "electronic.html",
      providers: [CallNumber]
    })
    export class electronic {
      constructor(
      ) {      
      }
      ngOnInit() {
      }
      ionViewDidEnter() {
      }
    }

这个导入想必大家都知道，那这个这个呢？

    import { ViewChild, ElementRef } from "@angular/core";

ViewChild和ElementRef都是封装好的插件，它们也都是用js写的，为什么它们可以用import的方式导入进来呢，仔细去查看了一下，发现它们都有一个.d.ts结尾的文件
ViewChild ===》di.d.ts
ElementRef ===》element_ref.d.ts
可以看到它们都有一个对应的.d.ts的文件
那么这个.d.ts的文件到底是什么样的？有什么作用呢？
在 TypeScript 中，我们可以很简单的，在代码编写中定义类型：

    interface IBaseModel {
        say(keys: string[] | null): object
    }
    
    class User implements IBaseModel {
        name: string
        constructor (name: string) {
            this.name = name
        }
    }

但是主流的库都是 JavaScript 编写的，TypeScript 身为 JavaScript 的超集，自然需要考虑到如何让 JS 库也能定义静态类型。
TypeScript 经过了一系列的摸索，先后提出了 tsd(已废弃)、typings(已废弃)，最终在 TypeScript 2.0 的时候重新整理了类型定义，提出了 DefinitelyTyped。
DefinitelyTyped 就是让你把 “类型定义文件(*.d.ts)”，发布到 npm 中，配合编辑器(或插件)，就能够检测到 JS 库中的静态类型。
类型定义文件的以 .d.ts 结尾，里面主要用来定义类型。
我们来看一下element_ref.d.ts

    /**
     * @license
     * Copyright Google Inc. All Rights Reserved.
     *
     * Use of this source code is governed by an MIT-style license that can be
     * found in the LICENSE file at https://angular.io/license
     */
    /**
     * A wrapper around a native element inside of a View.
     *
     * An `ElementRef` is backed by a render-specific element. In the browser, this is usually a DOM
     * element.
     *
     * @security Permitting direct access to the DOM can make your application more vulnerable to
     * XSS attacks. Carefully review any use of `ElementRef` in your code. For more detail, see the
     * [Security Guide](http://g.co/ng/security).
     *
     * @stable
     */
    export declare class ElementRef {
        /**
         * The underlying native element or `null` if direct access to native elements is not supported
         * (e.g. when the application runs in a web worker).
         *
         * <div class="callout is-critical">
         *   <header>Use with caution</header>
         *   <p>
         *    Use this API as the last resort when direct access to DOM is needed. Use templating and
         *    data-binding provided by Angular instead. Alternatively you take a look at {@link Renderer}
         *    which provides API that can safely be used even when direct access to native elements is not
         *    supported.
         *   </p>
         *   <p>
         *    Relying on direct DOM access creates tight coupling between your application and rendering
         *    layers which will make it impossible to separate the two and deploy your application into a
         *    web worker.
         *   </p>
         * </div>
         * @stable
         */
        nativeElement: any;
        constructor(nativeElement: any);
    }

从上面的代码我们可以提炼出最重要的一行代码

    export declare class ElementRef {

从这行代码中我们也看到了declare
declare
declare 可以创建 *.d.ts 文件中的变量，declare 只能作用域最外层：

    declare var foo: number;
    declare function greet(greeting: string): void;
    
    declare namespace tasaid {
        // 这里不能 declare
        interface blog {
            website: 'http://tasaid.com'
        } 
    }

基本上顶层的定义都需要使用 declare， class 也是：

    declare class User {
        name: string
    }