TypeScript总结：18、常见错误与易混淆点

TypeScript 常见错误与易混淆点TypeScript 初学阶段最容易混淆的内容通常不是语法本身而是“类型检查”和“运行时行为”之间的区别。本文按问题场景进行对照整理。一、any 和 unknown 混用错误倾向遇到不确定类型的数据直接使用anyfunctionprintValue(value:any):void{value.toUpperCase();}any会让编译器放弃大量检查代码可能在运行时才出错。推荐写法functionprintValue(value:unknown):void{if(typeofvaluestring){console.log(value.toUpperCase());}}记忆不确定但希望安全使用unknown明确知道类型但编译器推断不出来时才考虑类型断言。二、类型断言不是类型转换错误写法constvalue100asunknownasnumber;上面只是欺骗编译器运行时的值仍然是字符串。正确转换constvalueNumber(100);对比操作作用value as Type修改编译器对类型的判断Number(value)运行时转换成数字String(value)运行时转换成字符串三、void 和 never 混淆functionlogMessage(message:string):void{console.log(message);}functionthrowError(message:string):never{thrownewError(message);}类型含义void函数正常执行结束但没有返回有意义的值never函数不会正常结束例如抛出异常或无限循环不要因为函数“没有返回值”就一律写成never。四、数组和元组混淆数组constlist:(string|number)[][Tom,18,JavaScript];数组强调可以保存多个元素长度通常不固定。元组constuser:[string,number][Tom,18];元组强调固定长度和固定顺序。判断方法数据数量和结构不固定数组。每个位置都有明确含义元组。字段较多、可读性要求高优先考虑对象或接口。五、getter 和 setter 叫反正确对应关系classPerson{private_name:string;constructor(name:string){this._namename;}getname():string{returnthis._name;}setname(value:string){this._namevalue;}}get读取属性。set设置或修改属性。使用时不需要加括号constpersonnewPerson(孙悟空);console.log(person.name);person.name猪八戒;六、public、protected 和 private 混淆修饰符类内部子类类外部public可以可以可以protected可以可以不可以private可以不可以不可以典型错误classPerson{privatename:string孙悟空;}classStudentextendsPerson{printName():void{// 编译错误private 成员不能被子类直接访问// console.log(this.name);}}如果子类需要访问应考虑使用protected或者由父类提供方法和存取器。七、readonly 和 private 不是一回事特性readonlyprivate主要作用防止重新赋值限制访问范围类外部能否读取通常可以不可以直接读取子类能否读取取决于其他修饰符private 不能直接读取是否允许初始化声明处或构造函数中可以根据访问范围决定如果属性需要公开读取但不能修改可以使用readonly如果属性连外部读取都不应该允许则使用private。八、继承时忘记 super子类声明构造函数时必须先调用父类构造函数classAnimal{constructor(publicname:string){}}classDogextendsAnimal{constructor(name:string,publicbreed:string){super(name);}}在调用super之前不能使用this。九、抽象类直接实例化错误写法abstractclassAnimal{abstractrun():void;}// 编译错误// const animal new Animal();正确写法classDogextendsAnimal{run():void{console.log(狗在跑);}}constdognewDog();抽象类是模型具体子类才是实例。十、implements 不会自动生成代码interfacePerson{name:string;sayHello():void;}classStudentimplementsPerson{constructor(publicname:string){}sayHello():void{console.log(Hello);}}implements只负责检查结构不会自动生成name或sayHello。十一、泛型和 any 混淆不推荐functionidentity(value:any):any{returnvalue;}推荐functionidentityT(value:T):T{returnvalue;}泛型保留参数和返回值之间的类型关系any通常不会保留这种关系。十二、strictPropertyInitialization 报错开启严格检查后类属性需要在声明时或构造函数中初始化classUser{name:string;constructor(name:string){this.namename;}}不要为了消除错误而随意使用any。应该补充初始化、调整类型或者根据确切情况使用可选属性。十三、tsconfig 文件范围配置错误现象执行npx tsc后提示没有输入文件或者某个文件没有被编译。排查{include:[src/**/*.ts],exclude:[node_modules,dist]}检查当前命令行目录是否包含tsconfig.json。源文件是否真的位于src。文件后缀是否是.ts。exclude是否排除了源目录。十四、rootDir 和 outDir 配置不当推荐{compilerOptions:{rootDir:src,outDir:dist}}这样可以保持src/index.ts → dist/index.js src/utils/a.ts → dist/utils/a.js源码和构建产物分离后更容易部署和清理。十五、Webpack 依赖遗漏Webpack 配置中使用了某个插件就必须安装对应依赖constHtmlWebpackPluginrequire(html-webpack-plugin);对应安装npminstall--save-dev html-webpack-plugin类似地使用ts-loader、babel-loader或clean-webpack-plugin时也要检查依赖是否存在。十六、Loader 执行顺序写反需要先用ts-loader处理 TypeScript再用babel-loader转换 JavaScript 时use:[{loader:babel-loader},{loader:ts-loader}]Webpack 通常从右向左执行 loader因此右侧的ts-loader先执行。十七、把 Babel 当成 TypeScript 类型检查器Babel 主要负责语法转换不负责完整的 TypeScript 类型检查。项目中仍然应该执行npx tsc--noEmit这样可以在不生成文件的情况下检查类型问题。十八、原笔记中的几个易错点整理资料时需要特别注意读取属性的是getter修改属性的是setter。抽象类示例中的子类应继承正确的类名例如Animal。Webpack 配置使用html-webpack-plugin时安装命令不能漏掉它。strict建议在项目配置中显式开启不要依赖模糊的默认值说明。十九、排错总流程遇到 TypeScript 问题时可以按下面顺序检查语法是否正确 ↓ 变量和参数类型是否正确 ↓ 是否误用了 any、断言或 never ↓ 类、接口、泛型关系是否正确 ↓ tsconfig 是否匹配文件和运行环境 ↓ Webpack、Babel 依赖和 loader 顺序是否正确二十、本章小结先区分编译期类型和运行时行为。优先使用精确类型谨慎使用any和强制断言。明确数组、元组、接口、抽象类和泛型各自的职责。工程问题优先检查配置、依赖、输入输出目录和 loader 顺序。