【TS】TypeScript声明文件(.d.ts)的使用
前言
当我们在TS文件中需要引入外部库时,编译时是无法判断传入参数的类型的,所以我们需要在引入前加入一个声明文件来帮助ts判断类型。
当然现在大部分库都自带有自己的声明文件,一般在@types目录下。
使用场景
在ts文件中对引用的外部库做类型判断;
制作npm包时,书写自己的声明文件,需要在package.json
的typing/types
字段注册声明文件的路径;
不使用ts时,也可以添加声明文件与(自己的)的模块存放在同一目录下,简单做一下数据结构体,对IDE参数声明也有用哦。
引用声明文件的几种方法
与调用的ts文件放在同一目录下;
在声明文件tsconfig.json
的include/files
字段下添加声明文件的路径;
配置.eslintrc.js
module.exports = {root: true,env: {browser: true,es2021: true,node: true,},parser: 'vue-eslint-parser',parserOptions: {ecmaVersion: 12,parser: '@typescript-eslint/parser',sourceType: 'module',},extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],plugins: ['vue', '@typescript-eslint'],// --------此处配置,可让vscode不报红------overrides: [{files: ['*.ts', '*.tsx', '*.vue'],rules: {'no-undef': 'off',},},],rules: {// http://eslint.cn/docs/rules/// https://eslint.vuejs.org/rules/'@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-var-requires': 'off','@typescript-eslint/no-empty-function': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/ban-ts-comment': 'off','@typescript-eslint/ban-types': 'off','@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/explicit-module-boundary-types': 'off','vue/custom-event-name-casing': 'off','vue/attributes-order': 'off','vue/one-component-per-file': 'off','vue/html-closing-bracket-newline': 'off','vue/max-attributes-per-line': 'off','vue/multiline-html-element-content-newline': 'off','vue/singleline-html-element-content-newline': 'off','vue/attribute-hyphenation': 'off','vue/html-self-closing': 'off','vue/no-multiple-template-root': 'off','vue/require-default-prop': 'off','vue/no-v-model-argument': 'off','vue/no-arrow-functions-in-watch': 'off','vue/no-template-key': 'off','vue/no-v-html': 'off','vue/comment-directive': 'off','vue/no-parsing-error': 'off','vue/no-deprecated-v-on-native-modifier': 'off','vue/multi-word-component-names': 'off','no-useless-escape': 'off','no-sparse-arrays': 'off','no-prototype-builtins': 'off','no-constant-condition': 'off','no-use-before-define': 'off','no-restricted-globals': 'off','no-restricted-syntax': 'off','generator-star-spacing': 'off','no-unreachable': 'off','no-multiple-template-root': 'off','no-unused-vars': 'error','no-v-model-argument': 'off','no-case-declarations': 'off','no-console': 'off','no-debugger': 'off',},
};
实例
以外部库fs为例(假设fs没有自己的声明文件)
- fs.d.ts
declare module 'fs' {function readFileSync(path: string | number, options?: { encoding?: string; flag?: string; } | null): string;
}
- MyTest.ts
import * as fs from 'fs'const body = fs.readFileSync('../@types/fs.d.ts', {encoding: 'utf8'});
console.log(body);
总结
声明文件一般只能声明外部引入的npm包;
声明文件一定要用declare module 'fs'
显式的声明自己的外部库名称;
【TS】TypeScript声明文件(.d.ts)的使用相关推荐
- php 得到 ts文件,获取TypeScript声明文件.d.ts步骤详解
这次给大家带来获取TypeScript声明文件.d.ts步骤详解,获取TypeScript声明文件.d.ts的注意事项有哪些,下面就是实战案例,一起来看一下. 一.TypeScript的声明文件就像C ...
- 学习TypeScript18(声明文件d.ts)
声明文件 declare 当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全.接口提示等功能. declare var 声明全局变量 declare function 声明全局方法 d ...
- JS如何捆绑TypeScript声明文件
前话 TypeScript是JavaScript类型的超集 这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言 ...
- c语言源码 文件绑捆,js捆绑TypeScript声明文件的方法教程
前话 TypeScript是JavaScript类型的超集,这是TypeScript的文档介绍的一句话,那么他们存在联系呢? 我的理解是,TypeScript在JavaScript基础上引入强类型语言 ...
- 如何编写 TypeScript 声明文件
1. 什么是 TS 声明文件 在 TypeScript 中以 .d.ts 为后缀的文件,称为 TypeScript 声明文件.它的作用是描述 JavaScript 模块内所有导出接口的类型信息. 2. ...
- 如何创建高质量的TypeScript声明文件(六) - 示例
2019独角兽企业重金招聘Python工程师标准>>> 转载 如何创建高质量的TypeScript声明文件(六) - 示例 继续上篇文章[如何创建高质量的TypeScript声明文件 ...
- 如何创建高质量的TypeScript声明文件(五) - 示例
2019独角兽企业重金招聘Python工程师标准>>> 转发 如何创建高质量的TypeScript声明文件(五) - 示例 前面四篇文章一起介绍了在声明文件中关于库结构的一些介绍,本 ...
- Autodesk Forge Viewer与Forge API Node.js客户端SDK的TypeScript声明文件发布!
作为一个凝聚专(jie)业(cao)精(man)神(man)的团队(Autodesk ADN),这大过?年的岂能没有一点表示?!花式红包什么的早已化境,技术分享大家也审low疲劳了,所以我们这就本着M ...
- 【TypeScript笔记】03 - TS类型声明文件
导读 开发环境 版本号 描述 node -v v14.18.3 npm -v 6.14.6 tsc -v 4.7.4 ts-node -v 10.9.1 概述 类型声明文件:用来为已存在的JS库提供类 ...
- TypeScript 类型声明文件.d.ts
文章目录 一.TS 中的两种文件类型 二.类型声明文件的使用说明 1. 使用已有的类型声明文件 1.1 内置类型声明文件 1.2 第三方库类型声明文件 1.2.1 库自带声明文件 1.2.2 Defi ...
最新文章
- PIE SDK点元素的绘制
- Google 是如何定制 Material 主题的?
- http几个版本的区别
- 一次UNITY闪退问题的定位心得
- 在HubSpot是如何应对Fat JAR困境的
- 图文详解linux/windows mysql忘记root密码解决方案
- 泡泡提示加强版 完美支持XHTML(JavaScript)--zhuan
- Trees on the level UVA - 122 (二叉树的层次遍历)
- java类型的对象可以存储属性_重识JVM(一)-类与对象在JVM中是如何存储的
- 【THUSC 2018】菜鸡互啄记
- Cadence OrCAD17.2禁止start page启动设置方法
- 我的Foobar2000定制版本
- iOS Orientation 屏幕旋转
- jzoj6366. 【NOIP2019模拟2019.9.25】化学(chem)
- Xcode10适配之libstdc++.6.0.9.tdb
- echarts地图设置边界线颜色显示不全
- 国内比较好的软件接单平台有哪些?
- 收藏:什么是PACD工作法
- 页面中查看pdf,且可以上下翻页(不是一个pdf多页,是多个pdf)
- Adobe Acrobat PDF修改注释作者