TS Vue项目中使用TypeScript

模块系统与命名空间

概念

模块化开发是目前最流行的组织代码方式，可以有效的解决代码之间的冲突与代码之间的依赖关系，模块系统一般视为“外部模块”，而命名空间一般视为“内部模块”

模块系统

TS中的模块化开发跟ES6中的模块化开发并没有太多区别，像ES6中的导入、导出、别名等，TS都是支持的。

TS跟ES6模块化的区别在于TS可以把类型进行模块化导入导出操作。

这里定义两个TS文件，分别为1_demo.ts和2_demo.ts。代码如下：

// 2_demo.ts
export type A = string

// 1_demo.ts
import type { A } from './2_demo'

关键字type可加可不加，一般导出类型的时候尽量加上，这样可以区分开到底是值还是类型。

TS除了支持ES6的模块化风格写法外，也支持require风格，但是使用的比较少，下面我们来了解一下。

// 2_demo.ts
type A = string
export = A

// 1_demo.ts
import A = require('./2_demo')
let a: A = 'hello'

下面来了解一下什么是模块化的动态引入，正常我们import导入方式是必须在顶部进行添加的，不能在其他语句中引入，这样就不能在后续的某个时机去导入，所以TS提供了动态引入模块的写法。

// 1_demo.ts
setTimeout(() => {import('./2_demo').then(({ a }) => {console.log(a)})
}, 2000)

这种动态导入只支持值的导入，不支持类型的导入，这需要注意一下。

命名空间

模块化是外部组织代码的一种方式，而命名空间则是内部组织代码的一种方式。防止在一个文件中产生代码之间的冲突。

TS提供了namespace语法来实现命名空间，代码如下：

namespace Foo {export let a = 123
}
namespace Bar {export let a = 456
}
console.log(Foo.a)
console.log(Bar.a)

命名空间也是可以导出的，在另一个模块中可以导入进行使用，并且导出值和类型都是可以的。

// 2_demo.ts
export namespace Foo {export let a = 123export type A = stringexport function foo() {}export class B {}
}

// 1_demo.ts
import { Foo } from './2_demo'
console.log(Foo.a)
let a: Foo.A = 'hello world'

.d.ts 文件和declare

详情可参考：ts的.d.ts和declare究竟是干嘛用的_ts declare-CSDN博客

.d.ts

• 在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 声明文件。
• 主要作用是描述 JavaScript 模块内所有导出接口的类型信息，即用来声明变量，模块，type，interface等等
• 在.d.ts声明变量或者模块等东西之后，在其他地方可以不用import导入这些东西就可以直接用，而且有语法提示
• 但是也不是说创建了.d.ts文件，里面声明的东西就能生效了，毕竟归根到底也是.ts文件，需要进行预编译，所以需要在tsconfig.json文件里面的include数组里面添加这个文件，在该数组里可以不用写.d.ts文件的绝对路径，可以通过glob通配符，匹配这个文件所在的文件夹或者是“祖宗级别”文件夹

支持的glob通配符有：

• * 匹配0或多个字符（不包括目录分隔符）

• ? 匹配一个任意字符（不包括目录分隔符）

• **/ 递归匹配任意子目录

"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],

更多详情可参考：tsconfig.json · TypeScript中文网 · TypeScript——JavaScript的超集

declare

• declare就是告诉TS编译器你担保这些变量和模块存在，并声明了相应类型，编译的时候不需要提示错误
• .d.ts 文件中的顶级声明必须以 "declare" 或 "export" 修饰符开头。
• 通过declare声明的类型或者变量或者模块，在include包含的文件范围内，都可以直接引用而不用去import或者import type相应的变量或者类型

声明一个类型

declare type Asd {name: string;
}

在include包含的文件范围内可以直接使用Asd这个type

声明一个模块

declare module '*.css';
declare module '*.less';
declare module '*.png';

在编辑ts文件的时候，如果你想导入一个.css/.less/.png格式的文件，如果没有经过declare的话是会提示语法错误的

声明一个变量

这个什么情况下会用到呢？假如我在项目中引入了一个sdk，这个sdk（我们以微信的sdk为例）里面有一些全局的对象（比如wx），但是如果不经过任何的声明，在ts文件里面直接用wx.config()的话，肯定会报错

