TypeScript中的类型声明declare

这篇具有很好参考价值的文章主要介绍了TypeScript中的类型声明declare。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、declare基本用法介绍

TypeScript中,declare关键字用于定义全局变量、函数和类型等,提供了一种在编译过程中告诉TypeScript编译器某个标识符的类型的方式。它告诉编译器:虽然它在当前文件中没有声明,但它在其他地方已经存在了。也就是说,declare让编译器知道这些声明的实体是在编译阶段存在的,而不是在运行时

使用declare关键字的目的是为了告诉TypeScript编译器,某个标识符的声明位于其他地方,不需要进行编译器级别的检查。它在以下几个方面有用:

1. 声明第三方库

在TypeScript中,如果要使用第三方库,需要安装对应的类型声明文件。但是有些第三方库可能没有相关声明文件,这时候可以使用declare语句来告诉编译器该库的存在,使其不会报错。

例如,要使用全局变量lodash,可以通过以下方式声明:

declare var _: any;

这样就可以在代码中使用_变量,而不会报错。

2. 声明全局变量

有时候我们需要在代码中使用一些全局变量,但是这些变量并没有在当前文件中声明。可以使用declare来告诉编译器该变量的类型。

例如,要使用全局变量Config,在代码中可以这样声明:

declare var Config: {
  apiUrl: string;
  apiKey: string;
};

这样就可以在代码中使用Config.apiUrl和Config.apiKey,而不会报错。

3. 声明全局函数和方法

有时候我们需要使用一些全局函数或方法,但是这些函数或方法并没有在当前文件中声明。可以使用declare来告诉编译器这些函数或方法的类型。

例如,要使用全局函数sum,在代码中可以这样声明:

declare function sum(a: number, b: number): number;

这样就可以在代码中调用sum函数,而不会报错。

总结起来,declare关键字在TypeScript中用于声明全局的变量、函数和类型等,在编译过程中告诉TypeScript编译器某个标识符的类型和存在方式,使其不会报错。它在使用第三方库、声明全局变量、声明全局函数和方法等场景下都很有用。

二、 手动编写声明文件

在TypeScript中,可以手动编写声明文件来为第三方库或模块添加类型定义。声明文件的命名约定为*.d.ts,例如jquery.d.ts

编写声明文件的方法有三种:

  1. 全局声明:通过declare关键字,直接声明全局变量、函数或命名空间。

例如,对于全局变量$和全局函数myFunction,可以这样编写声明文件:

declare const $: JQueryStatic;

declare function myFunction(a: number, b: number): number;
  1. 模块声明:通过declare module关键字,为模块添加类型定义。

例如,对于模块myModule,可以这样编写声明文件:

declare module 'myModule' {
  export function myFunction(): void;
  export const myVariable: number;
}
  1. 扩展声明:通过声明全局的模块依赖,为已有模块添加类型定义。

例如,自动化构建工具gulp没有官方的类型声明文件,可以通过扩展声明为其添加类型定义:

declare module 'gulp' {
  function task(name: string, cb: () => void): void;
  export = task;
}

当引入第三方库或模块时,TypeScript会按以下顺序查找声明文件:

  1. 先查找默认位置:TypeScript会在和引入的模块相同的文件夹下寻找名为index.d.ts的声明文件。

  2. 遍历node_modules:TypeScript会从当前文件所在的目录开始,逐级向上遍历父级目录中的node_modules文件夹,按照引入模块的路径寻找相应的声明文件。

  3. 与声明文件同名的 JavaScript 文件:如果找不到声明文件,TypeScript会查找与引入模块文件同名的 JavaScript 文件,并尝试解析其中的类型。

tsconfig.json中,可以配置以下选项来辅助声明文件的编译:

  • typeRoots:指定额外的类型声明文件的搜索位置,通常用于指定全局声明文件的位置。
  • include:指定哪些文件需要参与编译,可以使用通配符匹配多个文件。
  • exclude:指定哪些文件不参与编译,可以使用通配符排除多个文件。

一个完整的例子是,在使用Vue.js时,可以手动编写声明文件来为其添加类型定义。

  1. 创建一个名为vue.d.ts的文件,内容如下:
