preface

TS, relatively speaking, is not too complex, if you have a Java foundation should be very easy to understand, no matter, is mainly a weak language to a strong language syntax concerns, the difference in addition to the component writing is not consistent, more is for the grasp of data types, such as inheritance, interface, overload and so on. This article will briefly create the initial VUE3+TS project and then explain some simple basic uses of TS

1. Prepare

1. Vue needs to use 3.X

2. After the project is created successfully, install vue-template-compiler and vue-property-decorator

3. After the project is created successfully, add “trailing-comma”: false to tslint.json

2. Create projects

1. Vue create TS-test The configuration items are as follows

2. After creating the project, install vue-template-compiler and vue-property-decorator, and add “trailing-comma” to tslint.json: False, and add the vue.config.js folder to the root directory for later configuration of the WebPack configuration.

3. Change the contents of shims-vue.d.ts to the following:

4. Add the shims-tsx.d.ts file as follows:

3. TS usage analysis

1. Component structure changes

In VUE, we know that a component is usually written in three chunks: Template, script, style. In TS, there is no difference in the usage of template and style parts in the component writing, but in script tag, the writing is very different from the conventional writing. To declare is to use TS parsing, and then the internal syntax is very different from VUE

2. TS component writing template, first understand how to use TS, and then consider other details of things, so, the first step, need to know how to write a TS template.

    <template>
      <div id="nav">
         ....
      </div>
    </template>
    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    @Component({
      name: '***',
      components: {***}
    })
    export default class extends Vue {
    ....
    }
    </script>

    <style lang="scss">
  
    </style>

Copy the code

3. What are the changes in usage of script modules in vue compared with TS?

1. Name and components: name is used to declare the current component name, components is used to introduce child components, but they are allocated to the @ Component area, so what is @ Component? It is a decorator that decorates a component and is used to add various “decorator properties” to the component, which is what annotations in Java mean. To add decorator properties to a component, name is a component name property and components is a component child property. It should make sense to put them in @ Component. Specific usage is as follows:

Export Default Class extends Vue extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends It has access to properties and methods owned by vUE.

3. Ok, the third question, according to the previous, now it is time to write data method, that is, it is time to write vue local database, so, this piece, TS and Vue have a big difference, the difference is, TS can be directly written in the class, why? Because variables in class objects are inherently local, they are called use boundaries, or scopes. So, if you want to add variables, objects, arrays, etc. to data, in TS, you can declare them directly in the class. Specific usage is as follows:

As you can see, we created two variables in the class (object), one is Num, one is item, so there are some unfamiliar words like private, :number, and so on, this is because TS is a strong language, and js is a weak language. So we define a variable and can change it to any type of data, but strong languages require you to specify the type of the variable to be created. Once the type is determined, the subsequent changes can only be assigned to the value of the same type, for example: Js is just like when you are working in a small startup company. The project you use depends entirely on what you want to use. Even if you want to use VUE today, you can change it to React tomorrow. You have to follow a set of rules set by the company. If you don’t follow them, your manager will tell you what’s not standard. Just understand that. We’ll talk about types later, but now we’ll talk about variation

Created, Mounted, prop, Watch, Methods,minxins, provide/inject Model, computed, emit, and so on

1. Created and Mounted are the same in TS. If a prefix is created, it specifies a private or public property definition.

The default value is in front, the received value is in the back, and the received value type is defined as follows, where the property after! ,! And optional parameters? It’s relative! To enforce resolution (that is, to tell the typescript compiler I must have a value here), you write? Typescript will indicate that it may be undefined

3. Watch, also decorated with @, is called XXX(Watch) decorator. The parameter inside the decorator declares the object to be monitored. True} is passed to the second parameter, after the decorator (bottom), declaring the logic to listen for the call.

4. Methods, the previous methods, are usually written in methods, while in TS, the methods used by components can be written directly in classes (objects)

5. Mixin is often used in projects, so how to use it in TS? First we need to create mixin.js, create something we want to share, and then import it in the component and register it with the @Component decorator.

6. Provide /inject, which is not used much, is also decorated with @, and then @provide declares a value, and @inject is used elsewhere.

7. Model, which allows a custom component to customize prop and Event when using a V-Model. By default, a V-Model on a component uses value as prop and input as event. But some input types such as checkboxes and checkbox buttons may want to use Value Prop for different purposes. In TS, the @ decoration is used generically, and then the parameter is the redefined method and type value definition, followed by the value

8. Computed, there is no corresponding decorator for computed in TS, so it can be implemented directly through GET and set

9. Emit. It is a common method for children to send value to their parents and then call the parent method.

4. After talking about the differences between TS and Vue in script module, let’s talk about the definition of variables and method types. That is, type definitions in strong languages.

ES6 Data type: Boolean, Number, String, Array, Function, Object, Symbol, undefined, null, ES6 has the above data types. TS, on the basis of ES6, adds void, any, Never, Tuple, enum, and advanced types

Boolean, Number, String, Array, Function, Object, Symbol, undefined, null,any, void, Tuple Most types are known, and I don’t need to say more, but mainly Tuple, any, void, Function, and Object

1. Tuple: When you define an array, you need to declare the type of the array, that is, the type of the inner element. You can declare either number or string, which is a single type of array.

Any is a generic type in TS. Simply put, when a variable is defined as any, you can make the same changes to it as you would to js. That is, the variable is no longer typed.

    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean
Copy the code

Void, as opposed to any, means that there is no type. When a function does not return a value, it is common to see the return type void: note that declaring a void variable is of little use because you can only give it undefined and null..

  function warnUser(): void {
   alert("This is my warning message");
   }
Copy the code

4. Function, a function has input and output. To constrain it in TypeScript, both input and output are taken into account; the type definition of function declarations is simpler

     function sum(x: number, y: number): number {
          return x + y;
      }
Copy the code

5. Object: For data of Object type, TS is different from other Settings. It needs to be implemented through the interface. So there are many properties in the object, so how to set these properties? Directly on the object in the set doesn’t work, so, this time, will be divided into the two-step create an object, the first step is to define the first, to create the object, probably long what appearance, what is the data type of each attribute, this can be called is to define the object template, and then defined it template, When you create an object, you can declare that its data type is the object template, so that the object’s attribute types are defined. The sign indicates that the parameter attribute may or may not exist

conclusion

Mountains and rivers since often in, flowers spring qing open future.