共计 8158 个字符,预计需要花费 21 分钟才能阅读完成。
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”
<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 // OK
const 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})
// or
const student: Student = reactive({name: '阿勇', age: 16})
// or
const 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) return
if (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 写法
<template>
…
</template>
<script lang=”ts”>
import dayjs from “dayjs”;
import {ref, reactive, onMounted} from “vue”;
import {Button, Step, Steps, NoticeBar} from “vant”;
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>
<template>
…
</template>
<script lang=”ts”>
import dayjs from “dayjs”;
import {defineComponent} from “vue”;
import HelloWorld from “@/components/HelloWorld.vue”; // @ is an alias to /src
import {Button, Dialog, Toast} from “vant”;
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>
<style vars=”{color}”>
.text-color {
color: var(–color);
}
</style>
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 >
);
};
}
};