点击关注公众号，“技术干货” 及时达！

背景简介

大家好，我是石小石！

在前端项目开发中，我们常常会遇到这样一种情况：「项目中引入了某个第三方库，但它没有提供内置的 TypeScript 类型声明」。此时，如果你在 TypeScript 项目中直接使用这个库，编译器就会报错。

但你是否想过这些问题：

为什么在
.shims-vue.d.ts
文件中写一个 declare 声明就能解决报错？

.d.ts 文件明明没有显示引入，为什么就生效了？

任意 xxx.d.ts 文件声明为什么都能发挥作用吗？

.d.ts

 文件的作用

「为 JavaScript 代码或第三方库补充类型」

// types/jquery.d.tsdeclare var $: any;

「为非代码资源声明模块（如 SVG、CSS、JSON 等）」

在项目中引入非代码资源时，TypeScript 默认是无法识别的，比如：

import logo from './logo.svg';

// types/shims-svg.d.tsdeclare module '*.svg' {  const content: string;  export default content;}

「定义全局变量或类型」

// types/global.d.tsdeclare const VITE_APP_VERSION: string;

这样就可以在任何文件中使用，不报错、还能获得类型提示。

「定义环境变量、全局命名空间等复杂类型结构」

例如：

interface Window {  myGlobalAPI: () => void;}declare namespace MyLib {  type Options = {    debug: boolean;  };}

「补充已有模块的类型信息（模块扩展）」

你可以给已有模块添加自定义类型，不需要修改原始库代码：

// types/vue-router.d.tsimport 'vue-router';declare module 'vue-router' {  interface RouteMeta {    auth?: boolean;  }}

为什么写一个 

declare

 就能解决报错？

TypeScript 是强类型语言，它在编译时会尝试为每一个变量、函数、模块、类型标识符 “找到定义”。当我们引入一个没有类型声明的第三方模块时，比如：

import something from 'vs-tree';

但当你写上：

// shims-vue.d.ts 或任何 .d.ts 文件declare module 'vs-tree';

为什么 

.d.ts

 文件不引入也能生效？

这要从 TypeScript 的文件识别机制说起。

要包含哪些文件

要排除哪些文件

要使用哪些类型库（如 DOM、ESNext）

要如何解析模块路径（如路径别名）

在 

tsconfig.json

 的 

include

 范围内

{  "include": ["src", "types"]}

被编译器当作 “全局声明” 文件识别

// types/global.d.tsdeclare const __APP_VERSION__: string;

被放置在默认类型目录下（如 

@types

）

任意 

xxx.d.ts

 文件都能生效吗？