Typescript Ref Vue

Posted on  by admin

Introduction

Modified11 months ago. I am trying to learn Vue3 + Typescript (I so far wrote Vue2 apps with plain JS). I am trying to define a reactive variable in setup() :.

What is the correct syntax for creating a reactive Array of Note? 4242 gold badges140140 silver badges270270 bronze badges.

270270 bronze badges. It should be placed between <> :. by default the ref infers the type from the initial value like. 1414 gold badges106106 silver badges132132 bronze badges.

Prerequisites

132132 bronze badges. No need of making a reactive object for thatIt is used for an object.

  • Like @Boussadjra Brahim said add a type to the ref functionlike this. When I first started using typescript and vue together, I encountered problems when trying to call functions from the ref component/class or even assigning properties on the ref with types.
  • Now if you were to store it locally and try to type it:. If you type it as :Vue:.
  • At the top of your class, declare your refs in the $refs property with types:.

The exampleComponent ref is now typed as ExampleComponent and you have access to properties on the class. There may be another way of doing this, but for me, this seemed like a clean solution.

Step 1 — Setting Up the Project

Dan Potts Himself.

When using vue create, you will be prompted with project configurations:

For the purposes of this tutorial, the configuration will require:

In the selection prompt, choose TypeScript:

Answer the following prompts:

Note: While bootstrapping a new project, you will also be prompted with: Use class-style component syntax?.

Back in February, Evan You abandoned the class style syntax for the Vue 3.0 core library altogether.

It is a popular choice, but for the purposes of this tutorial, select No.

If you would like to explore a project with class-style components, consult Writing Class-Based Components with Vue.js and TypeScript.

Selecting “TypeScript” will do several things. It will automatically add @vue/cli-plugin-typescript to your project. It will replace main.js with main.ts. It will also add shims-tsx.d.ts, and shims-vue.d.ts.

Note: If you already have a Vue project created and want to add TypeScript support to it, you can do so with the following:

After generating your Vue project from the command line, you might have noticed the shims-vue.d.ts file. That is the declaration file (.d.ts).

A declaration file is a file that does not contain any executable code but contains descriptions of code that exists outside of the project files.

These are useful when using Node modules that do not contain any TypeScript interfaces, types, or declaration files. In a sense, the only purpose for these files is to tell TypeScript how to handle external code.

This code essential tells the TypeScript compiler (and the IDE) how to handle .vue files.

Once you have a Vue project with TypeScript, you can configure tsconfig.json.

Step 2 — Configuring the TypeScript Compiler

You can configure TypeScript to the needs of your team or project. There are many options that you can enable or disable with the use of a tsconfig.json file. This file should live in the root directory of your project.

Feel free to experiment with these options to find which is most useful for you and your project.

noImplicitAny, noImplicitThis, noImplicitReturns are options that will likely be beneficial to most situations:

  • noImplicitAny: Raise error on expressions and declarations with an implied any type. This will throw an error if an argument, const, let, or var doesn’t have a type. This is more of a mental check on yourself to create custom data types for your code.
  • noImplicitThis: Similar to noImplicitAny but will throw an error with the this keyword. Another mental check to encourage you to type everything you can.
  • noImplicitReturns: Report an error when not all code paths in the function return a value. This helps ensure that all conditions in a given function with a return type, returns a value.

Here is an example tsconfig.json:

tsconfig.json

More information about tsconfig.json is available in the official documentation.

Step 3 — Using Basic and Custom Data Types

In TypeScript, 12 basic types are supported:

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

The more common types that you will be using are the primitive types: string, number, boolean, null, undefined, and void.

However, there will be times when you will need to create a custom data type. For those situations, you can create something that TypeScript calls an Interface.

In your root directory, create a directory and name it types:

Inside this new directory, create a new file named, index.ts. You can declare a new interface with the interface keyword:

Note: It is considered best practice to use CamelCase for naming conventions.

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

In this example, you have an interface with an object inside it (location). This can be broken up further by nesting interfaces.

You can also make any property optional by adding a ? to it. This means that this property may or may not have a value.

Here are the previous index.ts rewritten with those changes:

types/index.ts

You can now use this custom data type in any Single-File Vue Component (.vue) or TypeScript (.ts) file.

Step 4 — Using Custom Data Types in Single-File Vue Components (SFCs)

Here is an example for App.vue that uses the User interface and displays the firstName and lastName:

In order to use TypeScript in this component, you will need to add a lang attribute to the script tag of your component. The value of that attribute should be ts.

When using TypeScript in single-file Vue components, the Vue library must be imported so you can extend from it.

Since you will not be using the class-style syntax, you use the as keyword to declare data as a data type.

For things like const, let, var, or a function return type, you can define its type with the colon (:).

After applying these changes to App.vue, it now resembles:

src/App.vue

This code imports the User interface and declares reactive data as type User.

The computed property returns a string, so a string type is defined. The mounted hook returns nothing, so a void type is defined. With these definitions in place, there will be no TypeScript errors when compiling.

Compile the application:

When you open the result in a browser, you should observe the full name displayed.

Conclusion

TypeScript is JavaScript. With TypeScript, you can be as strict or as lenient as you want. It helps keep your code base consistent and scalable as your project continues to grow.

TypeScript is also heavily integrated with various popular IDEs and editors (including VS Code, WebStorm, Sublime, Vim, Atom, and more). With these editors, TypeScript works in the background, behind the scenes to provide real-time clues, suggestions, and previews of function arguments and return types.

All-in-all, it is a language that continues to find its way into more tools, libraries, and frameworks that developers use every day. It has a strong Open Source community and the backing of Microsoft.

If you’d like to learn more about TypeScript, check out our TypeScript topic page for exercises and programming projects.