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 () {
// ...
}
declare常见用法