How to use TypeScript with Vue? | Vue.js Interview Questions

What You'll Learn

TypeScript setup
Typing props
Typing refs and reactive

Setup

code.txtVUE

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

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

Typing Props

code.txtVUE

<script setup lang="ts">
interface Props {
  title: string
  count?: number
  items: string[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  items: () => []
})
</script>

Typing Emits

code.txtVUE

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

emit('change', 1)
</script>

Typing Refs

code.txtVUE

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

// Template ref
const inputRef = ref<HTMLInputElement | null>(null)

// Component ref
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null)
</script>

Typing Reactive

code.tsTypeScript

interface State {
  count: number
  user: User | null
}

const state = reactive<State>({
  count: 0,
  user: null
})