declare常見用法

declare就是告訴TS編譯器你擔保這些變量和模塊存在，並聲明了相應類型，編譯的時候不需要提示錯誤

1.declare 如同 interface、type 關鍵詞一樣，在編譯成 js 之后是會被刪除的。 declare 聲明的是一個變量

// 例子1：
#index.html
<script>
    var myMap = new Map();
</script>
<script src="./index.js"/>

#index.ts
myMap.set('key', 'value');

當你在 index.ts 中直接調用 myMap 的時候是會報錯的，因為 TS 找不到 myMap 這個變量。如果用 const 或者 let 聲明，
又會導致變量被覆蓋，那么解決辦法就是用 declare。

#index.ts
declare myMap: Map<string, string>; // 聲明在運行上下文之中存在一個叫做 myMap 的變量
myMap.set('key', 'value');

2.declare module xxx {} 是用來做一些第三方庫沒有支持ts的，通過declare module，讓我們在代碼中可以import進來，從而使用它

// 一般來說這個 .d.ts 文件會被放在工程的更目錄下，如：
#xxx.d.ts
declare module "test" {
  export var value: number;
  export function hello(str: string): String;
}
declare var D2: string;
declare namespace mySpace {
  interface ITest {
    id: number;
  }
}

// 這樣子我們在文件中 import 那個沒有支持ts的庫就不會報錯了，而且還會提示 庫暴露出來的屬性/方法
import test from "test";

test.hello('123');
test.value;
window.D2 = "hello";
const obj: mySpace.ITest = {id: 1};

// 上面的例子只有 declare module 才是定義一個模塊，才能被 import，其他的用法如上

3.模塊擴展

// 1.ts
export class AClass {
  public a:string;
  constructor(a:string) {
    this.a = a;
  }
 }

// 2.ts
import { AClass } from './1';
declare module './1' {
   interface AClass {
    test: (b: number) => number;
  }
}
AClass.prototype.test = (b: number): number => {
   return b;
}

4.全局擴展

    // observable.ts
    export class Observable<T> {
        // ... still no implementation ...
    }
    declare global {
        interface Array<T> {
            toObservable(): Observable<T>;
        }
    }
    Array.prototype.toObservable = function () {
        // ...
    }