declare namespace API {interface ResponseList {}
}

声明一个作用域

declare namespace API {interface ResponseList {}
}

声明完之后在其他地方的ts就可以直接API.ResponseList引用到这个接口类型

注意

.d.ts文件顶级声明declare最好不要跟export同级使用，不然在其他ts引用这个.d.ts的内容的时候，就需要手动import导入了

在.d.ts文件里如果顶级声明不用export的话，declare和直接写type、interface效果是一样的，在其他地方都可以直接引用

declare type Ass = {a: string;
}
type Bss = {b: string;
};

可以直接使用Ass和Bss作为某个变量的类型

@types和DefinitelyTyped仓库

DefinitelyTyped 是一个高质量的 TypeScript 类型定义的仓库

通过 @types 方式来安装常见的第三方 JavaScript 库的声明适配模块

参考地址：GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

那么这个仓库起到什么作用呢？在上面讲到，如果一个JS模块想要适配TS项目，那么需要有d.ts声明文件。那么如果这个JS模块没有提供声明文件的话，就可以通过DefinitelyTyped仓库下载第三方的声明文件来进行适配。

这个仓库会包含大部分常见JS库的声明文件，只需要下载就可以生效。下面我们举例，下载一个jquery库，并在TS项目引入jquery。

// 1_demo.ts
import $ from 'jquery  // error，提示缺少声明文件

jquery库并没有默认提供d.ts声明文件，所以导入模块的时候肯定是要报错的。鼠标移入到错误上，提示的信息就有让我们去安装对应的第三方声明文件，即：npm i --save-dev @types/jquery

那么我们按照提示进行安装后，就会解决适配问题了，错误信息不再提示，并且jquery库的类型系统也会生效。

当然并不是所有的JS模块都需要下载第三方的@types，因为有些模块默认就会代码d.ts的声明文件，例如moment这个模块，安装好后，就会自带moment.d.ts文件。

lib.d.ts和global.d.ts

lib.d.ts

当安装 TypeScript 时，会顺带安装一个 lib.d.ts 声明文件

这个文件包含 JavaScript 运行时以及 DOM 中存在各种常见的环境声明

当我们使用一些原生JS操作的时候，也会拥有类型，代码如下：

let body: HTMLBodyElement | null = document.querySelector('body')
let date: Date = new Date()

这里的HTMLBodyElement和Date都是TypeScript下自带的一些内置类型，这些类型都存放在lib这个文件夹下。

global.d.ts

根目录下新建 global.d.ts 文件，在这里可以扩展一些全局的类型

有时候我们也想扩展像lib.d.ts这样的声明类型，可以在全局下进行使用，所以TS给我们提供了global.d.ts文件使用方式，这个文件中定义的类型都是可以直接在全局下进行使用的，不需要模块导入。

// global.d.ts
type A = string

// 1_demo.ts
let a: A = 'hello'   // ✔
let b: A = 123       // ✖

tsconfig.json文件

这个配置文件主要使用compilerOptions: {}进行TS的编译与转化。当然还有一些其他外层可配置的字段，如下：

{"compilerOptions": {},     // 编译选项"files": [],   // 包含在程序中的文件的允许列表"extends": "", // 继承的另一个配置文件"include": [], // 指定的进行编译解析"exclude": [], // 指定的不进行编译解析"references": [] // 项目引用，提升性能
}

其中files和include都是指定哪些文件是可以进行编译的，只不过files指定的是比较少的文件，多文件的话可以用include来进行指定，当然如果要跳过哪些文件不进行编译，就可以利用exclude字段。

extends可以通过继承的方式去加载另一个配置文件，使用的情况并不是很多。references可以把编译分成一个一个独立的模块，这样是有助于性能的提升。这些选项都是顶层的，用的最多的还是compilerOptions字段。

compilerOptions

通过tsc --init会自动生成tsconfig.json文件，这个文件会默认带有6个选项配置，如下：

