typescript


## 写在前面vue

注:如下 TypeScript 简写为 ts。webpack

2018 年 Vue 3.0 用 ts 重写,你多少能嗅到一些行业的变化,变化的本质是对工程上成本和收益的思考。2.0 选用 Flow 进行静态代码检查,3.0 直接使用 ts 重写,Flow 的投入显然能 cover 其自己带来成本。ts 相对于 Flow 在成本方面是较高的,毕竟 ts 是一门语言而 Flow 只是个工具,在收益方面 ts 带来的是整个编程体验的提高,搭配 VSCode 能够作更多的智能提示和校验。git

Angular 也从 2.0 开始采用 TS 编写,三大 MVVM 框架有两个用 ts 编写,是时候入坑了。github

咱们大致的学习路径是这样:
- 一、先用 webpack 配置一个简单的工程,这个工程能实时编译 ts 到 js;
- 二、从官网上学习语法,在上面工程中编写 Demo 加深理解;
- 三、结合框架和场景学习 ts 应用。web

## 纯 ts 工程构建vue-cli

原本打算直接从 webpack 官网考几段配置就把工程搭建起来,可是遇到了各类奇奇怪怪的问题折腾了一下午没搞定,后来转变思路从 vue-cli 脚手架入手,采用减法的形式获得了一个极简脚手架。typescript

为了记念这段折腾,我 release 了一个版本,有兴趣的能够去看看:https://github.com/xiaoqiang-zhao/typescript-study/releases/tag/0.1编程

而后从 webpack 官网找到 [webpack-typescript](https://webpack.js.org/guides/typescript/) 配置,添加了 loader 等一些配置,升级了 webpack 版本(须要 4.0 以上),到此为止环境终于跑起来了:https://github.com/xiaoqiang-zhao/typescript-study/releases/tag/0.2框架

后面的学习 Demo 都在开源项目 [typescript-study](https://github.com/xiaoqiang-zhao/typescript-study) 中编写。文件目录结构也简单明了:ide

${typescript-study}
├── build 构建和启动开发环境
└── src 源码
├── main.js 入口文件
└── ts-demo ts demo 源码

demo 源码和 ts 官方文档一一对应。

花夏:
666

赵晓强vue群:
想一块儿入坑学习的能够找我加 Collaborators,免费培训开源协做流程

赵晓强vue群:再放一遍工程地址:https://github.com/xiaoqiang-zhao/typescript-study

相关文章
相关标签/搜索