本文主要记录:解决微信小程序原生开发引用TypeScript过程中遇到的一些问题。
微信小程序引入TypeScript步骤
一、新建Typescript项目
微信小程序开发者工具自带Typescript的开发模式。
在创建项目时,选择Typescript这个选项,如下图所示。
但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持。
二、现有项目引入Typescript
一般情况下我们的小程序项目都有自己公司的后台,所以上面的路子行不通,那我们在现有js框架的小程序中如何引入Typescript。
1. 参考第一步,新建一个使用云服务的Typescript项目;
2. 新建项目里会自动新增一个typing
文件夹(如下图),把这个文件夹拷贝到你的项目中;
3. 在项目的package.json文件中增加Typescript配置。
如果package.json文件不存在,请用npm init命令生成。该文件修改完后,请运行npm install命令生成本地的依赖。
{
"name": "miniprogram",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"@yqb/miniprogram-switch-env": "^1.0.3",
"@typescript-eslint/parser": "^1.6.0",
"typescript": "^3.0.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"tsc": "node ./node_modules/typescript/lib/tsc.js"
},
"repository": {
"type": "git",
"url": "http://code.paic.com.cn/yqb_h5_app/yqbrebatemini.git"
},
"keywords": [
"ccc1314!"
],
"author": "",
"license": "ISC"
}
4.为你的项目增加一个tsconfig.json文件,内容如下
{
"compilerOptions": {
"strictNullChecks": true,
"noImplicitAny": true,
"module": "CommonJS",
"target": "ES5",
"allowJs": false,
"experimentalDecorators": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"alwaysStrict": true,
"inlineSourceMap": true,
"inlineSources": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strict": true,
"removeComments": true,
"pretty": true,
"strictPropertyInitialization": true,
"lib": [
"es5"
],
"typeRoots": [
"./typings"
]
},
"include": [
"./**/*.ts"
],
"exclude": [
"node_modules"
]
}
5. 修改project.config.json 文件,添加预处理命令
"scripts": {
"beforeCompile": "npm run tsc",
"beforePreview": "npm run tsc",
"beforeUpload": "npm run tsc"
},
6. 确保在"微信开发者工具"中启用了预处理命令。
小程序预览、编译、上传代码时提示“预处理命令失败!”问题解决
在小程序预览、编译、上传代码时提示“执行自定义*预处理命令失败”。
问题原因:
因为项目里使用了Typescript,并且有Typescript编译问题没有解决导致的。
解决问题
想要知道是哪些TS检查问题导致编译不过,需要通过下面步骤排查:
1、打开调试器的Preserve log
;
2、清除日志,重新执行一次编译;会出现相关报错信息。
排查方法一:Found 2 errors.上面的日志就是Typescript编译出错的日志,可以按照错误类型进行排查;
npm ERR! /Users/用户名/.npm/_logs/2021-09-24T10_17_00_314Z-debug.log
排查方法二:报错日志里有详细日志保存在电脑里,你可以去找到日志看看出问题的具体原因。
解决方案
最终的目的是,把Typescript的编译报错全部解决,再执行编译或上传,就通过了。
- 在
tsconfig.json
文件中的exclude
中添加$node_modules
,
"exclude": [
"node_modules",
"$node_modules"
]
- 遇到TS编译报错:TS2583: Cannot find name 'Promise'. Do you need to change your target library? Try changing the
lib
compiler option to es2015 or later
解决办法:tsconfig.json 中 添加"noImplicitAny": false
"compilerOptions": {
"skipLibCheck": true,
},
- typescript提示implicitly has an 'any' type,怎么解决?
解决办法:tsconfig.json 中 添加"noImplicitAny": false
总之就是需要修改tsconfig.json文件,最后完整文件内容如下:
{
"compilerOptions": {
"strictNullChecks": true,
"noImplicitAny": false,
"module": "CommonJS",
"target": "es2015",
"allowJs": false,
"experimentalDecorators": true,
"noImplicitThis": true,
"noImplicitReturns": true,
"alwaysStrict": true,
"inlineSourceMap": true,
"inlineSources": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strict": true,
"removeComments": true,
"pretty": true,
"strictPropertyInitialization": true,
"lib": [
"es5",
"es2015.promise"
],
"typeRoots": [
"./typings"
],
"skipLibCheck": true,
},
"include": [
"./**/*.ts", "pages/home/home.js"
],
"exclude": [
"node_modules",
"$node_modules"
]
}
暂无评论