{"compilerOptions": {"target": "es2016",         // 指定编译成的是哪个版本的js "module": "commonjs",       // 指定要使用的模块化的规范"strict": true,             // 所有严格检查的总开关"esModuleInterop": true,    // 兼容JS模块无default的导入"skipLibCheck": true,       // 跳过所有.d.ts文件的类型检查"forceConsistentCasingInFileNames": true  // 引入时强制区分大小写}
}

除了初始的这些配置外，其他的配置都用注释给注释起来了，同时tsconfig.json把配置选项做了一些分类。

• Projects -> 项目
• Language and Environment -> 语言和环境
• Modules -> 模块
• JavaScript Support -> JS的支持
• Emit -> 发射
• Interop Constraints -> 操作约束
• Type Checking -> 类型检测
• Completeness -> 完整性

在Projects分类中，incremental表示增量配置，可以对编译进行缓存，下一次编译会在上一次编译的基础上完成，这样有助于性能；tsBuildInfoFile是增量编译的目录，生成一个缓存文件。

在Language and Environment分类中表示最终文件会编译成什么样子，target就是转化成JS的版本；jsx配置是可以指定tsx转换成jsx还是js。

在Modules 分类是用于控制模块的，module表示模块化转换后的风格，是ESM还是AMD还是CJS等；moduleResolution表示查找模块的方式，如果设置值为node表示查找模块的时候会找node_modules这个文件夹，如果选择其他的方式会导致查找模块的方式发生改变。

在JavaScript Support分类中主要是对JS进行一些配置的，allowJs表示是否允许对JS文件进行编译，默认是false，当开启为true的时候，可以把JS文件进行编译输出；checkJs表示可以对JS文件进行类型检测，如果类型发生改变就会有报错警告。

在Emit 分类中表示编译输出的情况，declaration表示是否生成d.ts文件；sourceMap表示是否生成.map文件。

在Interop Constraints分类中会对使用进行操作约束，esModuleInterop表示当模块不具备export default形式的时候也可以默认导入的方式来使用；forceConsistentCasingInFileNames表示模块引入的时候是否区分大小写。

在Type Checking分类表示对类型进行检测，strict表示是否开启严格模式，对类型检测会非常的严格，一般建议开启。在严格模式下限制是非常多的，例如：当一个变量是any类型的时候也要去指定一下类型；null不能成为其他类型的子类型，所以null不能随便赋值给其他类型等等。

在Completeness 分类表示是否具备完整性检测，skipLibCheck表示是否跳过对d.ts的类型检测，默认都是跳过的。

具体解析

{// 编译选项"compilerOptions": {// 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码// 命令行： tsc --target es5 11-测试TS配置文件.ts// 指定编译成的是哪个版本的js"target": "es5",// 指定要包含在编译中的 library"lib": ["dom", "dom.iterable", "esnext"],// 允许 ts 编译器编译 js 文件"allowJs": true,// 跳过所有.d.ts类型声明文件的类型检查"skipLibCheck": true,// es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异（兼容JS模块无default的导入）"esModuleInterop": true,// 允许通过 import x from 'y' 即使模块没有显式指定 default 导出"allowSyntheticDefaultImports": true,// 开启严格模式"strict": true,// 对文件名称强制区分大小写"forceConsistentCasingInFileNames": true,// 为 switch 语句启用错误报告"noFallthroughCasesInSwitch": true,// 生成代码的模块化标准"module": "esnext",// 模块解析（查找）策略"moduleResolution": "node",// 允许导入扩展名为.json的模块"resolveJsonModule": true,// 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件"isolatedModules": true,// 编译时不生成任何文件（只进行类型检查）"noEmit": true,// 指定将 JSX 编译成什么形式"jsx": "react-jsx"},// 指定允许 ts 处理的目录"include": ["src"]
}

选项式API配合TS

在选项式API中可以引入，defineComponent方法，这个方法可以对选项式API进行自动类型推断。并且需要在<script>标签上明确指定lang="ts"这个属性。

基本用法

<template><div class="app"><h3>选项式API-TS</h3><p>{{count}} -- {{doubeCount}}</p><button @click="handleClick(4)">点击</button></div>
</template><script lang='ts'>
import { defineComponent } from "vue";type Count = number | stringinterface List {username: string,password: string
}export default defineComponent({data() {return {count: 0 as Count,list: [] as List[] };},mounted() {this.count = 2;this.list.push({username: 'zs',password: '123456'})},computed: {doubeCount(): number | string {// 采用类型保护if(typeof this.count === 'number'){return this.count * 2} else {return this.count}}},methods: {handleClick(n: number){// 采用类型保护if(typeof this.count === 'number'){this.count += n} else {}}}
});
</script>

在选项式API中可以利用类型断言的方式给响应式数据进行类型注解。

<script lang="ts">
import { defineComponent } from 'vue'
type Count = number | string;
interface List {username: stringage: number
}
export default defineComponent({data(){return {count: 0 as Count,list: [] as List[]}}
});
</script>

像计算属性、方法等功能就可以正常配合TS的类型系统进行使用就好，如果是多个类型可以通过类型保护的方式进行控制，代码如下：

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({...computed: {doubleCount(): number|string{if(typeof this.count === 'number'){return this.count * 2;}else{return this.count;}}},methods: {handleClick(n: number){if(typeof this.count === 'number'){this.count += n;}}}
});
</script>

组件通讯中使用

主要利用的方案是，props + PropType模式，首先props属性可以直接采用Vue的方式来完成TS的类型注解。

父传子

App.vue

<template><div class="app"><h4>选项式API-TS--父组件</h4><hr><Son :count="count" :list="list" /></div>
</template><script lang='ts'>
import { defineComponent } from "vue";
import Son from '@/components/Son.vue'export default defineComponent({components: {Son},data() {return {count: 5,list: [{username: 'zs',age: 21}]};},
});
</script>

子组件：

<template><div class="app"><h4>子组件</h4><p>{{count}}</p></div>
</template><script lang='ts'>
import { defineComponent } from "vue";
import type { PropType } from 'vue'interface List {username: string,age: number
}export default defineComponent({props: {count: [Number, String],list: Object as PropType<List[]>},
});
</script>

子传父

App.vue

<template><div class="app"><h4>选项式API-TS--父组件</h4><hr><Son @getData="getData" /></div>
</template><script lang='ts'>
import { defineComponent } from "vue";
import Son from '@/components/Son.vue'export default defineComponent({components: {Son},data() {return {};},methods: {getData(payload: string){console.log(payload);}}
});
</script>

子组件：

<template><div class="app"><h4>子组件</h4><p>{{count}}</p></div>
</template><script lang='ts'>
import { defineComponent } from "vue";export default defineComponent({data() {return {};},// emits: ['getData'],emits: { // 推荐写法'getData'(payload: string){return payload.length > 0}},mounted() {this.$emit('getData', 'hello')},
});
</script>

组合式API配合TS

组合式API中使用TS，要比选项式API中使用TS会更加的简单，不需要做过多的处理，只需要利用原生TS的能力就可以。并且组合式API都具备自动类型推断的能力，代码如下：

基本使用

<template><h3>组合式API</h3><p>{{count}}</p><p>{{dobleCount}}</p><p><button @click="handleClick(8)">点击</button></p>
</template><script setup lang='ts'>
import { computed, ref } from 'vue'// 通过 泛型 的方式进行类型注解
let count = ref<number | string>(0)
count.value = 'hi'
count.value = 12// 复杂类型
interface List {username: string,age: number
}
let list = ref<List[]>([])
list.value.push({username: 'zs',age: 12
})// 计算属性
let num = ref(1)
let dobleCount = computed(() => num.value * 2)// 方法
let handleClick = (n: number) => {num.value += n
}
</script>

组件通讯

总结来说，TS跟组合式的配合要比跟选项式的配合更加的简单，所以推荐项目采用组合式API + TS来进行开发项目。

父传子

主要利用的方案是，defineProps + 泛型模式，defineProps是组合式API中父子通信使用的主要方式，可以利用vue自带的方式进行类型注解。

App.vue

<template><h3>组合式API--父组件</h3><hr><Son :count="count" :list="list" />
</template><script setup lang='ts'>
import Son from '@/components/Son.vue'import { ref } from 'vue'let count = ref(5)
let list = ref([{username: 'zs',age: 14
}])
</script>

子组件：

<template><h4>子组件</h4><p>{{count}}</p><p>{{list}}</p>
</template><script setup lang='ts'>
import { defineProps } from 'vue'// 第一种写法
// let props = defineProps({
//   count: [Number, String]
// })// 2. 第二种写法--推荐
interface Props {count: number | string,list: {username: string, age: number}[]
}defineProps<Props>()
</script>

子传父

主要利用的方案是defineEmits + 泛型的方案，跟我们的父子通信差不太多。

App.vue

<template><h3>组合式API--父组件</h3><hr><Son @getData="getData" />
</template><script setup lang='ts'>
import Son from '@/components/Son.vue'let getData = (payload: string) => {console.log(payload);
}
</script>

子组件：

<template><h4>子组件</h4>
</template><script setup lang='ts'>
import { defineEmits } from 'vue'interface Emits {(e: 'getData', payload:string): void
}
let emit = defineEmits<Emits>();
emit('getData', '20')
</script>

VueRouter配合TS

大多数情况下，路由都帮我们做了自动类型推断，那么路由给我们提供了很多内置的路由类型。

在路由模块中给我们内置了很多类型：

• RouteRecordRaw：路由表选项类型

• RouteMeta：扩展meta的类型

• RouteOptions：createRouter的配置类型

• RouteLocationNormalized：标准化的路由地址

• Router：router实例的类型

对于路由，其实我们并不会去关注太多，因为它已经帮我们做得差不多了

router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'import HomeViewVue from '@/views/HomeView.vue'declare module 'vue-router' {interface RouteMeta {// 是可选的isAdmin?: boolean,// 每个路由都必须声明requiresAuth: boolean}
}const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: HomeViewVue,meta: {requiresAuth: true,isAdmin: false}}
]const router = createRouter({history: createWebHashHistory(),routes
})router.beforeEach((to, from, next) => {})export default router

