Typescript is a typed superset of Javascript that compiles to plain Javascript. Any browser. Any host. Any OS. Open source. ———— Typescript 官网1.第一时间发现类型错误
据 rollbar 统计，在前端项目中 10 大错误类型如下图所示：
嘿嘿，看着这些错误眼不眼熟？
由于 Javascript 是一门很灵活的语言，所以以上这些错误往往要在代码运行时才能发现。
2.智能提示在使用 Javascript 时，编辑器的智能提示往往很有限，比如提示你最近输入的变量。
但是基于 Typescript，由于知道当前变量是什么类型，所以编辑器能经过类型推导后为你提示这个变量的所有属性，以及对于函数的参数进行提示和校验。
此外，对于一般的 Javascript 项目也可以自己编写 .d.ts 声明文件，来获取类型推导能力。至于其他的优点在这里就不展开了...
综上，在项目中使用 Typescript 能让你极大地提高工作效率，并减少大量的类型错误。
Typescript 初体验由于目前业务项目中的框架用的是 Vue.js，众所周知 2.x 版本对于 Typescript 支持的不是很好，所以就打算先搞个工具函数库项目试试水。
语言学习略，这个各种资料很多，这里就不赘述了...
项目架构- 项目入口：
src/index.ts，没有实质内容全是export * from '...'（都是纯函数） - 实际代码：根据工具函数分类放在不同的文件中，例如
- string（字符串相关）
- env（环境探测）
- url（链接地址）
- ...
- 单元测试：
test/ - 文档目录：
docs/
注意：相关工具链package.json中的sideEffects字段要写成false，这样可以方便业务代码打包时tree-shaking。
之前对于 Typescript 一直在观望的原因之一就是相关工具链的搭配还不是很成熟。不过现在倒是基本明晰了：
- 1.代码转译
babel（[译] Typescript 和 Babel：美丽的结合）
Typescript 和 babel 都可以将你的 ES6+ 代码转成 ES5。
但在 Babel v7 之前将两个独立的编译器（Typescript 和 Babel）链接在一起并非易事。编译流程变为：TS > TS Compiler > JS > Babel > JS 。
现在只要安装 @babel/preset-typescript 这个包就能让你完美结合 babel 和 Typescript。
- 2.代码检查
eslint（The future of Typescript on ESLint）
再也不用纠结到底用 tslint 还是 eslint 了，Typescript 官方已经钦定了 eslint（Migrate the repo to ESLint #30553）。
- 3.单元测试
jest（[RFC] Migrate Jest to Typescript #7554）
嘿嘿，Facebook 的 jest 和 yarn（Yarn's Future - v2 and beyond #6953） 都抛弃自家的 Flow 转投 Typescript 的怀抱了
- 4.代码打包
rollup（rollup 在 17 年底就使用 Typescript 重写了）
虽然 rollup 自己用的是 rollup-plugin-typescript，不过项目中还是选了 rollup-plugin-typescript2。
- 安装各种依赖
- 配好各种配置文件（eslint、babel、commitlint、jest），其中最重要的是
tsconfig.json - 源代码的文件名后缀由
.js改成.ts（单测的文件也改） - 然后 Typescript 的静态代码类型检查就会告诉你有什么错误
- 看情况改代码，或者是加 ignore 注释（有时甚至需要改 tsconfig 的配置）
Typescript 官方有一套基于 jsdoc 的文档标准 tsdoc。
export class Statistics { public static getAverage: number { return / 2.0; }}
于是顺藤摸瓜找到 typedoc 这个自动文档网站生成器。但这玩意儿的常规操作就是读取源代码，然后 duang 地一下，生成一堆页面。
虽然这样解决了文档生成，但是没法进行开发时实时预览文档。
自动生成0.失败尝试：结合 vuepress
由于 typedoc 能导出 md 文件，所以尝试过将其结合 vuepress。不过由于 typedoc 在生成时会先清空目标目录下所有文件，折腾起来太麻烦（比如做个插件）。
1.下策：手动触发文档生成
没啥好说的，适用于有毅力的同学。
2.中策：监听源文件变化，自动触发文档生成
虽然能自动生成文档页面了，不过预览时没法自动刷新页面。
3.上策：借助 webpack、gulp、grunt 自动生成文档并刷新页面（正好有这三者的 typedoc 插件）
说到开发时自动刷新页面，第一个自然想到 browser-sync。
- 虽说 webpack 无所不能，不过杀鸡焉用牛刀
- grunt 这玩意儿有点儿落伍了
- gulp 正好以前捣鼓过，加这个小需求正好
最后这里贴一下 gulpfile.js 的代码，节省一下也有相关需求同学的时间吧。
const gulp = requireconst typedoc = requireconst browserSync = require.createconst runTypeDoc = => gulp .src .pipe)const reload = => { browserSync.reload done}const runBrowserSync = => { browserSync.init done}const watch = => gulp.watch)gulp.task)
以上 to be continued...
参考资料- Typescript 官网
- Typescript 解决了什么痛点？ - justjavac的回答 - 知乎
- @babel/preset-typescript
- [译] Typescript 和 Babel：美丽的结合
- The future of Typescript on ESLint
- Migrate the repo to ESLint #30553
- [RFC] Migrate Jest to Typescript #7554
- Yarn's Future - v2 and beyond #6953
- rollup 在 17 年底就使用 Typescript 重写了
- rollup-plugin-typescript2
- tsdoc
- typedoc
- browser-sync
- typedoc 插件
- rollbar
免责声明：本平台仅供信息发布交流之途，请谨慎判断信息真伪。如遇虚假诈骗信息，请立即举报
举报
