TypeScript 是JS的一个超集，次要提供了类型零碎和对ES6的反对，应用 TypeScript 能够减少代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始应用TypeScript。从最近公布的 Vue3 正式版本来看， Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 反对也是这一次降级的亮点。前端培训当然，在理论开发中如何正确拥抱 TypeScript 也是迁徙至 Vue3 的一个小痛点，这里就针对 Vue3 和 TypeScript 开展一些交换。

96.8%的代码都是TypeScript，反对的力度也是相当大

我的项目搭建

在官网仓库的 Quickstart 中举荐用两种形式形式来构建咱们的 SPA 我的项目：

vite

npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3

vue-cli

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create sail-vue3

select vue 3 preset

vite 是一个由原生ESM驱动的Web开发构建工具，关上 vite 依赖的 package.json 能够发现在 devDependencies 开发依赖外面曾经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发常常须要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需要，作为疾速启动本地 Vue 我的项目来说，这是一个十分完满的工具。

前面的演示代码也是用vite搭的

从 vue2.x 走过去的掘友必定晓得 vue-cli 这个官网脚手架， vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的形式进行交互式的配置，抉择起来更加灵便可控。丰盛的官网插件适配，GUI的创立治理界面，标准化开发流程，这些都是 vue-cli 的特点。

vue-cli ✖ TypeScript STEP1

vue-cli ✖ TypeScript STEP2

想要预装TypeScript，就须要抉择手动配置，并check好TypeScript

遗记应用抉择 TypeScript 也没事，加一行cli命令就行了

vue add typescript

最初，别忘了在 .vue 代码中，给 script 标签加上 lang="ts"

Option API格调

在 Vue2.x 应用过 TypeScript 的掘友必定晓得引入 TypeScript 不是一件简略的事件：

要用 vue-class-component 强化 vue 组件，让 Script 反对 TypeScript 装璜器

用 vue-property-decorator 来减少更多联合 Vue 个性的装璜器

引入 ts-loader 让 webpack 辨认 .ts .tsx 文件

.....

而后进去的代码格调是这样的：

@Component({

components:{ componentA, componentB},

})
export default class Parent extends Vue{
@Prop(Number) readonly propA!: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC!: string | boolean | undefined

// data信息
message = 'Vue2 code style'

// 计算属性
private get reversedMessage (): string[] {

  return this.message.split(' ').reverse().join('')

}

// method
public changeMessage (): void {

this.message = 'Good bye'

}
}

class 格调的组件，各种装璜器穿插在代码中，有点感觉本人不是在写 vue ，些许凌乱，所以这种曲线救国的计划在 vue3 外面必定是行不通的。

在 vue3 中能够间接这么写：

import { defineComponent, PropType } from 'vue'

interface Student {
name: string
class: string
age: number
}

const Component = defineComponent({
props: {

success: { type: String },callback: {  type: Function as PropType<() => void>},student: {  type: Object as PropType<Student>,  required: true}

},
data() {

 return {    message: 'Vue3 code style'}

},
computed: {

reversedMessage(): string {  return this.message.split(' ').reverse().join('')}

}
})

vue 对 props 进行简单类型验证的时候，就间接用 PropType 进行强制转换， data 中返回的数据也能在不显式定义类型的时候推断出大多类型， computed 也只用返回类型的计算属性即可，代码清晰，逻辑简略，同时也保障了 vue 构造的完整性。

Composition API格调

在 vue3 的 Composition API 代码格调中，比拟有代表性的api就是 ref 和 reactive ，咱们看看这两个是如何做类型申明的：

ref

import { defineComponent, ref } from 'vue'

const Component = defineComponent({
setup() {
const year = ref(2020)
const month = ref<string | number>('9')

month.value = 9 // OK
const result = year.value.split('') // => Property 'split' does not exist on type 'number'
}
})

剖析下面的代码，能够发现如果咱们不给定 ref 定义的类型的话， vue3 也能依据初始值来进行类型推导，而后须要指定简单类型的时候简略传递一个泛型即可。

