在小程序中使用typescript

Mr_SPM
5,184 阅读2分钟

开启typescript要解决的问题

  • 启用typescript
  • 在微信开发者工具编译的时候，执行tsc命令编译ts文件
  • 获取微信的types
  • tsconfig的设置

启用typescript

  1. 引入typescript
    npm install typescript --save-dev
yarn add typescript  --dev
  2. 配置tsconfig.json 在项目目录下执行命令，自动生成tsconfig.json文件
    tsc --init
    下面是配置demo
    {
 "compilerOptions": {
     /* Basic Options */
     "target": "ES5",
     /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "CommonJS",
     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or "strict": true,
     "typeRoots": ["typings"], /* List of folders to include type definitions from. */
     "esModuleInterop": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
     "allowJs": false, /* 不编译js文件*/
     "experimentalDecorators": true,
     "noImplicitThis": true,
     "noImplicitReturns": true,
     "alwaysStrict": true,
     "inlineSourceMap": true,
     "inlineSources": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "removeComments": true,
     "pretty": true,
     "strictPropertyInitialization": true,
     },
     "include": [
     "./**/*.ts",
     ],
     "exclude": [
     "node_modules",
     "miniprogram_dist",
     "**/*.spec.ts"
     ]
 }

作为typescript的配置以及结束，这时候需要让微信开发者工具在编译时，运行tsc编译我们的ts文件。

在微信开发者工具编译的时候，执行tsc命令编译ts文件

  1. 修改项目package.json，增加script命令

    "scripts": {
+    "tsc": "./node_modules/typescript/bin/tsc",
+   "compile": "tsc"
},

  2. 开发者工具配置 启用自定义处理命令
    点击开发者工具右上角

    开启自定义处理命令

    这样，在小程序编译，预览，上传前，微信开发者工具都会自动编译ts文件了。

另外一种解决方案

在tsconfig.json，compilerOptions属性追加

"watch": true

执行tsc ,开启监听模式， 这样每个ts文件变化都会实时编译成js文件。

如果不需要这些js文件，个人感觉还是使用第一种方案比较好。

获取小程序types

在小程序创建时，选择typescript模版，会自动生成一个typings文件夹，copy过来即可。
目前微信已经有了官方声明文件npm包：下面是地址
文档地址 使用官方npm包，需要修改原本的tsconfig.json文件，移除默认的lib.dom(因为小程序没有dom这个概念)。移除typeRoots让他去取node_modules中的声明文件

+ "lib": ["es6"],
- "typeRoots": [
-   "typings"
-  ],

eslint校验typescript

现在的官方包已经更新，文档地址 目前安装eslint 6以上版本配合prettier会有错误，所以建议安装eslint5.16.0。具体可以看另外一篇文档

  1. 安装eslint
    yarn add eslint@5.16.0  --dev
yarn add @typescript-eslint/parser -dev
yarn add @typescript-eslint/eslint-plugin -dev
  2. 配置.eslintrc.js
    parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],

在vscode中校验ts文件

  1. 安装eslint插件
  2. 首选项->设置 选择直接操作 settings.json，追加typescript校验
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
    +    "typescript"
    ],
avatar
文章
阅读
粉丝