Vue's new partner TypeScript quick start practice record

Vue officially rewrote some of its components using Ts starting from version 2.6.X

I personally don’t have a positive opinion on stricter genre restrictions. After all, we are used to all kinds of genre-changing writing styles.

One of my recent projects is TypeScript + Vue . What a great idea! I’m going to learn it...it’s really fun!

Note the "before" in the title of this article. This article aims to talk about the use of Ts mixin framework, not Class API

1. Build using the official scaffolding

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

The new Vue CLI tool allows developers to create new projects with TypeScript integration.

Just run vue create my-app .

The command line will then ask you to select a preset. Use the arrow keys Manually select features .

Next, just make sure TypeScript and Babel options are selected, as shown below:

Once you've done that, it will ask you if you want to use class-style component syntax .

Then configure the rest of the settings so it looks like the image below.

The Vue CLI tool will now install all dependencies and set up the project.

Next, run the project

2. Project directory analysis

After viewing the directory structure through the tree command, you can find that its structure is very different from the normal build.

Here we mainly focus on the two files shims-tsx.d.ts and shims-vue.d.ts

Two sentences to summarize:

• shims-tsx.d.ts allows you to write jsx code in Vue projects with files ending in .tsx
• shims-vue.d.ts is mainly used for TypeScript to identify .vue files. Ts does not support the import of vue files by default. This file tells ts to import .vue files and process them according to VueConstructor<Vue> .

Now when we open the familiar src/components/HelloWorld.vue , we will find that the writing method is very different.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- omitted-->
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
 
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

At this point, we are ready to start a new chapter TypeScript Quick Start and vue-property-decorator

3. Quick Start with TypeScript

3.1 Basic types and extended types

Typescript shares the same basic types as Javascript , but has some additional types.

• Tuple
• enum
• Any and Void

1. Basic Type Collection

// Numbers, binary, octal, and hexadecimal are all supported let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
 
// string, single or double quotes are OK let name: string = "bob";
let sentence: string = `Hello, my name is ${ name }.
 
// Array, the second way is to use array generics, Array<element type>:
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
 
let u: undefined = undefined;
let n: null = null;

2. Special types

1. Tuple

Think of a tuple as an organized array where you need to predefine the data types in the correct order.

const messyArray = ['something', 2, true, undefined, null];
const tuple: [number, string, string] = [24, "Indrek" , "Lasn"]

Typescript will warn you if you don't follow the indexing rules for the pre-set ordering of tuples.

(The first item tuple should be of type number )

2. enum

enum type is a supplement to the JavaScript standard data types. Like C# and other languages, enumeration types can be used to give friendly names to a set of values.

// By default, element numbers start at 0, but you can also manually start at 1 enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
 
let colorName: string = Color[2];
console.log(colorName); // Outputs 'Green' because its value in the code above is 2

Another great example is using enums to store application state.

3. Void

In Typescript , you have to define the return type in your function . Like this:

If there is no return value, an error will be reported:

We can define its return value as void :

You will not be able return at this time

4. Any

Emmm...any type is fine. You can use this when you are not sure what type you are dealing with.

But it must be used with caution, as using it too much will defeat the purpose of using Ts.

let person: any = "Front-end dissuasion teacher"
person = 25
person = true

The main application scenarios are:

• Accessing third-party libraries
• Ts noobs use it in the early stage

5. Never

To put it simply, " Never is the father you will never have."

The specific behaviors are:

• throw new Error(message)
• return error("Something failed")
• while (true) {} // 存在無法達到的終點

3. Type Assertions

The brief definition is: it can be used to manually specify the type of a value.

There are two ways to write it, angle brackets and as :

let someValue: any = "this is a string";
 
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;

Examples of use include:

When TypeScript is unsure of the type of a variable of a union type, we can only access properties or methods that are common to all types of the union type:

function getLength(something: string | number): number {
    return something.length;
}
 
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

If you access the length, an error will be reported. Sometimes, we really need to access a property or method of a type when the type is not yet determined. At this time, an assertion is required to avoid an error:

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

3.2 Generics

A major part of software engineering is building components. The built components not only need to have clear definitions and unified interfaces, but also need to be reusable. Components that support existing data types and data types that will be added in the future provide great flexibility in the development process of large software systems.

In C# and Java , you can use "generics" to create reusable components that support multiple data types. This allows users to use components according to their own data types.

1. Generic methods

In TypeScript, there are two ways to declare generic methods :

function gen_func1<T>(arg: T): T {
    return arg;
}
// or let gen_func2: <T>(arg: T) => T = function (arg) {
    return arg;
}

There are also two ways to call :

gen_func1<string>('Hello world');
gen_func2('Hello world'); 
// The second calling method can omit the type parameter because the compiler will automatically identify the corresponding type based on the passed parameter.

2. Generics and Any

The special type Any of Ts can replace any type when used. At first glance, there seems to be no difference between the two, but in fact:

// Method 1: Method with any parameter function any_func(arg: any): any {
    console.log(arg.length);
		return arg;
}
 
// Method 2: Array generic method function array_func<T>(arg: Array<T>): Array<T> {
	  console.log(arg.length);
		return arg;
}

• Method 1 prints length attribute of arg parameter. Because any can replace any type, this method will throw an exception if the passed parameter is not an array or an object with length attribute.
• Method 2 defines the parameter type as a generic type of Array , which will definitely have length property, so no exception will be thrown.

3. Generic Types

Generic interface:

interface Generics_interface<T> {
    (arg: T): T;
}
 
function func_demo<T>(arg: T): T {
    return arg;
}
 
let func1: Generics_interface<number> = func_demo;
func1(123); // Actual parameter of the correct type func1('123'); // Actual parameter of the wrong type

3.3 Custom types: Interface vs Type alias

Interface , translated into interface in China.

Type alias , type alias.

1. Similarities

Can be used to describe an object or function:

interface User {
  name: string
  age: number
}
 
type User = {
  name: string
  age: number
};
 
interface SetUser {
  (name: string, age: number): void;
}
type SetUser = (name: string, age: number): void;

Both allow extensions:

Both interface and type can be extended, and the two are not independent of each other, that is, interface can extends type , and type can also extends interface . Although the effect is similar, the syntax of the two is different .

interface extends interface

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type extends type

type Name = { 
  name: string; 
}
type User = Name & { age: number };

interface extends type

type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

type extends interface

interface Name { 
  name: string; 
}
type User = Name & { 
  age: number; 
}

2. Differences

type is OK but interface is not

type can declare basic type aliases, union types, tuples, etc.

// Basic type alias type Name = string
 
//Union type interface Dog {
    wong();
}
interface Cat {
    miao();
}
 
type Pet = Dog | Cat
 
// Specifically define the type of each position in the array type PetList = [Dog, Pet]

In the type statement, you can also use typeof to obtain the type of the instance for assignment

// When you want to get the type of a variable, use typeof
let div = document.createElement('div');
type B = typeof div

Other tricks

type StringOrNumber = string | number;  
type Text = string | { text: string };  
type NameLookup = Dictionary<string, Person>;  
type Callback<T> = (data: T) => void;  
type Pair<T> = [T, T];  
type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface is OK but type is not

interface can declare merge

interface User {
  name: string
  age: number
}
 
interface User {
  sex: string
}
 
/*
The User interface is {
  name: string
  age: number
  sex: string 
}
*/

interface has optional attributes and read-only attributes

Optional attributes

Not all attributes in an interface are required. Some exist only under certain conditions, or not at all. For example, only some properties of the parameter object passed to the function are assigned values. An interface with optional attributes is similar to a normal interface definition, except that a ? symbol is added after the optional attribute name definition. As shown below

interface Person {
  name: string;
  age?: number;
  gender?: number;
}

Read-only properties

As the name implies, this property is not writable, and the value of an object property can only be modified when the object is just created. You can specify a read-only property by using readonly before the property name, as shown below:

interface User {
    readonly loginName: string;
    password: string;
}

The above example shows that loginName cannot be modified after the User object is initialized.

3.4 Implementation and inheritance: implements vs extends

extends is obviously the class inheritance in ES6, so what does implement do? How is it different from extends ?

implement , implement. Similar to the basic role of interfaces in C# or Java, TypeScript can also use it to explicitly force a class to conform to a certain contract.

Basic usage of implement :

interface IDeveloper {
   name: string;
   age?: number;
}
// OK
class dev implements IDeveloper {
    name = 'Alex';
    age = 20;
}
// OK
class dev2 implements IDeveloper {
    name = 'Alex';
}
// Error
class dev3 implements IDeveloper {
    name = 'Alex';
    age = '9';
}

And extends inherits the parent class, the two can actually be used interchangeably:

class A extends B implements C,D,E

The usage of interface and type is:

3.5 Declaration files and namespaces: declare and namespace

Earlier we talked about shims-tsx.d.ts and shims-vue.d.ts in the Vue project. The initial content is as follows:

// shims-tsx.d.ts
import Vue, { VNode } from 'vue';
 
declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}
 
// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare : When using a third-party library, we need to reference its declaration file to obtain corresponding code completion, interface prompts and other functions.

Here are a few commonly used ones:

declare var declares a global variable
declare function declares a global method
declare class declares a global class
declare enum declares a global enumeration type
declare global expands global variables
declare module

namespace : "Internal modules" are now called "namespaces"

module X { This is equivalent to the currently recommended syntax namespace X { )

Collaboration with other JS libraries

Similar to modules, you can also create declaration files for .d.ts files for other JS libraries that use namespaces. For example, for the D3 JS library, you can create a declaration file like this:

declare namespace D3{
    export interface Selectors { ... }
}
declare var d3: D3.Base;

So the two files above:

• shims-tsx.d.ts batch names several internal modules in the global variable global .
• shims-vue.d.ts means telling TypeScript that files with the *.vue suffix can be handed over to the vue module for processing.

3.6 Access modifiers: private, public, protected

It’s actually pretty easy to understand:

1. Default is public
2. When a member is marked as private , it cannot be accessed from outside the class in which it is declared, for example:

class Animal {
    private name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
 
let a = new Animal('Cat').name; // Error, 'name' is private

protected is similar to private , but protected members are accessible in derived classes.

class Animal {
    protected name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
 
class Rhino extends Animal {
    constructor() {
        super('Rhino');
   }         
   getName() {
       console.log(this.name) //The name here is the name in the Animal class
   }
}

3.7 Optional Parameters (?:) and the Non-Null Assertion Operator (!.)

Optional parameters

function buildName(firstName: string, lastName?: string) {
    return firstName + ' ' + lastName
}
 
// Error demonstration buildName("firstName", "lastName", "lastName")
// Correct demonstration of buildName("firstName")
// Correct demonstration of buildName("firstName", "lastName")

Non-null assertion operator:

Use when you can be sure that the variable value is definitely not empty.

Unlike optional parameters, the non-null assertion operator does not protect against null or undefined.

let s = e!.name; // assert that e is non-null and access the name property

expand

1. Use in attributes or parameters? : Indicates that the attribute or parameter is optional

2. Use ! in attributes or parameters. : Indicates forced parsing (tells the typescript compiler that there must be a value here), commonly used in @Prop in vue-decorator

3. Use after variable! : Indicates that type inference excludes null and undefined

4. Ts writing of Vue components

Since vue2.5, vue has better support for ts. According to the official documentation, there are two ways to write Vue in combination with TypeScript:

Vue.extend

 import Vue from 'vue'
 
  const Component = Vue.extend({
  	// type inference enabled
  })

vue-class-component

import { Component, Vue, Prop } from 'vue-property-decorator'
 
@Component
export default class Test extends Vue {
  @Prop({ type: Object })
  private test: { value: string }

Ideally, the way to write Vue.extend is the easiest to learn. Based on the existing writing method, migration is almost zero cost.

However, the Vue.extend mode needs to be used in combination with mixins . Methods defined in mixins are not recognized by typescript

, which means that there will be problems such as missing code hints, type checking, and compilation errors.

Only newbies make choices, big guys pick the best. Let's talk about the second one directly:

4.1 vue-class-component

Let's go back to src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- omitted-->
  </div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
 
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

Students who have written python should find it familiar:

vue-property-decorator an officially supported library, provides the function decorator syntax

1. Function modifier @

“@” is more of a reference or call to the function it modifies than a function modification.

Or to put it in plain language: @ : "The following is surrounded by me."

For example, the following code has two functions that are not called, but will also produce output results:

test(f){
    console.log("before ...");
    f()
		console.log("after ...");
 }
 
@test
func(){
	console.log("func was called");
}

Run directly and output the result:

before ...
func was called
after ...

From the above code, we can see that:

• Only two functions are defined: test and func , but they are not called.
• Without @test, the run should produce no output.

However, when the interpreter reads the function modifier "@", the following steps will be:

1. To call the test function, the entry parameter of test function is the function called " func ";
2. test function is executed, and the entry parameter (that is, func function) is called (executed);

In other words, the entry parameter of the function with the modifier is the entire function below. It is a bit similar function a (function () { ... }); in JavaScrip .

2. Decorators provided by vue-property-decorator and vuex-class

Decorator of vue-property-decorator :

• @Prop
• @PropSync
• @Provide
• @Model
• @Watch
• @Inject
• @Provide
• @Emit
• @Component (provided by vue-class-component)
• Mixins (the helper function named mixins provided by vue-class-component)

vuex-class decorator:

• @State
• @Getter
• @Action
• @Mutation

Let's take a look at the original Vue component template:

import {componentA,componentB} from '@/components';
 
export default {
	components: { componentA, componentB},
	props: {
    propA: { type: Number },
    propB: { default: 'default value' },
    propC: { type: [String, Boolean] },
  }
  // Component data data () {
    return {
      message: 'Hello'
    }
  },
  // Computed properties computed: {
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
    // Vuex data step() {
    	return this.$store.state.count
    }
  },
  methods: {
    changeMessage () {
      this.message = "Good bye"
    },
    getName() {
    	let name = this.$store.getters['person/name']
    	return name
    }
  },
  // Life cycle created () { },
  mounted () { },
  updated () { },
  destroyed () { }
}

The above template is replaced with the modifier writing rule:

import { Component, Vue, Prop } from 'vue-property-decorator';
import { State, Getter } from 'vuex-class';
import { count, name } from '@/person'
import { componentA, componentB } from '@/components';
 
@Component({
    components:{ componentA, componentB},
})
export default class HelloWorld extends Vue{
	@Prop(Number) readonly propA!: number | undefined
    @Prop({ default: 'default value' }) readonly propB!: string
    @Prop([String, Boolean]) readonly propC!: string | boolean | undefined
  
  // Original data
  message = 'Hello'
  
  // Computed properties private get reversedMessage (): string[] {
  	return this.message.split('').reverse().join('')
  }
  // Vuex data @State((state: IRootState) => state . booking. currentStep) step!: number
	@Getter( 'person/name') name!: name
  
  // method
  public changeMessage (): void {
    this.message = 'Good bye'
  },
  public getName(): string {
    let storeName = name
    return storeName
  }
	// Life cycle private created (): void { },
  private mounted ()：void { },
  private updated ()：void { },
  private destroyed(): void { }
}

As you can see, we add private XXXX methods in the lifecycle list, because this should not be exposed to other components.

The reason for not making private constraints on method is that @Emit may be used to pass information to the parent component.

4.2 Adding global tools

To introduce global modules, you need to modify main.ts :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
Vue.config.productionTip = false;
 
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

npm i VueI18n

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// New module import i18n from './i18n';
 
Vue.config.productionTip = false;
 
new Vue({
    router, 
    store, 
    i18n, // New module render: (h) => h(App),
}).$mount('#app');

But this alone is not enough. You need to move src/vue-shim.d.ts :

//Declare global method declare module 'vue/types/vue' {
  interface Vue {
        readonly $i18n: VueI18Next;
        $t: TranslationFunction;
    }
}

If you use this.$i18n() later, no error will be reported.

4.3 Axios usage and packaging

Axios packaging has different uses for different people

If you just want to experience using Axios in TS, you can install vue-axios to use Axios

$ npm i axios vue-axios

main.ts add:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

Then use it in the component:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.$http.get(api).then((response) => {
  console.log(response.data)
})

1. Create a new file request.ts

File Directory:

-api
    - main.ts //Actually call -utils
    - request.ts // Interface encapsulation

2. request.ts file parsing

import * as axios from 'axios';
import store from '@/store';
// This can be replaced according to the specific UI component library used import { Toast } from 'vant';
import { AxiosResponse, AxiosRequestConfig } from 'axios';
 
 /* baseURL is defined according to the actual project*/
const baseURL = process.env.VUE_APP_URL;
 
 /* Create an axios instance */
const service = axios.default.create({
    baseURL,
    timeout: 0, // Request timeout maxContentLength: 4000,
});
 
service.interceptors.request.use((config: AxiosRequestConfig) => {
    return config;
}, (error: any) => {
    Promise.reject(error);
});
 
service.interceptors.response.use(
    (response: AxiosResponse) => {
        if (response.status !== 200) {
            Toast.fail('Request error!');
        } else {
            return response.data;
        }
    },
    (error: any) => {
        return Promise.reject(error);
    });
    
export default service;

For convenience, we also need to define a fixed format returned by axios and create a new ajax.ts :

export interface AjaxResponse {
    code: number;
    data: any;
    message: string;
}

3. main.ts interface call:

// api/main.ts
import request from '../utils/request';
 
// get
export function getSomeThings(params:any) {
    return request({
        url: '/api/getSomethings',
    });
}
 
// post
export function postSomeThings(params:any) {
    return request({
        url: '/api/postSomethings',
        methods: 'post',
        data:params
    });
}

5. Write a component

To save time, let's replace src/components/HelloWorld.vue with a blog post component:

<template>
	<div class="blogpost">
		<h2>{{ post.title }}</h2>
		<p>{{ post.body }}</p>
		<p class="meta">Written by {{ post.author }} on {{ date }}</p>
	</div>
</template>
 
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
 
// Type constrain the data here export interface Post {
	title: string;
	body: string;
	author: string;
	datePosted: Date;
}
 
@Component
export default class HelloWorld extends Vue {
	@Prop() private post!: Post;
 
	get date() {
		return `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}`;
	}
}
</script>
 
<style scoped>
h2 {
  text-decoration: underline;
}
p.meta {
  font-style: italic;
}
</style>

Then use it in Home.vue :

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
   	<HelloWorld v-for="blogPost in blogPosts" :post="blogPost" :key="blogPost.title" />
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld, { Post } from '@/components/HelloWorld.vue'; // @ is an alias to /src
 
@Component({
  components:
    HelloWorld,
  },
})
export default class Home extends Vue {
    private blogPosts: Post[] = [
        {
          title: 'My first blogpost ever!',
          body: 'Lorem ipsum dolor sit amet.',
          author: 'Elke',
          datePosted: new Date(2019, 1, 18),
        },
        {
          title: 'Look I am blogging!',
          body: 'Hurray for me, this is my second post!',
          author: 'Elke',
          datePosted: new Date(2019, 1, 19),
        },
        {
          title: 'Another one?!',
          body: 'Another one!',
          author: 'Elke',
          datePosted: new Date(2019, 1, 20),
        },
      ];
}
</script>

Now run the project:

This is a simple parent-child component.

As for the withdrawal of Class API , it is actually quite comfortable. It's really weird to use class to write Vue components. (So ​​this article on Ts introduction does not describe Class API at all)

The above is the detailed content of the quick start practice of Vue's new partner TypeScript. For more information about Vue TypeScript quick start, please pay attention to other related articles on 123WORDPRESS.COM!