demo.vue

<template><h3>Home</h3>
</template><script setup lang='ts'>
import { useRoute, useRouter } from 'vue-router'let router = useRouter()
let route = useRoute()</script>

RouteRecordRaw是对路由表选项类型进行设置的，可以规范路由表的类型，需要我们自己进行类型注解。

// router/index.ts
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: HomeView}
]

我们经常要自己定义meta元信息的类型，做法如下：

declare module 'vue-router' {interface RouteMeta {// 是可选的isAdmin?: boolean// 每个路由都必须声明requiresAuth: boolean}
}
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'home',component: HomeView,meta: { requiresAuth: true }}
]

引入declare module 'vue-router'进行内部的合并处理，从而限定了meta原信息的类型，并且它是一种类型兼容性的方式。

RouterOptions 是createRouter的配置类型，这样在编写createRouter的时候就会自动进行类型推断。

// (alias) createRouter(options: RouterOptions): Router import createRouter
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes,
})

RouteLocationNormalized 是标准化的路由地址，在路由守卫和获取路由地址的情况下自动推断好。

// (parameter) to: RouteLocationNormalized
// (parameter) from: RouteLocationNormalized
router.beforeEach((to, from, next)=>{
});

Router 规范router实例的类型，在我们使用路由提供use函数，并产生router对象时自动推断产生。

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
// const router: Router
const router = useRouter();
</script>

