typescript在项目中的使用

最新推荐文章于 2025-08-20 10:06:24 发布

原创最新推荐文章于 2025-08-20 10:06:24 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #vue.js

本文介绍了如何在Webpack打包配置中使用VueCLI，包括设置入口文件、扩展处理文件类型、添加TS处理规则，以及在Vue项目中整合TypeScript、Vuex和axios的实践，涉及组件声明、props、状态管理等知识点。

webpack打包配置 --> vue-cli

// 1. entry: 打包入口文件
entry:{
	app:'./src/main.ts'
}
// 2. extensions: 用于处理尝试数据尾缀列表
// 面试时候会问: 如何在webpack新增一种处理类型文件
extensions:['.js','.vue','.json','.ts']
// 3.loaders-ts: 增加ts处理
rules:[
	{ 
	 test:/\.ts$/,
	 loader:'ts-loader',
	 options:{
		appendTsSuffixTo:[/\.vue$/]
		}
	}
]

ts配置文件

tsconfig.json

vue / vuex +typescript

<template>
 		<vueComponent />
</template>
<script>
	// 1. 定义组件的方式上 - extends
	// 1.1声明当前模块 Vue.component or Vue.extends
	import Vue from 'vue'
	const Component = Vue.extends({})
	// 1.2 全面拥抱面向对象
	import Component from 'vue-class-component'
	@Component({
		template:'<vueComponent />'
	})
	export default class myComponent extends Vue{
		message:string = 'Hello'
	}
	// 1.3 利用ts的额外补充模块declare ⇒ 实现独立模块声明,独立引用
	declare module '*.vue'{
		import Vue from 'vue'
		export default Vue
	}
	declare module '/typings/vuePlugin.d.ts'{
		interface Vue{
			myProps:string
		}	
	}
	// 4. props ⇒ 提供原地声明联合变量
	import {propType} from 'vue'
	interface custmPayload{
		str:string,
		number:number,
		name:string
	}
	const Component = Vue.extend({
		props:{
			name:string,
			success:{
				type:string
			},
			payload:{
				type:Object as propType<customPayload>
			},
			callback:{
				type: Object as propType<() => void>
			}
		}
	})
	// 5. computed 以及 method
	computed:{
		getMsg():string{
			return ...
		}
	},
	methods:{
		click():string{
 			return ...
		}
	}
	// 6. vuex接入ts
	// `vuex.d.ts` - ComponentCustomProperties
	import { ComponentCustomProperties } from 'vue'
	decalre module '@vue/runtime-core'{
		interface State{}
		interface ComponentCustomProperties{ 
			$store:Store<State>
		}	
	}
	// 7. api形式
	import {InjectionKey} from 'vue'
	import { createStore,Store } from 'vuex'
	export interface State{}
	export const key:InjectionKey<Store<State>> = Symbol()
	export const store = createStore<State>({ state:{ count:0 } })
	// main.ts
	import { store,key } from './store'
	app.use(store,key)
	// 使用方
	import { useStore } form 'vuex'
	import {key} form './store'
	export default {
		const store = useStore(key)
	}
	// 8. 类装饰器 vuex-class
	import {State,Action,Getter} from 'vuex-class'
	export default class App extends Vue{
		@State login:boolean;
		@Action setInit:()=>void;
		get isLogin:boolean;
		mounted(){
			this.setInit();
			this.isLogin = this.login;
		}
	}
</script>

项目中实战

vue-shims.d.ts vue文件声明

	declare module '*.vue'{
		import Vue from 'vue'
		export default Vue
	}

组件导入

@Components({
	components:{
		app1,
		app2
	}
})
export default class App extends Vue{
	mounted(){}
}

命名空间

// store.d.ts
declare namespace StoreState{
	export interface app1{}
	export interface app2{}
}

axios

declare namespace Ajax{
	export interface AjaxResponse{
		data:AjaxResponse
	}
	export interface AjaxResponse{
		code:number;
		result:any;
		message?:string;
	}
}