Jika kita menambahkan pada exisiting project, bisa kita gunakan NPM seperti berikut:

npm install -g typescript

kita bisa check rekomendasi config untuk TS disini

Code syntax untuk menggunakan TS di Vue

Pertama, Kita info ke Vue compiler yang ada bahwa Javascript yang ada adalah TypeScript. Di file Vue, di dalam script tag, lakukan ini:

<template>
</template>

<!--Add lang="ts" to specify it's TypeScript-->
<script lang="ts">
</script>

<style>
</style>

Lalu kita perlu modify syntax yang ada dengan TS umumnya. Pada Vue, ada 3 main Syntax:  the option API, the Composition API, dan the class API.

Option API

Ini adalah basic syntax pada Vue. tapi ada perbedaan cara export componentnya. Pada umumnya export tidak butuh tipe inference:

<template>
</template>

<scriptlang="ts">export default {
  //No type inference
  components: {},
  data() { return {} },
  computed: {},
  created() {},
  methods: {}
}</script>

<style>
</style>

Karenannya kita butuh Vue.extend untuk bisa export javascript kita.

<template>
</template>

<script>
import Vue from 'vue';

// Note the Vue.extend
export default Vue.extend({
  //Type inference
  components: {},
  data() { return {} },
  computed: {},
  created() {},
  methods: {}
})
</script>

<style>
</style>

Composition API

Syntax ini termasuk baru di Vue 3. jika kita mau gunakan pada Vue 2, kita bisa install composition-api package

Class API

Tujuan awal nya menggunakan Class API  adalah untuk menyediakan alternative API yang bisa support TypeScript inference. karenanya kita perlu install composition-api package (sudah ada di Vue CLI)
kemudian Buat Vue Component dengan cara seperti ini:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    myProp: {
      type: String
    }
  }
})
export default class HelloWorld extends Vue {
  myData: {name: string} = {name: 'test'}

  // computed are declared with get before a function
  get myComputed(): string {
    return this.myData.name
  }

  created() {}

  // methods are just functions
  myMethod(): boolean {
    return false
  }
}

Salah satun Keuntungannya kita bisa regroup ‘methods’ dan ‘computed’ bedasarkan functionalitynya.

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({})
export default class HelloWorld extends Vue {
  // Autocomplete functionality
  get computedRelatedToAutocomplete() {
    ...
  }
  methodRelatedToAutocomplete() {
    ...
  }

  // Search Functionality
  get computedRelatedToSearch() {
  ...
  }
  methodRelatedToSearch() {
  ...
  }
}

package vue-class-component sudah support di Vue 2, satu lagi improvementnya adalah kita pakai  vue-property-decorator. Package ini juga sudah ada di Vue CLI. dengan ini, props akan di set di dalam definition componentnya:

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  // The props are defined here with the annotation @Prop()
  @Prop()
  private msg!: string;

  myData: {name: string} = {name: 'test'}

  // computed are declared with get before a function
  get myComputed(): string {
    return this.myData.name
  }

  // methods are just functions
  myMethod(): boolean {
    return false
  }
}

Class API ini belum sepenuhnya sempurna di TS, dan akan digantikan dengan Composition API di Vue 3. jadi kalo sudah migrasi ke Vue 3 jangan gunakan cara ini. Di Vue 2 ini paling sesuai untuk sementara. kita juga bisa implement TS  ini satu2 ya di file yang exist dan di cek dl apakah running well atau tidaknya dengan menambahkan lang=”ts” tadi.

Tips dan tricks

Type props di Vue

di project ini, kamu bisa type props. akhirnya,, type yang di define diawal akan menjadi salah satu type di Vue. Bisa kita gunakan Boolean, String, Array.

import Vue from 'vue';

type MySuperType = {
  name: string
  age: number
}

export default Vue.extend({
  props: {
    mySuperProps: {
      type: MySuperType, // Will not work
      required: true
    }
  }
})

Syntax lainnya

import Vue from 'vue';

type MySuperType = {
  name: string
  age: number
}

export default Vue.extend({
  props: {
    mySuperProps: {
      type: Object as () => MySuperType,
      required: true
    }
  }
})

Comments

comments

Leave a comment

%d bloggers like this: