Jika kita menambahkan pada exisiting project, bisa kita gunakan NPM seperti berikut:
npm install -g typescriptkita 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
}
}
})