这样当我们使用router对象的时候，会自动带有提示，并且我们不按照推断的形式进行设置属性，也会很好的给出提示错误。

包括具体方法的参数也会有类型限定，例如：router.push()传递正确的参数才可以。

总结一下路由与TS：官方提供的路由模块已经提供了大量写好的类型，一般都是自动推断好的，除非有一些值是需要我们手动指定的，需要进行类型注解，例如：routes路由表。

VueX配合TS

在安装脚手架的时候，可以选择自定义安装中，就会有状态管理的导入，这样在脚手架下就会有一个/store/index.ts这个状态管理的配置文件。

vuex中如何跟TS配合呢？实际上还是会比较复杂的，有如下步骤：

导出key：export const key;

InjectionKey<Store<StateAll>> = Symblo()

导入key：app.use(store, key)

重写useStore: export function useStore () { return baseUseStore(key)}

基本写法

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 2.
++ import store, { key } from './store'const app = createApp(App)
++ app.use(store, key)
app.use(router)
app.mount('#app')// createApp(App).use(store).use(router).mount('#app')

store/index.ts

import { createStore, useStore as baseUseStore } from 'vuex'
import type { InjectionKey } from 'vue'
import type { Store } from 'vuex'// 0.
export interface State {count: number
}// 1.
export const key: InjectionKey<Store<State>> = Symbol()// 3.重写 useStore 为了有类型规范提示
export function useStore () {return baseUseStore(key)
}export default createStore<State>({state: {count: 1},getters: {doubleCount(state){return state.count * 2}},mutations: {add(state, payload: number) {}},actions: {},modules: {}
})