Tips：如果只有setup办法的话，能够间接在defineComponent中传入setup函数

const Component = defineComponent(() => {

const year = ref(2020)const month = ref<string | number>('9')month.value = 9 // OKconst result = year.value.split('') // => Property 'split' does not exist on type 'number'

})

reactive

import { defineComponent, reactive } from 'vue'

interface Student {
name: string
class?: string
age: number
}

export default defineComponent({
name: 'HelloWorld',
setup() {

const student = reactive<Student>({ name: '阿勇', age: 16 })// orconst student: Student = reactive({ name: '阿勇', age: 16 })// orconst student = reactive({ name: '阿勇', age: 16, class: 'cs' }) as Student

}
})

申明 reactive 的时候就很举荐应用接口了，而后怎么应用类型断言就有很多种抉择了，这是 TypeScript 的语法糖，实质上都是一样的。

自定义Hooks

vue3 借鉴 react hooks 开发出了 Composition API ，那么也就意味着 Composition API 也能进行自定义封装 hooks ，接下来咱们就用 TypeScript 格调封装一个计数器逻辑的 hooks （ useCount ）:

首先来看看这个 hooks 怎么应用：

import { ref } from '/@modules/vue'
import useCount from './useCount'

export default {
name: 'CountDemo',
props: {

msg: String

},
setup() {

const { current: count, inc, dec, set, reset } = useCount(2, {  min: 1,  max: 15})const msg = ref('Demo useCount')return {  count,  inc,  dec,  set,  reset,  msg}

}
}

进去的成果就是：

贴上 useCount 的源码：

import { ref, Ref, watch } from 'vue'

interface Range {
min?: number,
max?: number
}

interface Result {
current: Ref<number>,
inc: (delta?: number) => void,
dec: (delta?: number) => void,
set: (value: number) => void,
reset: () => void
}

export default function useCount(initialVal: number, range?: Range): Result {
const current = ref(initialVal)
const inc = (delta?: number): void => {

if (typeof delta === 'number') {  current.value += delta} else {  current.value += 1}

}
const dec = (delta?: number): void => {

if (typeof delta === 'number') {  current.value -= delta} else {  current.value -= 1}

}
const set = (value: number): void => {

current.value = value

}
const reset = () => {

current.value = initialVal

}

watch(current, (newVal: number, oldVal: number) => {

if (newVal === oldVal) returnif (range && range.min && newVal < range.min) {  current.value = range.min} else if (range && range.max && newVal > range.max) {  current.value = range.max}

})

return {

current,inc,dec,set,reset

}
}

剖析源码

这里首先是对 hooks 函数的入参类型和返回类型进行了定义，入参的 Range 和返回的 Result 别离用一个接口来指定，这样做了当前，最大的益处就是在应用 useCount 函数的时候，ide就会主动提醒哪些参数是必填项，各个参数的类型是什么，避免业务逻辑出错。

接下来，在减少 inc 和缩小 dec 的两个函数中减少了 typeo 类型守卫查看，因为传入的 delta 类型值在某些特定场景下不是很确定，比方在 template 中调用办法的话，类型查看可能会生效，传入的类型就是一个原生的 Event 。

对于 ref 类型值，这里并没有特地申明类型，因为 vue3 会进行主动类型推导，但如果是简单类型的话能够采纳类型断言的形式：ref(initObj) as Ref<ObjType>

小倡议

AnyScript

在初期应用 TypeScript 的时候，很多掘友都很喜爱应用 any 类型，硬生生把TypeScript 写成了 AnyScript ，尽管应用起来很不便，然而这就失去了 TypeScript 的类型查看意义了，当然写类型的习惯是须要缓缓去养成的，不必急于一时。

Vetur

vetur 代码查看工具在写vue代码的时候会十分有用，就像构建 vue 我的项目少不了 vue-cli 一样，vetur 提供了 vscode 的插件反对，赶着降级 vue3 这一波工作，顺带也把 vetur 也带上吧。

