I. Learn TypeScript.

1. What is TypeScript?

TypeScript is a higher version of JavaScript, designed to build large and complex applications. It inherits many concepts from Java and C #, TypeScript is a static typed language which means that it is strict and orderly as opposed to free-type. It also adds an object-oriented class that is not available in Javascript.

2. Why is it called a more advanced version of Javascript?

With TypeScript, we can put JavaScript code in the same file and run together normally, because TypeScript maintains the syntax of JavaScript and extends it with a bunch of new features. Thanks to that, working efficiency is significantly increased.

TypeScript is a Microsoft project that spans more than 3 years to create a language to expand JavaScript. Make it more suitable for large applications, but still familiar with the current JS language structure so that everyone can learn faster. The project leader is Anders Hejlsberg, the father of C #, Turbo Pascal and Delphi.

Why is it needed with Vue.js?

For vue.js 3.0, the Vue.js 3.0 code base will be completely rewritten in TypeScript, this will not affect ES6 developers, but it will certainly improve a lot of experience. TypeScript. This you can see here

II. Using TypeScript in Vue.js.

1. Create a project with CLI.

With Vue CLI 3, you can create a new project with TypeScript configured quite simply, you only need to pay attention to select TypeScript when creating a new project with CLI.

Then you choose yes is ok.

If you already have a vue project that wants to add TypeScript, you can do the following.

2. Configure the TypeScript compiler

Because TypeScript requires a step to build, you can customize TypeScript according to the needs of the project through the file tsconfig.json. This file will be located in the project’s root directory.

Experiment with these options to find out which one is most useful to you and your project. I would recommend activating noImplicitAny, noImplicit This, noImplicitReturn at the most basic level.

noImplicitAny: Increase the ability to find errors with expressions or variables declared, it will give an error if an argument, const, let or var does not have a data type.

noImplicitThis: Similar to noImplicitAny but will cause errors with this keyword.

noImplicitReturns: Error message when not all code paths in the function return values. This helps ensure that all conditions in a given function return a specific value and data type.

In tsconfig.js

3. Basic data types

1. Data types in TypeScript

There are 12 types of data types in TypeScript.

• boolean
• number
• string
• array
• object
• tuple
• enum
• any
• void
• undefined
• null
• never

The common types you will use are of primitive data types: string, number, boolean, null, undefined, and void. However, there will be times when you need to create a custom data type. To create you can use Interface in TypeScript.

2. Customize a data type.

In your root directory, create a directory and name it types. In this new directory, create a new file named index.ts. You use the interface to declare.

From here, you can start determining the properties and value types that the object will have.

In this example, you can declare another custom data type as follows.

We can now use this custom data type in any Vue.js (.vue) or TypeScript (.ts) file we want.

Use custom data types in a single file Vue (SFC) components

Now that we have created our own data type, to use you need to import SFCs like other ESM, JavaScript files, etc.To use TypeScript in your component, you will need to add a lang attribute to it. script tag. The value of that attribute must be ts.

When using TypeScript in Vue components, the Vue library must be imported so you can extend from it. Because I don’t use class type syntax, you need to use the as keyword to declare data under data types. in App.vue

For variables declared const, let, var or a function return type, you can define the data type for it using a colon:.

3. Declaration of handling

After you’ve created the Vue project, you can see the shims-vue.d.ts file. It is a manifest file (.d.ts). The manifest is a file that does not contain any executable code, but contains descriptions of code that exist outside the project files.

They are very useful when using Node modules that do not contain any interfaces. You may understand that the only purpose of this file is to let TypeScript know how to handle external code.

In the file shims.d.ts

In the above case, you can basically understand that I am telling the TypeScript (and IDE) compiler how to handle .vue files.

III. Conclude.

So I have introduced how to use TypeScript in Vue.js basically. You can simply understand that TypeScript is JavaScript like SASS is CSS and to use it better, you can learn more lessons on TypeScript online.

Reference link: https://alligator.io/vuejs/using-typescript-with-vue/