如何基于 Typescript 开发快应用
TypeScript 是一种由微软开发的开源、跨平台的编程语言；它是 JavaScript 的超集，最终会被编译为 JavaScript 代码。用 TypeScript （以下简称 ts）做前端开发，时下可谓如火如荼。本篇文章即在于，探讨如何基于 TypeScript 来开发快应用。
早在 2018 年，Babel 团队就宣布 Babel7 支持 TypeScript。@babel/preset-typescript ，它正是 Babel 里用来将 ts 语法转换成 js 的重要工具。接下来说明下具体使用步骤：
安装依赖：
npm i -D @babel/preset-typescript
// OR
yarn add --dev @babel/preset-typescript
配置 babel
接着配置 babel.config.js（项目根路径下，无则新建）：
module.exports = {
webpack: {
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "babel-loader",
options: {
cwd: __dirname,
},
},
],
},
],
},
},
};
配置快应用
在项目根目录下新建 quickapp.config.js，做如下配置，告知 Webpack 使用哪些插件：
module.exports = function (api) {
api.cache(true);
return {
presets: ["@babel/preset-typescript"],
plugins: [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-transform-typescript",
],
babelrcRoots: [".", "node_modules"],
};
};
这样就使得 script 标签内代码、以及引用外部 ts 文件，都可用 ts 语法；同时也可以使用 feature API。上面一系列操作是：首先快应用 .ux 文件已经由 Babel 去处理。这里指定 Babel 转换规则，使其支持 .ux 文件中的 script 标签内 ts 语法。然后在 quickapp.config.js 加上 webpack 的文件处理规则，指定引用的外部 .ts 文件由 babel-loader 去处理。
这里有一个重要点就是，如此配置就可以使得使用 feature 接口不报错。原因在于：Babel 是个语法编译工具，只负责当前文件内容的编译。并不会像 Webpack 那样会去遍历模块引用。先用 babel-loader 把代码给转译了，然后拦截里面对 feature 模块的请求。使得 Webpack 不会当它是模块引用，就不会去对该模块进行搜索。这样就不会因为没有这个模块而报错。而如果采取，基于 ts-loader 方式，它会去校验模块存在与否，就会跟快应用 feature API 冲突， 这就势必会报错。这也是更推荐使用 babel-loader 的缘由。
有在 Github 建立开源项目：Quickapp TypeScript Template，基于 babel-loader 方式，使得可以用 TypeScript 开发快应用；同时，为了做到开箱即用，有对模版做了加工优化处理；如果您有这方面诉求，可参考之。当然，也欢迎提出您宝贵的建议或意见。
