全局安裝typescript
npm install -g typescript
tsc -v查看安裝的ts版本
安裝typescript
npm install typescript --save-dev
命令行運行tsc --init生成tsconfig.json文件
tsconfig.json配置詳情
typescript配置相關(guān)
安裝@vue/cli-plugin-typescript
@vue/cli-plugin-typescript內(nèi)部預(yù)置了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設(shè)置alias
'@typescript-eslint/no-this-alias': 'off',
// 允許使用any類型
'@typescript-eslint/no-explicit-any': ['off'],
......
}
}
到這里汗侵，就可以到項目中去使用ts了喲！
在vscode中command+,打開settiings.json可配置保存時自動eslint格式化哦悔详！
image.png
又是努力努力學(xué)習(xí)的一天！Ｈ切茄螃！
