Shulou(Shulou.com)06/03 Report--

This article mainly explains "the method tutorial of the complete project of Vue3+TypeScript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the method tutorial of the complete Vue3+TypeScript project.

A complete Vue3+Ts project that supports .vue and .tsx writing

TypeScript is a superset of JS, which mainly provides type system and support for ES6. Using TypeScript can increase the readability and maintainability of code, and more and more people are using TypeScript in the react and vue communities. Judging from the recently released official version of Vue3, the source code of Vue3 is written in TypeScript, and better TypeScript support is also the highlight of this upgrade. Of course, how to embrace TypeScript correctly in actual development is also a small sore point for migrating to Vue3. Here is some communication about Vue3 and TypeScript.

96.8% of the code is TypeScript, and the support is also quite strong.

Project building

It is recommended to build our SPA project in two ways in the Quickstart of the official warehouse:

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/clivue create sail-vue3# select vue3 preset

Vite is a Web development and build tool driven by native ESM. Opening the package.json of vite dependency, you can find that TypeScript has been introduced into devDependencies development dependency, and even vuex, vue-router, less, sass and other tools that local developers often need. Vite lightweight, out-of-the-box features, to meet the needs of most development scenarios, as a quick start local Vue project, this is a very perfect tool.

The following demo code is also built with vite.

Diggers from vue2.x must know that vue-cli is the official scaffolding. How can the update of vue3 be less than vue-cli? vue-cli puts more emphasis on interactive configuration in the way of cli, and the choice is more flexible and controllable. Rich official plug-in adaptation, GUI creation management interface, standardized development process, these are the characteristics of vue-cli.

Vue-cli ✖ TypeScript STEP1

Vue-cli ✖ TypeScript STEP2

If you want to pre-install TypeScript, you need to choose manual configuration and check a good TypeScript

It's okay to forget to use TypeScript, just add a line of cli command.

Vue add typescript

Finally, don't forget to add the lang= "ts" to the script tag in the .vue code

.text-color {color: var (--color);} Option API style

Diggers who have used TypeScript on Vue2.x must know that introducing TypeScript is not an easy task:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

To strengthen vue components with vue-class-component, let Script support TypeScript decorator

Use vue-property-decorator to add more decorators that combine Vue features

Introduce ts-loader to let webpack recognize .ts .tsx files

.

Then the style of the code looks like this:

@ Component ({components: {componentA, componentB},}) export default class Parent extends Vue {@ Prop (Number) readonly propellant: number | undefined @ Prop ({default: 'default value'}) readonly propellant: string @ Prop ([String) Boolean]) readonly propellants: string | boolean | undefined / / data information message = 'Vue2 code style' / / calculation attribute private get reversedMessage (): string [] {return this.message.split ('). Reverse (). Join (')} / / method public changeMessage (): void {this.message = 'Good bye'}}

Class-style components, a variety of decorators interspersed in the code, a little feel that they are not writing vue, a little messy, so this kind of curve-saving solution certainly does not work in vue3.

You can write this directly in 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, required: true}}, data () {return {message:' Vue3 code style'}} Computed: {reversedMessage (): string {return this.message.split ('') .reverse () .join ('')}})

When vue validates the complex type of props, it directly uses PropType to cast, the data returned in data can infer most types when the type is not explicitly defined, and computed only needs to return the calculation properties of the type, the code is clear, the logic is simple, and ensures the integrity of the vue structure.

Composition API style

In vue3's Composition API code style, the typical api is ref and reactive. Let's take a look at how these two make type declarations:

Ref

Import {defineComponent, ref} from 'vue' const Component = defineComponent ({setup () {const year = ref (2020) const month = ref (' 9') month.value = 9 / / OK const result = year.value.split ('') / / = > Property 'split' does not exist on type' number'}})

Analyzing the above code, we can find that if we do not give the type defined by ref, vue3 can also derive the type based on the initial value, and then simply pass a generic type when you need to specify a complex type.

Tips: if there is only the setup method, you can pass the setup function directly into the defineComponent

Const Component = defineComponent (() = > {const year = ref (2020) const month = ref ('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 ({name:'Ah Yong', age: 16}) / / or const student: Student = reactive ({name:'A Yong', age: 16}) / / or const student = reactive ({name:'A Yong', age: 16) Class: 'cs'}) as Student}})

Interfaces are recommended when declaring reactive, and then there are many options for how to use type assertions. This is the syntax sugar of TypeScript, which is essentially the same.

Custom Hooks

Vue3 uses react hooks for reference to develop Composition API, which means that Composition API can also customize and encapsulate hooks, and then we will encapsulate a counter logic hooks (useCount) in TypeScript style:

First, let's take a look at how to use this 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}

Paste the source code of useCount:

Import {ref, Ref, watch} from 'vue' interface Range {min?: number, max?: number} interface Result {current: Ref, 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.max) {current.value = range.max}}) return {current, inc, dec, set, reset}}

Analyze the source code

First of all, the input parameter type and return type of the hooks function are defined. The Range of the input parameter and the Result returned are specified by an API respectively. After doing so, the greatest advantage is that when using the useCount function, ide will automatically prompt which parameters are required and what the type of each parameter is, to prevent business logic errors.

Next, the typeo type guard check is added to the functions that add inc and decrease dec, because the value of the delta type passed in is uncertain in some specific scenarios, for example, if the method is called in template, the type check may fail, and the type passed in is a native Event.

With regard to ref type values, there is no special type declaration here, because vue3 does automatic type inference, but if it is a complex type, you can use type assertion: ref (initObj) as Ref

Little advice

AnyScript

In the early days of using TypeScript, many diggers like to use the any type and rigidly write TypeScript as AnyScript. Although it is very convenient to use, it loses the meaning of TypeScript type checking. Of course, the habit of writing types needs to be formed slowly, and there is no need to rush for a while.

Vetur

Vetur code review tools can be very useful when writing vue code, just like building a vue project without vue-cli, vetur provides plug-in support for vscode, so bring vetur along with you in the rush to upgrade vue3.

A complete Vue3+ts project ├─ 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 writing method

... 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,} },}; 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 ("font color changed blue") This.color = "blue";}, handleClick () {Dialog ({title: "title", message: "this is a global button component",});}, 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);},}); .text-color {color: var (--color);}

Tsx writing method

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: '1Qing, name:' Zhang San', tel: '1300000000000, address: room 501, 7th floor, Dongfang Communication Building, 138Wen San Road, Xihu District, Hangzhou City, Zhejiang Province) IsDefault: true,}, {id: '2Qing, name:' Li Si', tel: '1310000000000, address:' 50 Mogan Mountain Road, Gongshu District, Hangzhou City, Zhejiang Province',},]) const disabledList = reactive ([{id: '3Qing, name:' Wang Wu') Tel: '1320000000000, address:' 15 Jiangnan Avenue, Binjiang District, Hangzhou City, Zhejiang Province',},] const onAdd = () > {showEdit.value = true} const onEdit = (item: any, index: string) = > {Toast ('Editing address:' + index) } const onClickLeft = () = > {router.back ()} const onClickRight = () = > {router.push ('/ todoList')} return () = > {return ();} At this point, I believe you have a deeper understanding of the "Vue3+TypeScript complete Project method tutorial". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.