一个残缺的Vue3+ts我的项目

├─public
│ favicon.ico
│ index.html
└─src

│  App.vue│  main.ts│  shims-vue.d.ts├─assets│  │  logo.png│  └─css│          base.css│          main.styl├─components│  │  HelloWorld.vue│  └─base│          Button.vue│          index.ts│          Select.vue├─directive│      focus.ts│      index.ts│      pin.ts├─router│      index.ts├─store│      index.ts├─utils│  │  cookie.ts│  │  deep-clone.ts│  │  index.ts│  │  storage.ts│  └─validate│          date.ts│          email.ts│          mobile.ts│          number.ts│          system.ts└─views    │  About.vue    │  Home.vue    │  LuckDraw.vue    │  TodoList.vue    └─address            AddressEdit.tsx            AddressList.tsx

.vue写法

export default {
components: {

Button,Step,Steps,NoticeBar,

},
setup() {

const nameinput = ref();const selectionStart = ref(0);const twoNow = dayjs().subtract(2, "day").format("YYYY-MM-DD HH:mm:ss");const now = dayjs().format("YYYY-MM-DD HH:mm:ss");const now2 = dayjs().add(2, "day").format("YYYY-MM-DD HH:mm:ss");const formData = reactive({  name: "",  phone: "",  code: "",});onMounted(() => {  (nameinput.value as HTMLInputElement).focus();});const insertName = () => {  const index = (nameinput.value as HTMLInputElement).selectionStart;  if (typeof index !== "number") return;  formData.name =    formData.name.slice(0, index) + "哈哈" + formData.name.slice(index);};return {  nameinput,  formData,  insertName,  selectionStart,  twoNow,  now,  now2,};

},
};
</script>

export default defineComponent({
name: "Home",
components: {

HelloWorld,Button,

},
data() {

return {  direction: "top",  pinPadding: 0,  time: "",  timer: 0,  color: "red",};

},
methods: {

showToast() {  Toast("字体色彩已改蓝色");  this.color = "blue";},handleClick() {  Dialog({    title: "题目",    message: "这是一个全局按钮组件",  });},initTime() {  this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");  this.timer = setInterval(() => {    this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");  }, 1000);},

},
created() {

this.initTime();

},
beforeUnmount() {

clearInterval(this.timer);

},
});
</script>

tsx写法

import { ref, reactive } from "vue";
import { AddressList, NavBar, Toast, Popup } from "vant";
import AddressEdit from './AddressEdit'
import router from '@/router'

export default {
setup() {

const chosenAddressId = ref('1')const showEdit = ref(false)const list = reactive([  {    id: '1',    name: '张三',    tel: '13000000000',    address: '浙江省杭州市西湖区文三路 ',    isDefault: true,  },  {    id: '2',    name: '李四',    tel: '1310000000',    address: '浙江省杭州市拱墅区莫干山路 ',  },])const disabledList = reactive([  {    id: '3',    name: '王五',    tel: '1320000000',    address: '浙江省杭州市滨江区江南小道',  },])const onAdd = () => {  showEdit.value = true}const onEdit = (item: any, index: string) => {  Toast('编辑地址:' + index);}const onClickLeft = () => {  router.back()}const onClickRight = () => {  router.push('/todoList')}return () => {  return (    <div style="background:#f7f8fa">      <NavBar        title="地址治理"        left-text="返回"        right-text="Todo"        left-arrow        onClick-left={onClickLeft}        onClick-right={onClickRight}      />      <AddressList        vModel={chosenAddressId.value}        list={list}        disabledList={disabledList}        disabledText="以下地址超出配送范畴"        defaultTagText="默认"        onAdd={onAdd}        onEdit={onEdit}      />      <Popup vModel={[showEdit.value, 'show']} position="bottom" round style="height: 80%" >        <AddressEdit />      </Popup>    </div >  );};

}
};