本文主要记录:解决微信小程序原生开发引用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的编译报错全部解决,再执行编译或上传,就通过了。

  1. tsconfig.json文件中的exclude中添加$node_modules
    "exclude": [
    "node_modules",
    "$node_modules"
    ]
  1. 遇到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,
    
    },
    
  1. 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"
    
    ]
    
    }