Formation Apprendre Vue.js : TypeScript avec Vue.js

Dans ce chapitre nous allons voir comment utiliser TypeScript dans le cadre d'un projet Vue.js. La vérification du code et la validation des composants Vue.js nécessitera l'utilisation de vue-tsc. La méthode la plus simple est d'initialiser le projet avec le support de TypeScript dès la création du projet.

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

Il sera possible ensuite de préciser le langage à utiliser dans nos composants à l'aide de l'attribut lang.

<script lang="ts" setup>
</script>

L'utilisation de TypeScript va changer la manière de déclarer les propriétés et les évènements des composants.

<script lang="ts" setup>
const props = defineProps<{
    prefix: string
}>()

const emit = defineEmits<{
  change: [id: number] // named tuple syntax
  update: [value: string]
}>()

const model = defineModel<string>()
</script>

Pour plus d'information sur les spécificités de TypeScript dans le cadre de Vue.js n'hésitez pas à vous rendre sur la documentation