Type Checking in Vite

Tutorial 3 of 5

Introduction

This tutorial aims to guide you through the process of type checking in a TypeScript/Vite project. Vite is a fast, modern build tool created by Evan You (the creator of Vue.js). It's designed to be as fast as possible, and it comes with out-of-the-box support for TypeScript.

By the end of this tutorial, you will understand how to configure Vite for type checking, how to utilize type checking in your TypeScript code, and how to interpret the results of your type checks.

Prerequisites:
- Basic understanding of JavaScript and TypeScript.
- Familiarity with the command line.
- Node.js and npm installed on your machine.

Step-by-Step Guide

TypeScript is a strongly-typed superset of JavaScript that allows developers to catch errors early through static type checking. Unlike JavaScript, which is dynamically-typed, TypeScript allows developers to specify the types of variables, function parameters, returned values, and object properties.

Here is a step-by-step guide on how to perform type checking in a TypeScript/Vite project.

Step 1: Creating a Vite Project

First, you need to create a new Vite project. If you already have a Vite project set up, you can skip this step. You can create a new Vite project using the following command:

npx create-vite my-vite-project --template vue-ts

Step 2: Configuring Vite for Type Checking

Vite does not perform type checking during the build process. You need to manually set up TypeScript for type checking. You can do this by adding a tsconfig.json file to your project root. This file contains configuration settings for the TypeScript compiler.

{
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "moduleResolution": "node",
  }
}

Step 3: Running Type Checks

You can run type checks in two ways: manually via the command line or automatically via your text editor.

Manually

You can perform a manual type check by running the TypeScript compiler (tsc). To do this, add a new check script to your package.json:

{
  "scripts": {
    "check": "tsc --noEmit"
  }
}

You can then run this script with npm run check.

Automatically

Many text editors, like Visual Studio Code, have built-in TypeScript support. This means that they will check your types as you write your code and highlight any errors.

Code Examples

Here is an example of how to use type checking in a Vue/Vite project:

// src/components/MyComponent.vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="doSomething">Click me</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  methods: {
    doSomething() {
      this.message = 'You clicked the button!'
    }
  }
})
</script>

In this example, message is implicitly typed as string due to its initial value, and doSomething is a method that changes the value of message. If you try to assign a non-string value to message, TypeScript will throw an error.

Summary

In this tutorial, we learned how to perform type checking in a TypeScript/Vite project. We looked at how to configure Vite and TypeScript for type checking and how to run type checks manually and automatically.

Practice Exercises

Exercise 1

Create a new Vite project with the Vue 3 + TypeScript template and add a component with typed data and methods.

Exercise 2

Introduce a type error in your component and fix it.