Vuex + TypeScript

Instalasi

Untuk melakukan instalasi, npm install -g @vue/cli # OR yarn global add @vue/cli.

Di sini kamu sudah melakukan instalasi Vue di dalam mesin kamu dan untuk membuat aplikasi menggunakan Vue, vue create hello-world.

Kamu akan mengetahui dasar-dasar Vue, bagaimana semuanya bekerja jadi mari kita langsung kepada pembuatan komponen menggunakan typescript.

Di typescript, kamu memerlukan decorators untuk memberikan fungsionalitas ekstra padad kodemu dan Vue + Typescript berjalan dengan Class-based components.

Mari kita buat Test.component.vue

<template>
  <div>
    <p>Hi this is test template</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component} from 'vue-property-decorator';
@Component({
  name:'Test component'
})
export default class TestComponent extends Vue {
  
}
</script>

Jadi seperti yang disebutkan kita membutuhkan dekorator. Untuk itu, kita menggunakan modul ‘vue-property-decorator’ di sini yang menyediakan banyak decorator, jadi pada dasarnya kita menciptakan Class yang memperluas Vue dan mengekspornya dan menggunakan Component Decorator untuk membangunnya sebagai Vue Component, dan memberinya nama.

Sekarang, Vue Component dasar kita sudah siap. Jadi mari kita beralih untuk menambahkan fungsionalitas.

Menambah Props dan child components

Dalam Vue + Typescript, menambahkan Props sangat mudah dan pengetikan statis mencegah kesalahan runtime yang mana hal tersebut mengagumkan.

<template>
  <div>
    <p>Hi this is test template</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop} from 'vue-property-decorator';
@Component({
  name:'Test component'
})
export default class TestComponent extends Vue {
  @Prop({default: 'default value})
  myProp : string | { isObject  : true } | any
  
}
</script>

Di sini juga kami telah menggunakan Props decorator dari ‘vue-property-dekorator’ dan dalam skenario ini, kita cukup menambahkan atribut di class dengan Prop decorator dan sekarang ini akan berfungsi sebagai prop. Prop decorator juga mengambil properti dari default value.

Sekarang kita akan menambahkan child component !

<template>
  <div>
    <p>Hi this is test template</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop} from 'vue-property-decorator';
import AnotherComponent from './another-component.vue'
@Component({
  components: {
    // We've added custom name for the component, else it can be simply adding component here
    'another-one': AnotherComponent,
  },
  name:'Test component'
})
export default class TestComponent extends Vue {
  //In typescript you have to declare type of a variable and | means or here.
  
  @Prop({default: 'default value'})
  myProp : string | { isObject  : true } | any
}
</script>

Adding Computed and Life Cycle functions

Jadi, menambahkan functions itu sangat mudah di Vue + Typescript.

Computed functions dapat ditambahkan menggunakan getter.

<template>
  <div>
    <p>Hi this is test template</p>
    <p>{myComputedFunction}</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop} from 'vue-property-decorator';
import AnotherComponent from './another-component.vue'
@Component({
  components: {
    'another-one': AnotherComponent,
  },
  name:'Test component'
})
export default class TestComponent extends Vue {
  @Prop({default: 'default value'})
  myProp : string | { isObject  : true } | any
  
  mounted() {
    console.log("Hi this component is mounted now!");
  }
  
  get myComputedFunction () {
  return 'I love'+ 'Vue';
  }
  
}
</script>

Mari kita tambahkan lifecycle method, kita harus membuat function dengan nama mounted.

<template>
  <div>
    <p>Hi this is test template</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop} from 'vue-property-decorator';
import AnotherComponent from './another-component.vue'
@Component({
  components: {
    'another-one': AnotherComponent,
  },
  name:'Test component'
})
export default class TestComponent extends Vue {
  @Prop({default: 'default value'})
  myProp : string | { isObject  : true } | any
  
  mounted() {
    console.log("Hi this component is mounted now!");
  }
  
}
</script>

Kita hampir selesai. Sekarang kita hanya butuh menambahkan function emit.

<template>
  <div>
    <p>Hi this is test template</p>
    <p>{myComputedFunction}</p>
  </div>  
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop ,Emit } from 'vue-property-decorator';
import AnotherComponent from './another-component.vue'

@Component({
  components: {
    'another-one': AnotherComponent,
  },
  name:'Test component'
})
export default class TestComponent extends Vue {

  @Prop({default: 'default value'})
  myProp : string | { isObject  : true } | any
  
  mounted() {
    console.log("Hi this component is mounted now!");
  }
  
  get myComputedFunction () {
  return 'I love'+ 'Vue';
  }
  
  @Emit('emitterFunction')
  onClick() {
    console.log("Emit function");
  }
}
</script>

Menggunakan modul ‘vue-property-decorator’ yang sama, kitatelah menambahkan emit decorator ke suatu function dan sekarang return value akan di-emit ke parent component setiap kali metode ‘onClick’ di-trigger !

Ya, sudah selesai! Jadi sebelum pergi, saya ingin berbagi proyek Gitlab yang saya buat untuk proyek perangkat lunak yang menggunakan Vue dengan Typescript.

https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/people/halaqah-quran-online-frontend