[vue] 뷰.js에서 타입스크립트 사용하기

https://vuejs.org/guide/typescript/overview.html#typescript-in-templates 읽고 필요한 부분만 정리한 내용

Using Vue with TypeScript

General Usage Notes

defineComponent()

TypeScript가 component option들의 타입을 제대로 추론하기 위해서 컴포넌트를 선언할 때 defineComponent를 사용한다.

import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
  props: {
    name: String,
    msg: { type: String, required: true }
  },
  data() {
    return {
      count: 1
    }
  },
  mounted() {
    this.name // type: string | undefined
    this.msg // type: string
    this.count // type: number
  }
})

Usage in SFC

script 태그에 lang="ts"를 추가한다.

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

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>

<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>

TypeScript int Templates

<script lang="ts>일 때 template도 TypeScript 지원함

- 부자연스러운 코드

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

export default defineComponent({
  data() {
    return {
      count: 1
    }
  }
})
</script>

<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>

count가 string일 때 에러남

- inline type cast를 통해 해결

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>