TypeScript实践总结
2021-12-03 15:03 曾左 阅读(174) 评论(0) 编辑 收藏 举报TypeScript 实践总结
以下将 TypeScript 简称 ts
一、为什么要学
1. 减少 bug，提高质量
强语言，语法等方面异常，编译阶段“提前”报错
支持面向对象，软件设计与工程化更为成熟，更容易做单元测试、持续集成等
2. 提高效率
语言简单易学
ide 支持更为友好，如：智能提示、变量强关联、重构等
绝大部分 常用类库 已经支持
3. 业内趋势
GitHub 年度报告：TypeScript 超越 C++成第四大语言
4. 代表作品
越来越多前端类库改用 ts
- vscode
- node 下一代-deno
- angular
- nest
- apollo-client
- .... 不一一举例
二、练级攻略
1. 基础语法
2. 编码风格
3. 核心功能
接口
泛型
高级类型
程序设计
4. 编译原理
三、适用场景
尤其适合：类库、组件等公共组件开发
四、推荐 ide
webstorm > vscode
优点： 开箱即用（无需安装插件）、易于重构【个人觉得非常重要】
缺点： 收费、没 idea 成熟
五、推荐书籍
推荐级别 A，理由：介绍全面，适合入门及进阶
推荐级别 B，理由：入门及编译简介
六、tsconfig.json 配置 demo
{
"compilerOptions": {
"pretty": true,
"module": "commonjs",
"importHelpers": true,
"target": "es5",
"lib": [
"es2015",
"es2016",
"es2017",
"es2018",
"es2019",
"dom",
"ES2015.Promise"
],
"allowJs": true,
"sourceMap": false,
"baseUrl": "./src",
"outDir": "./build/src/",
"paths": {
"@/*": [
"*"
],
"tslib": [
"path/to/node_modules/tslib/tslib.d.ts"
]
},
//编译异常时候，禁止发行
"noEmitOnError": true,
//禁止隐性 any
"noImplicitAny": true,
//严格的 null 检查，避免如可选参数，未判断 undefined 引发的问题等
"strictNullChecks": true,
//未使用的变量，抛出错误
"noUnusedLocals": true,
//未使用的参数，抛出错误
"noUnusedParameters": true,
//检查函数是否有返回值
"noImplicitReturns": true,
//启用严格模式，对类型赋值、类型转换更严格
"strict": true,
//https://mariusschulz.com/blog/downlevel-iteration-for-es3-es5-in-typescript
"downlevelIteration": true
},
"typeRoots": [
"node_modules/@types",
"typings"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"test"
]
}
八、ts 的缺点
1. 不得已的 any 类型
存在后的坑： any 类型，不支持强类型、智能提示等，相当于把 ts 回退到 js
存在原因：
（1）兼容性，老代码及外部依赖如 webapi 接口返回参数类型不确定，只能用 any 类型
（2）类库不健全，lid.d.ts 不全面，导致部分属性、方法的类型描述不完整，得通过添加|any 组合类型才能满足需求，不得不用 any 类型。
改进办法： 有明确类型的通过组合类型来完成类型定义，如：age:int | any，比纯 any，IDE 能添加相关的属性智能提示及部分错误使用场景下的错误提示
2. 复合类型没必要
组合类型、交叉类型、索引类型、映射对象类型，意义不大，适用场景少，易滥用，明显降低可读性。js 的问题是语言太随意，导致很多程序员把大量的时间浪费在语法上，多向 golang 学一下
3. 面向对象不彻底
不支持重载：c#、java 没抄好？不是，是底层 js 不支持
4. JS 本身诸多缺点
（1）js 是门非常容易出 bug 的语言，当下统计数据多数不准。原因在于生产环境 js 运行在客户端浏览器，出了 bug，要么没前端监控，要么没被 QA 发现。
（2）js 上手很容易，学好很难，一种需求，有 N 种编码方案，沟通交流成本很高
