Setting up TypeScript in Vue project - Quick Revision & Summary

Recall & Review

beginner

What is the first step to add TypeScript support in a new Vue 3 project?

Use the Vue CLI or Vite to create a new project and select TypeScript support during setup. For example, with Vite: run npm create vite@latest my-vue-app -- --template vue-ts.

intermediate

How do you enable TypeScript in an existing Vue 3 project?

Install TypeScript and Vue's TypeScript support packages, then rename .js files to .ts or .vue files with <script lang="ts">. Also, add a tsconfig.json file to configure TypeScript.

beginner

What is the purpose of lang="ts" in Vue single-file components?

It tells Vue and the build tools that the script section uses TypeScript syntax, so it should be compiled accordingly.

intermediate

Why do you need a shims-vue.d.ts file when using TypeScript in Vue?

Because TypeScript doesn't understand .vue files by default, this file declares modules for Vue files so TypeScript can process them without errors.

advanced

What is a common TypeScript configuration option to improve Vue development experience?

Setting strict: true in tsconfig.json helps catch errors early. Also, enabling jsx: preserve if using JSX, and including src/**/*.vue in include.

Which command creates a new Vue 3 project with TypeScript using Vite?

A npm create vite@latest my-app -- --template vue-ts

B vue create my-app --typescript

C npm init vue@latest my-app

D vue add typescript

Option A uses Vite with the Vue TypeScript template, which sets up TypeScript automatically.

In a Vue single-file component, how do you specify the script uses TypeScript?

A <script type="ts">

B <script type="typescript">

C <script lang="typescript">

D <script lang="ts">

The correct syntax is <script lang="ts"> to indicate TypeScript.

What file tells TypeScript how to handle .vue files?

A shims-vue.d.ts

B vue.config.js

C tsconfig.json

D package.json

The shims-vue.d.ts file declares modules for .vue files so TypeScript can understand them.

Which package is essential to install for TypeScript support in Vue 3?

A vue-router

B vuex

C typescript

D eslint

The typescript package is required to enable TypeScript features.

What is a benefit of enabling strict mode in tsconfig.json?

A It disables type checking.

B It helps catch errors early by enforcing stricter type checks.

C It makes the app run faster.

D It automatically converts JavaScript to TypeScript.

Strict mode enforces stricter type rules, helping find bugs early.

Explain the steps to set up TypeScript in a new Vue 3 project using Vite.

Think about project creation, file setup, and TypeScript declarations.

Describe why the shims-vue.d.ts file is important in a Vue TypeScript project.

Consider how TypeScript treats unknown file types.