首页 > 其他 > 详细

declare常见用法

时间:2021-08-12 13:30:18      阅读:30      评论:0      收藏:0      [点我收藏+]

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常见用法

原文:https://www.cnblogs.com/xm0328/p/15132058.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!