你知道TS中的declare关键字吗

declare是什么

我们在编写自己的代码时,通常使用外部库定义的函数,这时候编译器会因为不知道外部函数的类型定义而报错,而 declare关键字,就是用来告诉编译器外部函数的类型。 这样的话,编译单个脚本就不会因为使用了外部类型而报错。而且所有的declare语句都不会出现在编译后的文件里面。

如果你也和我一样在为大厂冲刺的话,欢迎添加我的微信lx3122178991,这里有一群小伙伴有着和你同样的目标,欢迎来一起讨论,一同进步。

declare使用说明

declare关键字可以描述以下类型。

  • 变量
  • type 或者 interface 命令声明的类型
  • class
  • 枚举
  • 函数
  • 模块
  • 命名空间

变量

declare 关键字可以给出外部变量的类型描述。

TS 复制代码
x = 123; // 报错

declare let x:number;
x = 1;

第一行代码,变量x是其他脚本定义的,当前脚本不知道它的类型,编译器就会报错。 如果使用declare命令给出它的类型,就不会报错了。如果declare关键字没有给出变量的类型,那么变量类型默认any

TS 复制代码
declare let x;
x = 1;//any

declare关键字只用来给出类型描述,不允许设置变量的初始值。

TS 复制代码
// 报错
declare let x:number = 1;

上面示例中,declare 设置了变量的初始值,结果就报错了。

函数

declare 关键字可以给出外部函数的类型描述。

下面是一个例子。

TS 复制代码
declare function say(
  name:string
):void;

say('张三');

declare 命令给出了say()的类型描述,因此可以直接使用它。

但是这种单独的函数类型声明语句,只能用于declare命令后面。 因为TS不支持单独的函数类型声明语句。

TS 复制代码
//报错
function say(
  name:string
):void;

class

declare 给出 class 类型描述的写法如下。注意**declare后面不能给出class的具体实现或初始值。**

TS 复制代码
declare class A {
  constructor(name:string);
  eat():void;
}

枚举

declare关键字给出枚举类型描述有多种写法,并没有什么区别。

例子:

TS 复制代码
//写法一
declare enum E1 {
  A,
  B,
}
//写法二
declare enum E2 {
  A = 0,
  B = 1,
}
//写法三
declare const enum E3 {
  A,
  B,
}
//写法四
declare const enum E4 {
  A = 0,
  B = 1,
}

模块和命名空间

当我们想把变量、函数和类组织在一起,就可以将declaremodulenamespace一起使用。

TS 复制代码
declare namespace AnimalLib {
  class Animal {
    constructor(name:string);
    eat():void;
    sleep():void;
  }
  type Animals = 'Fish' | 'Dog';
}

// 或
declare module AnimalLib {
  class Animal {
    constructor(name:string);
    eat(): void;
    sleep(): void;
  }

  type Animals = 'Fish' | 'Dog';
}
相关推荐
vipbic3 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
cup113 小时前
[Full Clock 技术复盘] 一、浏览器前端如何实现百毫秒级时间校准?时间 API 推荐、模拟 NTP 算法原理及局限
typescript·开源·api·时钟·时间同步
ZC跨境爬虫5 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦5 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
喵个咪5 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
摆烂大大王7 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao7 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色7 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
之歆7 小时前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(下)
前端·javascript·es6
lichenyang4538 小时前
鸿蒙 MVVM 实战:从 Demo 到工程化,聊聊登录、状态管理与埋点系统设计
前端