vue項(xiàng)目中如何使用TypeScript相關(guān)配置
更新時(shí)間：2023年11月22日 11:35:45 作者：妮子果醬
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過(guò)程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、為什么要用typescript
TypeScript簡(jiǎn)單介紹：
- 是 JavaScript 的強(qiáng)類型版本。然后在編譯期去掉類型和特有語(yǔ)法，生成純粹的 JavaScript 代碼。由于最終在瀏覽器中運(yùn)行的仍然是 JavaScript，所以 TypeScript 并不依賴于瀏覽器的支持，也并不會(huì)帶來(lái)兼容性問(wèn)題。
- TypeScript 是 JavaScript 的超集，這意味著他支持所有的 JavaScript 語(yǔ)法。并在此之上對(duì) JavaScript 添加了一些擴(kuò)展，如 class / interface / module 等。這樣會(huì)大大提升代碼的可閱讀性。
總結(jié)優(yōu)勢(shì)：
- 靜態(tài)類型檢查： 類型校驗(yàn)，能夠避免許多低級(jí)代碼錯(cuò)誤；
- IDE 智能提示： 使用一個(gè)方法時(shí)，能清楚知道方法定義的參數(shù)和類型和返回值類型；使用一個(gè)對(duì)象時(shí)，只需要.就可以知道有哪些屬性以及屬性的類型；
- 代碼重構(gòu)： 經(jīng)過(guò)不停的需求迭代，代碼重構(gòu)避免不了，在重構(gòu)時(shí)，如果前期有清晰和規(guī)范的接口定義、類定義等，對(duì)于重構(gòu)幫助很大；
- 規(guī)范性和可讀性： 類似于強(qiáng)類型語(yǔ)言，有了合理的類型定義、接口定義等，對(duì)于代碼實(shí)現(xiàn)的規(guī)范性和可讀性都有很大提高，不然搜索整個(gè)項(xiàng)目這個(gè)方法在哪里調(diào)用、怎么定義等。個(gè)人認(rèn)為最有價(jià)值點(diǎn)：寫代碼前，會(huì)先構(gòu)思功能需求的整體代碼架構(gòu)。
二、vue+TpyeScript項(xiàng)目遷移
1.npm下載依賴包
npm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler
2.創(chuàng)建tsconfig.json
命令：
tsc --init
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"skipLibCheck": true,
"esModuleInterop": true,
"experimentalDecorators": true
},
"include": [
"./src/**/*"
]
}3.webpack.base.conf.js 中的配置
resolve: {
extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // 新增了'ts', 'tsx'
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.ts$/, // 用于加載項(xiàng)目中的ts文件
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/, // 用于加載項(xiàng)目中的tsx文件
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}]
4.配置package.json
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
5.重命名main.js
- 將main.js重命名為main.ts
- 在webpack.base.conf.js中修改入口的文件名 entry: {app: ‘./src/main.ts’}
6.在main.ts同級(jí)目錄下添加shims-tsx.d.ts（如果沒(méi)有用tsx 語(yǔ)法就不用） 和 shims-vue.d.ts
// vue/cli中的shims-tsx.d.ts
// 作用: 為 JSX 語(yǔ)法的全局命名空間
// 這是因?yàn)榛谥档脑貢?huì)簡(jiǎn)單的在它所在的作用域里按標(biāo)識(shí)符查找
// 此處使用的是無(wú)狀態(tài)函數(shù)組件的方法來(lái)定義, 當(dāng)在tsconfig內(nèi)開啟了jsx語(yǔ)法支持后, 其會(huì)自動(dòng)識(shí)別對(duì)應(yīng)的.tsx結(jié)尾的文件
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
// vue/cli中的shims-vue.d.ts
// 作用：為項(xiàng)目?jī)?nèi)所有的 vue 文件做模塊聲明, 畢竟 ts 默認(rèn)只識(shí)別 .d.ts、.ts、.tsx 后綴的文件
import Vue from "vue";
import VueRouter, { Route } from "vue-router";
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module "vue/types/vue" {
interface Vue {
$router: VueRouter; // 這表示this下有這個(gè)東西
$route: Route;
$https: any;
$urls: any;
$Message: any;
$Modal: any;
}
}
7.改造 .vue文件，將vue中script切換為<script lang="ts">；
8.改造.js文件，修改為ts語(yǔ)法，定義類型等
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的文章就介紹到這了,更多相關(guān)vue中使用TS相關(guān)配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3官方Hooks的用法與實(shí)現(xiàn)原理
Vue 3 引入了 Composition API,使得生命周期鉤子（hooks）在函數(shù)式風(fēng)格中更清晰地表達(dá),下面就來(lái)介紹一下Vue3官方Hooks的用法與實(shí)現(xiàn)原理,感興趣的可以了解一下2025-05-05
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
Vite是一個(gè)開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解
這篇文章主要為大家介紹了Vue3使用Swiper實(shí)現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue設(shè)置頁(yè)面輪詢實(shí)現(xiàn)方式
這篇文章主要介紹了Vue設(shè)置頁(yè)面輪詢實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-11-11
Vue3應(yīng)對(duì)后端接口返回十萬(wàn)條數(shù)據(jù)的解決方案
在前端開發(fā)中,我們有時(shí)會(huì)遇到后端接口直接返回 十萬(wàn)條數(shù)據(jù) 的情況,很多初學(xué)者會(huì)直接把數(shù)據(jù)全部 v-for 渲染到頁(yè)面上,結(jié)果瀏覽器瞬間卡死甚至崩潰,本文將從問(wèn)題原因出發(fā),逐步給出幾種常見解決方案,需要的朋友可以參考下2025-09-09
深入詳解Vue3實(shí)現(xiàn)多環(huán)境配置與切換方式
這篇文章主要為大家詳細(xì)介紹了Vue3中實(shí)現(xiàn)多環(huán)境配置與切換方式的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-09-09
默認(rèn)情況下,寫在.vue組件中的樣式會(huì)全局生效,因此很容易造成組件之間的樣式?jīng)_突問(wèn)題,本文就來(lái)介紹一下如何解決此問(wèn)題,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05