views/HomeView.vue

<template><h3>Home--VueX</h3>
</template><script setup lang='ts'>
import { useStore } from '@/store'let store = useStore()store.state
</script>

分模块

在/store/index.ts中使用TS基本没有太大问题了，但是如何在子模块中也可以使用TS呢？首先了解一下vuex给我们提供的一些自带的类型。

• MutationTree -> mutation类型注解
• GetterTree -> getter类型注解
• ActionTree -> Action类型注解
• Store -> store对象的类型
• StoreOptions -> createStore参数类型

像MutationTree ，ActionTree，GetterTree 就是vuex提供的专门类型限定，同步方法、异步方法、计算属性的。所以我们可以直接去使用来控制状态管理的子模块。

具体可参考：vue3+ts的那个后台项目或者也可参考下面的这种方式

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 2.
++ import store, { key } from './store'const app = createApp(App)
++ app.use(store, key)
app.use(router)
app.mount('#app')// createApp(App).use(store).use(router).mount('#app')

store/index.ts

import { createStore, useStore as baseUseStore } from 'vuex'
import users from './modules/users'
import type { UsersState } from './modules/users'
import type { Store } from 'vuex'
import type { InjectionKey } from 'vue'export interface State {count: number
}interface StateAll extends State {users: UsersState
}export const key: InjectionKey<Store<StateAll>> = Symbol()export function useStore () {return baseUseStore(key)
}export default createStore<State>({state: {count: 1},getters: {doubleCount(state){return state.count * 2;}},mutations: {// add(state, payload: number){// }},actions: {},modules: {users}
})

views/HomeView.vue

<template><h3>Home--VueX</h3>
</template><script setup lang='ts'>
import { useStore } from '@/store'let store = useStore()store.state
</script>

store/modules/users.ts

import type { MutationTree, ActionTree, GetterTree } from 'vuex'
import type { State } from '../index'export interface UsersState {username: stringage: number
}const state: UsersState = {username: 'xiaoming',age: 20
};const mutations: MutationTree<UsersState> = {// change(state){// }
};
const actions: ActionTree<UsersState, State> = {};
const getters: GetterTree<UsersState, State> = {doubleAge(state){return state.age * 2;}
};export default {namespaced: true,state,mutations,actions,getters
}

Pinia 配合 TS

首先在main.ts中注册Pinia：

import { createPinia } from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

继续在src文件夹中创建/stores/counter.js，并写入如下代码：

import { defineStore } from 'pinia'interface Counter {counter: number
}export const useCounterStore = defineStore('counterStore', {state: (): Counter => ({counter: 0}),actions: {add(n: number){this.counter += n;}}
})

通过Counter接口的类型注解后，对于counter响应式数据就具备了类型限定，add方法直接进行参数的类型注解就好。

在App.vue中引入counter.js并使用：

<template>
<button @click="handleClick">点击</button>{{ counter }}
</template>
<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from './stores/counter';
let counterStore = useCounterStore()
let { counter } = storeToRefs(counterStore);
let handleClick = () => {counterStore.add(2);
}
</script>

几乎不需要做额外的处理，Pinia会帮我们自动完成类型推断。

Element-plus配合TS

安装：npm install element-plus --save

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store, { key } from './store'++import ElementPlus from 'element-plus'
++import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.use(store, key)
app.use(router)
app.mount('#app')// createApp(App).use(store).use(router).mount('#app')

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型：

// tsconfig.json
"types": ["webpack-env","element-plus/global"
]

配置好后，当输入<的时候，就会自动带有提示组件功能，以及组件属性与属性值的提示效果。

这里需要注意，由于Volar插件更新比较快，如果不能很好进行提示的话，可以把Volar插件降级到1.0.0这个版本。

除了提示外，Element Plus默认带有的类型都可以在Vue项目中引入，并进行使用，例如表单控件，代码如下：

<script lang="ts" setup>import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()const rules = reactive<FormRules>({})
const submitForm = async (formEl: FormInstance | undefined) => {
}

FormInstance用于定义表单实例的类型，FormRules用于定义表单规则的类型等。