declare module 'vue' {
  import Vue from 'vue';

  export default Vue;
}
  1. tsconfig.json中,添加以下配置:
{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}
  1. vue.d.ts放置在./typings文件夹下。

这样,在使用import Vue from 'vue'时,TypeScript就会使用手动编写的声明文件来解析类型。

通过手动编写声明文件,可以为第三方库或模块添加类型定义,提升代码的可读性和维护性。文章来源地址https://www.toymoban.com/news/detail-525190.html

到了这里,关于TypeScript中的类型声明declare的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】类型声明及应用(二)

    一、前言 TypeScript开发中需要对定义的变量指定类型,目前版本都支持哪些类型,每一个类型都有哪些含义,在这篇文章中,我们将会对其进行总结说明 二、JavaScript基本数据类型以及TypeScript特有的数据类型。 JavaScript基本数据类型: String、Number、null、undefined、Boolean、Symbo

    2024年02月15日
    浏览(35)
  • 【TypeScript】TS类型断言-类型的声明和转换(五)

    🐱个人主页: 不叫猫先生 🙋‍♂️作者简介:前端领域新星创作者、华为云享专家、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫系列专栏:vue3从入门到精通、TypeScript从入门到实践 📝个人签名:不破不立 📢资料领取:前端进阶资料以

    2024年02月22日
    浏览(37)
  • 前端TypeScript学习day05-索引签名、映射与类型声明文件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)              目录 索引签名类型  映射类型 索引查询(访问)类型 基本使用  同时查询多个索引的类型  TypeScript 类型声明文件  概述 TS 的两种文件类型  类型声明文件的

    2024年02月08日
    浏览(46)
  • TypeScript入门指南:特性、安装配置、类型声明、编译选项、面向对象等详解

    了解TypeScript的特性、安装配置步骤、类型声明方式、编译选项及面向对象编程方法。适合初学者学习和实践。

    2024年02月12日
    浏览(48)
  • 【TypeScript】TS中type和interface在类型声明时的区别

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏: vue3+vite+typeScript从入门到实践 📢 资料领取:前端进阶资料可以找我免费领取 🔥

    2023年04月26日
    浏览(59)
  • 声明式编程Declarative Programming

    接下来要介绍第五种编程范式 -- 声明式编程。分别从它的优缺点、案例分析和适用的编程语言这三个方面来介绍这个歌编程范式。 声明式编程是一种编程范式,其核心思想是通过描述问题的性质和约束,而不是通过描述解决问题的步骤来进行编程。这与命令式编程范式形成

    2024年02月05日
    浏览(39)
  • typeScript中的函数类型

    目录 1.函数声明 2.函数表达式 3.用接口定义函数的形状 4.可选参数 5.参数默认值  6.剩余参数 7.重载 函数是JavaScript应用程序的基础。它帮助你实现抽象层, 模拟类,信息隐藏和模块。在TypeScript里, 虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。

    2024年02月03日
    浏览(38)
  • TypeScript 中的字面量类型和联合类型特性

    字面量类型和联合类型是 TypeScript 中常用的类型特性。 1. 字面量类型: 字面量类型是指具体的值作为类型。例如,字符串字面量类型可以通过给定的字符串字面量来限制变量的取值范围。 2. 联合类型: 联合类型可以用来表示一个变量可以是多个类型中的任意一个。使用 |

    2024年02月15日
    浏览(40)
  • TypeScript中的keyof、typeof、索引访问类型、条件类型

    TypeScript中的keyof类型操作符 可以获取某个类型的所有属性名组成的联合类型 。这个操作符的作用是帮助开发者在静态类型检查中更准确地操作属性名。 举例来说,如果我们有如下一个接口: 我们可以使用keyof来获取这个接口的属性名联合类型: 有了属性名联合类型,我们可

    2024年02月11日
    浏览(51)
  • TypeScript 中的类型检查实用函数

    在前端开发中,我们经常需要判断变量的类型以进行相应的操作或处理。TypeScript 提供了基础的类型检查,但有时我们需要更复杂或更灵活的类型检查。这篇博客文章将介绍一组实用函数,用于各种常见的类型检查。

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包