declare常见用法
时间:2021-08-12
本文章向大家介绍declare常见用法,主要包括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 () {
// ...
}
原文地址:https://www.cnblogs.com/xm0328/p/15132058.html
- Gitcafe绑定自定义域名
- 【死磕Java并发】—- J.U.C之并发工具类:CyclicBarrier
- Android Studio快捷键
- go 切片使用小结
- 分布式事务 TCC-Transaction 源码分析 —— 项目实战
- 分布式事务 TCC-Transaction 源码分析 —— 事务恢复
- Go的语言特性总结
- 注册中心 Eureka 源码解析 —— Eureka-Client 初始化(三)之 EurekaClient
- 从一次 Snowflake 异常说起
- 分布式事务 TCC-Transaction 源码分析 —— Dubbo 支持
- 2016 腾讯软件开发面试题(部分)
- 分布式事务 TCC-Transaction 源码分析 —— 运维平台
- 2016美团面试经历
- 2016年百度面试经历
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Ceph】集群升级之好好看ceph.conf
- Carthage使用
- java线程池(一):java线程池基本使用及Executors
- java线程池(二):聊聊newFixedThreadPool(1)和newSingleThreadExecutor()的区别
- SAP RFC函数RFC_READ_TABLE使用与优化
- 数据库PostrageSQL-升级一个PostgreSQL集簇
- 数据库PostrageSQL-用 SSL 进行安全的 TCP/IP 连接
- 数据库PostrageSQL-使用SSH隧道的安全 TCP/IP 连接
- 快速学习-Saturn(英文版入门指引)
- Promise.all 踩坑记录
- Springboot统一返回接口+统一异常处理+后端参数校验
- 面试Java基础问题汇总 part2
- org.springframework.util.xml.SimpleSaxErrorHandler warning org.xml.sax.SAXParseException; systemId:
- 贷款违约预测-Task1 赛题理解
- Android功耗优化(7)---如何分析wakelock(wakeup source)持锁问题