feat(typescript): add `TypeScript` support

[beatrizsmerino]

feat(typescript): add TypeScript support

⏱️ Estimate	📊 Priority	📏 Size	📅 Start	📅 End
4h	P3	M	24-01-2026	24-01-2026

📸 Screenshots

Current	Expected
N/A — This change has no visual impact.	N/A — This change has no visual impact.

📝 Summary

• Add TypeScript support (typescript, vue-tsc, @vue/tsconfig)
• Configure TypeScript with vue@3 and ESLint (@typescript-eslint/parser, @typescript-eslint/eslint-plugin)
• Add type declarations (env.d.ts, shims-vue.d.ts) and optionally migrate components

💡 Why this change?

• JavaScript lacks static type checking, causing runtime errors that could be caught earlier
• Without type annotations, IDE support is limited to inference
• The vue@3 was designed with TypeScript as a first-class citizen
• Industry standard for modern frontend projects

✅ Benefits

• Catch type errors at compile time before they reach production
• Full IDE autocompletion, IntelliSense and refactoring support
• Self-documenting code with explicit type contracts
• Safer and easier refactoring across the codebase
• Access to vue@3 typed APIs (defineProps, defineEmits, Ref<T>)

📋 Steps

Phase 1: Install TypeScript dependencies

• Install TypeScript and Vue TypeScript support as devDependencies:
  • typescript
  • vue-tsc
  • @vue/tsconfig

npm install -D typescript vue-tsc @vue/tsconfig

• Install TypeScript and ESLint support as devDependencies:
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Phase 2: Create TypeScript configuration

• Create tsconfig.json:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"]
}

• Update or remove jsconfig.json (tsconfig.json replaces it)

Phase 3: Update Vite configuration

• Update vite.config.js to vite.config.ts (optional)
• Ensure Vite handles TypeScript files

Phase 4: Add type checking script

• Add type check script to package.json:

"scripts": {
  "ts:check": "vue-tsc --noEmit",
  "build": "vue-tsc --noEmit && vite build"
}

Phase 5: Update ESLint configuration

• Add TypeScript support to eslint.config.js:

import tseslint from "typescript-eslint";

export default tseslint.config(
  // ... existing config
  ...tseslint.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx", "**/*.vue"],
    languageOptions: {
      parserOptions: {
        projectService: true,
      },
    },
  },
);

Phase 6: Add type declarations

• Create src/env.d.ts for environment variables:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_GOOGLE_MAPS_API_KEY: string;
  // add more env variables as needed
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

• Create src/shims-vue.d.ts if needed:

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

Phase 7: Migrate files to TypeScript (optional)

• Rename .js files to .ts gradually
• Add type annotations to Vue components:

<script setup lang="ts">
import { ref } from "vue";

const count = ref<number>(0);
</script>

• Add types to props, emits, and composables

🧪 Tests

• Verify TypeScript checking runs without errors:

npm run ts:check

• Confirm build runs successfully:

npm run build

• Check that the IDE shows autocompletion and type hints for TypeScript files
• Check for runtime errors from type issues
• Confirm ESLint works with TypeScript files

📌 Notes

• This issue requires completing vue@3 migration first
• Can start with just configuration and migrate files gradually
• <script setup lang="ts"> is the recommended syntax for vue@3
• Consider using defineProps and defineEmits with type annotations

🔗 References

Files to create

• tsconfig.json
• src/env.d.ts
• src/shims-vue.d.ts

Files to modify

• vite.config.js
• eslint.config.js
• package.json

Files to remove

• jsconfig.json

Documentation

• https://vuejs.org/guide/typescript/overview.html
• https://vitejs.dev/guide/features.html#typescript
• https://typescript-eslint.io/

Related Issues

• feat(eslint): migrate to ESLint 9 flat config #1058
• feat(vue): migrate from Vue 2 to Vue 3 #1057