vue3项目中加入typescript配置

全局安装typescript

npm install -g typescript

tsc -v查看安装的ts版本

安装typescript

npm install typescript --save-dev

命令行运行tsc --init生成tsconfig.json文件
tsconfig.json配置详情

typescript配置相关

安装@vue/cli-plugin-typescript

@vue/cli-plugin-typescript内部预置了ts-loader的配置，无需单独配置
@vue/cli-plugin-typescript介绍

npm install @vue/cli-plugin-typescript --save-dev

image.png

vue.config.js配置

增加extension，引入 ts/tsx 文件时不必加后缀

module.exports = {
    chainWebpack: config => {
          config.resolve.extensions
            .add('ts')
            .add('tsx');
    }
}

typescript-eslint配置

@typescript-eslint/eslint-plugin介绍
安装@typescript-eslint/eslint-plugin @typescript-eslint/parser

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

安装@vue/eslint-config-typescript
@vue/eslint-config-typescript介绍

npm install @vue/eslint-config-typescript --save-dev

修改.eslintrc.js

module.exports = {
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended'
    ],
    plugins: [
        'vue',
        '@typescript-eslint'
    ],
    rules: {
        '@typescript-eslint/no-unused-vars': 'error',
        // 允许非空断言
        '@typescript-eslint/no-non-null-assertion': 'off',
        // 允许自定义模块和命名空间
        '@typescript-eslint/no-namespace': 'off',
        // 允许对this设置alias
        '@typescript-eslint/no-this-alias': 'off',
        // 允许使用any类型
        '@typescript-eslint/no-explicit-any': ['off'],
        ......
    }
}

到这里，就可以到项目中去使用ts了哟！
在vscode中command+,打开settiings.json可配置保存时自动eslint格式化哦！

image.png

又是努力努力学习的一天！！！