vue項目引入ts步驟(小結(jié))
最近考慮到老項目代碼的可維護(hù)性以及穩(wěn)定性，決定引入ts做規(guī)范檢測。因為介紹的東西比較基礎(chǔ)，如果介紹的不對，麻煩指正。
1. 簡介
TypeScript 是 JavaScript 的一個超集，主要提供了類型系統(tǒng)和對 ES6 的支持。網(wǎng)上關(guān)于ts的學(xué)習(xí)資料很多，這里不做詳細(xì)介紹?？蓞⒖嫉膶W(xué)習(xí)網(wǎng)站：
2. 安裝依賴包
cnpm i typescript ts-loader --save-dev
3. 添加tsconfig.json文件
在項目根目錄下添加 tsconfig.json 文件。tsconfig.json 文件用來指定ts的編譯選項。配置可參考：
https://typescript.bootcss.com/tsconfig-json.html
項目工程 tsconfig.json 文件配置如下：（僅做參考）
{
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitOnError": true,
"target": "esnext",
"module": "esnext",
"strict": true,
"allowJs": true,
"noEmit": false,
"noImplicitThis": true,
"esModuleInterop": true,
"sourceMap": true,
"moduleResolution": "node"
},
"include": [
"src/**/*", "types"
],
"exclude": [
"node_modules",
"build"
]
}
4. webpack打包配置修改
webpack.config.js 打包文件修改，新增對.ts文件的打包配置。
4.1 入口文件后綴名由.js修改為.ts
module.exports = {
entry: {
app: ['@babel/polyfill', './src/main.ts']
}
}
4.2 extensions 文件擴(kuò)展名增加 .ts, .tsx 文件的支持
tsx針對react項目文件的支持，因為我們的工程基于vue開發(fā)，支持.ts文件就可以了。
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json', '.css', '.ts']
}
}
4.3 loader增加對ts文件的支持
使用ts-loader來轉(zhuǎn)換ts文件。
module.exports = {
module: {
rules: [
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
5. eslint 添加對ts文件的檢測
5.1 安裝依賴包
cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev
@typescript-eslint/parser ts文件解析器
@typescript-eslint/eslint-plugin 版本號需要與@typescript-eslint/parser的版本一致，解析器相關(guān)的配置選項
eslint-config-typescript 針對ts項目配置的eslint檢測規(guī)范
5.2 .eslintrc配置文件修改
.eslintrc配置文件修改，支持對ts的文件的校驗。經(jīng)過多次調(diào)整，我們工程的 .eslintrc 配置文件如下：
{
"parserOptions": {
"parser": "@typescript-eslint/parser",
"project": "./tsconfig.json",
"extraFileExtensions": [".vue"],
"ecmaVersion": 2017,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"env": {
"jest": true,
"browser": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx", ".eslintrc"]
},
"webpack": {
"config": {
"resolve": {
"alias": {
"src": "src"
}
}
}
}
}
},
"plugins": [
"vue",
"babel",
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:vue/base",
"typescript",
"standard"
],
"rules": {
"func-names": 0,
"one-var": [1, "never"],
"prefer-const": 1,
"no-unused-expressions": 1,
"new-cap": 2,
"prefer-arrow-callback": 2,
"arrow-body-style": 0,
"max-len": [
1,
{
"code": 200,
"ignoreStrings": true,
"ignoreUrls": true,
"ignoreRegExpLiterals": true
}
],
"consistent-return": "off",
"default-case": 2,
"prefer-rest-params": 2,
"no-script-url": 0,
"no-console": [
2,
{
"allow": ["info", "error", "warn", "log"]
}
],
"no-duplicate-imports": 2,
"newline-per-chained-call": 2,
"no-underscore-dangle": 2,
"eol-last": 2,
"no-useless-rename": 2,
"class-methods-use-this": 0,
"prefer-destructuring": 0,
"no-unused-vars": 0,
"@typescript-eslint/no-unused-vars": 1,
"no-plusplus": 0,
"import/prefer-default-export": 0,
"import/no-dynamic-require": 2,
"@typescript-eslint/no-var-requires": 2,
"no-use-before-define": [
"error",
{
"functions": false
}
],
"@typescript-eslint/no-use-before-define": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/interface-name-prefix": 0,
"no-invalid-this": 0,
"babel/no-invalid-this": 2,
"no-await-in-loop": "off",
"array-callback-return": "off",
"no-restricted-syntax": "off",
"@typescript-eslint/no-explicit-any": 0,
"import/no-extraneous-dependencies": 0,
"import/no-unresolved": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/no-object-literal-type-assertion": 0,
"no-param-reassign": [
2,
{
"props": false
}
],
"generator-star-spacing": "off",
"indent": [2, 4, {
"SwitchCase": 1
}],
"eqeqeq": 0,
"no-else-return": 2,
"arrow-parens": 0,
"space-before-function-paren": ["error", "never"],
"comma-dangle": [2, "never"],
"semi": [2, "always"]
}
}
注意"extends": ["plugin:vue/base"], 只能選擇vue/base，不能用vue/recommend。不然會有規(guī)則沖突。
6. 項目文件轉(zhuǎn)換
項目配置好后，開始對老代碼進(jìn)行改造，來支持ts的語法檢測。
6.1 增加ts聲明文件目錄
項目中總會依賴一些資源包，或是自己開發(fā)的一些組件，這些文件需要補(bǔ)充聲明文件，聲明文件就是將多個聲明語句放在一起，這些聲明文件可統(tǒng)一放到一個目錄里。這個目錄需要包含在 tsconfig.json 文件的include里。
ms工程在根目錄下新建 types 目錄，目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.d.ts 等文件。
6.2 全局vue.d.ts聲明文件
需要在ts環(huán)境下識別vue文件，需要添加 vue.d.ts 全局聲明文件，例子如下：
import VueRouter, { Route } from 'vue-router';
import RequestAxios from './request';
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
declare module 'vue/types/vue' {
interface Vue {
$router: VueRouter;
$route: Route;
$request: RequestAxios;
....
}
}
6.2 vue文件的改造
vue文件的改造，只改造js部分，代碼大致修改如下：
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component({
components: {
....
}
})
export default class MyComponent extends Vue {
// prop
@Prop({ default: () => {} }) readonly pageInfo !: any
// data
private showAnimation : boolean = true;
// watch
@Watch('showModuleIndex')
onShowModuleIndexChanged(newValue: any) {
this.$emit('input', newValue);
}
// computed
get list() {
const { page, cityList } = this;
return page.cityList.split(',').map(
cityId => cityList.find(c => String(c.id) === cityId)
);
}
// mounted
private mounted() :void {
this.initEditor();
}
// methods
private initEditor() :void {
....
}
}
</script>
6.3 js文件的改造
將文件后綴名更改為.ts，然后加上類型就可以了。
7. 踩坑總結(jié)
大部分都是eslint校驗時的報錯，按照提示修復(fù)就可以了。
"vue/html-indent": [2, 4] eslint這條規(guī)則去掉
"plugin:vue/base"與"plugin:vue/recommend"的區(qū)別
...
8. 總結(jié)
項目改造過程中，大部分時間都是在查配置兼容問題，配置這塊解決了，改造起來速度還是挺快的。雖然前期會有一些改造成本，但是長遠(yuǎn)來看，還是有意義的。畢竟很多代碼類型上的問題在開發(fā)階段就可以暴露，不用等到運行時才發(fā)現(xiàn)了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇基于axios 解決跨域cookie丟失的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-cli腳手架初始化項目各個文件夾用途,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
vue axios數(shù)據(jù)請求get、post方法及實例詳解
axios是一個基于Promise,同時支持瀏覽器端和Node.js的HTTP庫，常用于Ajax請求。這篇文章主要介紹了vue axios數(shù)據(jù)請求get、post方法的使用 ,需要的朋友可以參考下2018-09-09
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過在?Vue?組件中實現(xiàn)?PDF?預(yù)覽功能,我們可以為用戶提供便捷的內(nèi)容閱讀體驗,下面我們就來看看具體實現(xiàn)方法吧2023-08-08
這篇文章主要介紹了Vue實現(xiàn)路由跳轉(zhuǎn)至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-admin-template?動態(tài)路由的實現(xiàn)示例
本文主要介紹了ue-admin-template動態(tài)路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue.js評論發(fā)布信息可插入QQ表情功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實例的相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2019-09-09
為了實現(xiàn)全屏滾動效果,我們首先需要使用Vue.js框架搭建項目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(滑動或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10