引入typescript
“动态类型一时爽，代码重构火葬场“ [笑哭]。这句话的影响力真的太强了，TypeScript完美避免了赶去火葬场的时间。 TS作为JS的超集，具备灵活的类型系统，不仅可以在coding期间自检，还能增强代码的可读性，并提供了 any 类型进行缓冲。
- 添加
tsconfig.json文件
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"isolatedModules": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"pretty": true,
"sourceMap": true,
"outDir": "./dist",
"baseUrl": ".",
"typeRoots": [
"./typings"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
],
},
"include": [
"./**/*.ts"
],
"exclude": [
"node_modules",
"dist",
"typings",
"miniprogram_dist",
"config"
]
}
添加
typings文件夹
typings的github地址
后期增加自动更新，目前是手动维护利用
gulp监听ts后缀名的文件，打包成js文件
// 引入ts相关文件
const ts = require('gulp-typescript');
const tsProject = () => ts.createProject('tsconfig.json')();
// 解析ts文件
'compile:ts': (done) => {
return gulp
.src(['**/*[!.d].ts'], { cwd: Paths.src })
.pipe(
alias({
paths: {
'@': path.resolve(__dirname, '../src'),
},
})
)
.pipe(tsProject())
.js.pipe(gulp.dest(Paths.dest), done);
}
选择gulp，主要是因为这个项目本身就用gulp进行打包。
Tips:
- 如果是新建项目，可以下载最新的微信开发者工具，在创建小程序时，选择typescript相关。
- 小程序仅支持运行 JS 文件，因此所有的 TS 文件都默认不会被打包上传。
- ts在vscode的接口转换插件： Paste JSON as Code
增加路径别名
// 引入别名插件
const alias = require('gulp-path-alias');
// 监听处理
'copy:js': (done) => {
return gulp
.src(['**/*.{js,wxs}'], { cwd: Paths.src })
.pipe(
alias({
paths: {
'@': path.resolve(__dirname, '../src'),
},
})
)
.pipe(
replace(/{{{\s*(\S*)\s*}}}/g, (match, letter) => env[letter] || match)
)
.pipe(gulp.dest(Paths.dest), done);
}