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

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

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

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

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

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

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

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

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

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

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

自己写的两种典型形态:

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

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

3. tsconfig 的 strict 家族

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

开关 管什么 你在哪见过它的报错
noImplicitAny 不许「悄悄的 any」(参数不标、空数组乱装) implicitly has an 'any' type
strictNullChecks null/undefined 必须显式处理 Object is possibly 'undefined'(第 02 课)
useUnknownInCatchVariables catch 到的变量是 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' type noImplicitAny 拦住了瞎猜
'e' is of type 'unknown' catch 变量先收窄再使用
... must be imported using a type-only import verbatimModuleSyntax:纯类型导入要写 type
相关推荐
1024奇点20 小时前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
Csvn20 小时前
WASM
前端
Warren2Lynch20 小时前
C4 模型详解:利用 Visual Paradigm 可视化软件架构的综合指南
开发语言·uml
Knight_AL21 小时前
Java 文件下载时文件名中的 `#` 被转换成 `%23`?一次 URL 编码与解码问题排查
java·开发语言
修己xj21 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing031 天前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿1 天前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
by209991 天前
C++ 智能指针的所有权与使用
开发语言·c++·经验分享
砚底藏山河1 天前
python量化自定义周期 K 线合成
java·开发语言·数据库·python·金融
IT召唤狮1 天前
开源企业级零信任项目Pangolin,零信任能挡住PHP核弹漏洞吗?
开发语言·开源·php