TypeScript with Vue.js

Welcome to the NOVA LAB Quantum Laboratory! Year 2087 — the space station systems demand the highest precision. Any error in a data type could lead to a catastrophe. That's why our engineers use TypeScript — a static type system that catches errors before the code even runs.

Why TypeScript with Vue?

TypeScript is a superset of JavaScript that adds static types. Combined with Vue 3, it gives us:

• Autocompletion in the code editor (IntelliSense)
• Error detection before running the application
• Better documentation — types describe the shape of data
• Refactoring — the editor understands the code structure

Setting Up a Vue Project with TypeScript

Creating a Vue project with TypeScript is simple thanks to Vite:

1npm create vite@latest nova-lab -- --template vue-ts

Vite automatically configures TypeScript and creates a

tsconfig.json

file:

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "moduleResolution": "bundler",
6    "strict": true,
7    "jsx": "preserve",
8    "paths": {
9      "@/*": ["./src/*"]
10    }
11  },
12  "include": ["src/**/*.ts", "src/**/*.vue"]
13}

The lang="ts" Attribute

In Vue SFC (Single File Components), we add

lang="ts"

to the

<script setup>

block:

1<script setup lang="ts">
2import { ref } from 'vue'
3
4const stationName = ref<string>('NOVA LAB')
5const crewCount = ref<number>(42)
6const isOnline = ref<boolean>(true)
7</script>

Without

lang="ts"

, Vue treats the code as plain JavaScript. With

lang="ts"

, the TypeScript compiler checks types and catches errors.

Basic Types in Vue

1<script setup lang="ts">
2import { ref } from 'vue'
3
4// Simple types
5const name: string = 'Mars Station'
6const year: number = 2087
7const active: boolean = true
8
9// Arrays
10const modules: string[] = ['Lab', 'Hangar', 'Bridge']
11const temperatures: number[] = [-63, -58, -71]
12
13// Ref with generic type
14const status = ref<string>('operational')
15const energy = ref<number>(98.5)
16</script>

TypeScript automatically infers types, so you don't always have to specify them explicitly:

1const count = ref(0)       // ref<number> — inferred automatically
2const label = ref('test')  // ref<string> — inferred automatically

Explicit typing is useful when the type cannot be inferred:

1const data = ref<string | null>(null)  // can be string or null

TypeScript Interfaces

Interfaces define the shape of objects:

1interface CrewMember {
2  id: number
3  name: string
4  role: string
5  active: boolean
6}
7
8const engineer: CrewMember = {
9  id: 1,
10  name: 'Dr. Nova',
11  role: 'Chief Engineer',
12  active: true
13}