news 2026/10/15 16:08:42

TypeScript 07:工程化——import type、声明文件与 tsconfig

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
TypeScript 07:工程化——import type、声明文件与 tsconfig

TypeScript 07:工程化——import type、声明文件与 tsconfig

有 JS 基础即可阅读。建议先读第 01~06 课。

1. 类型和值分开搬运:import type

类型只活在编译期,所以「搬类型」有专用通道——运行时整句擦除:

importtype{User}from'./types'// 只搬类型,运行时这行不存在import{createUser,typeUser}from'./user'// 值和类型混着搬,类型用内联 type

很多项目开启verbatimModuleSyntax:带 type 修饰的导入完全丢弃,不带的原样保留——所以纯类型导入不写type会直接报错。

好处:意图明确(一眼看出搬的是类型);类型模块不会被错误打进产物;循环引用时更安全。

2. .d.ts:只有类型清单、没有实现的文件

声明文件 = 「编译器的通讯录」,三个来源:

  1. 社区维护:@types/lodash这类包(DefinitelyTyped 仓库)
  2. 库自带:vue、pinia 把类型打进包里,不用额外装
  3. 自己写:库缺类型时的占位手段

自己写的两种典型形态:

// shims.d.ts —— 用 declare module 占位declaremodule'*.vue'// 让编译器认识 .vue 后缀declaremodule'untyped-pkg'{exportfunctionlegacyTransform(input:string):string}
// 引用别人的声明集(三斜线指令)/// <reference types="vite/client" />// 一行就能让 import.meta.env 拥有 Vite 环境变量的类型

关键认知:声明文件让编译器「认识」一个东西,但不保证它运行时真的存在——编译通过 ≠ 运行有货。

3. tsconfig 的 strict 家族

strict: true是 7 个开关的打包,前三个最值得认识:

开关管什么你在哪见过它的报错
noImplicitAny不许「悄悄的 any」(参数不标、空数组乱装)implicitly has an 'any' type
strictNullChecksnull/undefined 必须显式处理Object is possibly 'undefined'(第 02 课)
useUnknownInCatchVariablescatch 到的变量是 unknown'e' is of type 'unknown'

其余四个(strictFunctionTypes/strictBindCallApply/strictPropertyInitialization/noImplicitThis)日常较少单独遇到,保持开启即可。

项目常见的安全加分项:noUncheckedIndexedAccess(第 05 课的读取带 undefined)、noUnusedLocals/noUnusedParameters(写了不用的变量会报错)、verbatimModuleSyntax。

收紧策略:新项目直接全开;老项目按noImplicitAny→strictNullChecks→ 全套 strict 的顺序逐步收紧,别一次全开把报错刷成瀑布。

4. 高频报错速查

报错人话
Could not find a declaration file for module 'x'库没类型:装@types/x或自己 d.ts 占位
Parameter 'x' implicitly has an 'any' typenoImplicitAny 拦住了瞎猜
'e' is of type 'unknown'catch 变量先收窄再使用
... must be imported using a type-only importverbatimModuleSyntax:纯类型导入要写type
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/15 16:07:46

Qt QMediaPlayer 视频播放从零到实战:环境配置、信号时序与故障排查

1. 从零跑通 QMediaPlayer&#xff1a;为什么你的第一行播放代码总是无声无息很多人第一次在 Qt 里写视频播放&#xff0c;代码不超过十行&#xff0c;编译一次通过&#xff0c;运行起来却是一片漆黑或者干脆闪退。这不是你代码写错了&#xff0c;而是 QMediaPlayer 这套东西的…

作者头像 李华
网站建设 2026/10/15 16:07:33

Vue Element UI下拉框@change获取完整对象:三种方案解析

做后台管理系统&#xff0c;下拉框是躲不开的关卡。最典型的就是“选择负责人”&#xff1a;下拉展示的是用户姓名&#xff0c;提交给后端的是用户 id&#xff0c;可一旦选中之后&#xff0c;我们需要立刻拿到这个用户的部门、邮箱、头像等整块信息去渲染别的区域。大多数人的第…

作者头像 李华
网站建设 2026/10/15 16:07:05

SpringBoot + ElementUI 检索功能实战:动态查询、分页与状态管理

1. 检索功能为什么总在真实项目里翻车做过管理后台的人都有一个共识&#xff1a;列表页好写&#xff0c;检索难做。刚入行那会儿&#xff0c;我接手一个后台系统&#xff0c;需求文档上写着"支持按名称模糊查询"&#xff0c;我三下五除二写了个like %keyword%就交差了…

作者头像 李华
网站建设 2026/10/15 16:06:48

源码编译完全指南:从环境准备到定制修改与避坑排查

很多人觉得源码编译是件麻烦事&#xff1a;环境配半天&#xff0c;依赖缺这个缺那个&#xff0c;编译又报错&#xff0c;折腾一晚上连个可执行文件都没见着。但如果你有定制需求——比如想给某个开源项目加上自己需要的功能、裁剪掉用不到的模块、针对特定CPU做指令集优化&…

作者头像 李华
网站建设 2026/10/15 16:06:47

Spring中BeanFactoryPostProcessor与BeanPostProcessor的区别与实战避坑

1. 从一次线上事故说起&#xff1a;为什么这两个接口总被搞混前阵子帮一个朋友排查问题&#xff0c;他们项目里有个自定义组件&#xff0c;想在 Spring 容器启动时动态修改某些 Bean 的属性值。代码写完了&#xff0c;本地跑得好好的&#xff0c;一上测试环境就出幺蛾子——有些…

作者头像 李华