TypeScript Dasar

Kali ini kita akan belajar tentang typescript dasar. Yang akan kita pelajari pada tulisan singkat ini adalah bagaimana kita membuat project typescript dan menjalankan fungsi test menggunakan jest. Baiklah, kita langsung mulai saja ya pada langkah-langkahnya.

Setup NPM

Untuk menjalankan typescript kita terlebih dahulu harus membuat npm project. Berikut ini adalah langkah-langkah yang harus kita lakukan untuk membuat npm project.

1. Buatlah sebuah direktori project dan beri nama direktori itu dengan nama belajar-typescript-dasar.
2. Masuklah ke direktori tersebut lalu inisialisasi project npm dengan perintah npm –init. Jika proses inisialisasi berhasil maka akan muncul sebuah file baru, yaitu package.json
3. Buka file package.json lalu tambahkan type = module

Berikut ini tampilan lengkap package.json

{
  "name": "belajar-typescript-dasar",
  "version": "1.0.0",
  "description": "Belajar TypeScriptDasar",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  },
  "author": "Ardhan",
  "license": "ISC",
  "type": "module"
}

Setup Jest

Jika proses setup npm project berhasil kita perlu setup jest. Jest digunakan untuk melakukan testing pada typescript dasar yang kita buat. Lakukan langkah-langkah berikut ini untuk setup jest.

1. Install jest dengan perintah npm install –save-dev jest @types/jest
2. Install babel agar jest support dengan javascript module. Cara installnya adalah npm install –save-dev babel-jest @babel/preset-env
3. Jika jest sudah terinstall kita harus melakukan konfigurasi babel untuk jest dengan cara masuk ke package.json kemudian mengubah pada bagian scripts. dengan konfigurasi berikut:

"scripts": {
  "test": "jest"
},
"jest": {
  "transform": {
    "^.+\\.[t|j]sx?$": "babel-jest"
  }
}

Untuk lebih jelasnya bagaimana cara melakukan setup bisa dilihat pada tautan berikut ini: https://babeljs.io/setup#installation

Setup Typescript

Setelah berhasil melakukan setup npm project dan juga jest barulah kita melakukan setup typescript. Berikut ini adalah langkah-langkah untuk setup typescript.

1. Menambahkan typescript dengan cara npm install –save-dev typescript
2. Setelah typescript terinstall, selanjutnya kita setup project typescript dengan perintah npx tsc –init. Setelah perintah ini kita akan mendapatkan file dengan nama tsconfig.json
3. Masuk ke tsconfig.json selanjutnya ubah module dari commonjs menjadi ES6
4. Setup jest untuk typescript dengan cara npm install –save-dev @babel/preset-typescript
5. Jika sudah ubah babel.config.js dan tambakan @babel/preset-typescript pada preset
6. Install ts-jest dengan npm install –save-dev ts-jest
7. Install jest global dengan cara npm install –save-dev @jest/globals
8. Agar autocomplete jalan kita harus install npm install –save-dev @types/jest

Menggunakan Typescript Dasar

Testing Typescript Dasar dengan Jest

Jika persiapan sudah, sekarang kita coba untuk melakukan testing code typescript menggunakan jest. Berikut ini adalah langkah-langkah untuk membuatnya:

1. Buatlah direktori pada project typescript dasar dengan nama tests
2. Buat file test dengan nama hello.test.ts, lalu isikan file tersebut dengan source code berikut ini:

describe('Hello', function (){
    it("should say hello", function () {
        const name = "Hello";
        expect(name).toBe("Hello");
    })
});

Source code diatas digunakan untuk set konstanta name menjadi Hello, expect digunakan untuk mencocokkan nilai variabel name dengan string yang dalam toBe. Karena source code di atas ada source code test, maka kita menjalankan source code tersebut dengan menggunakan perintah jest test. Jika berhasil berikut ini hasilnya jika kita berhasil melakukan test

Source Project TypeScript

Sekarang bagaimana kita menaruh project utama kita. Ikuti langkah-langkah berikut ini untuk membuat contoh project typescript dasar:

1. Buat direktori dengan nama src
2. Buat file source code dengan nama say-hello.ts.
3. Di dalam say-hello.ts kita akan membuat fungsi yang akan mengembalikan nilai berupa string. Berikut ini source codenya:

export function sayHello(name: String): String {
    return `Hello ${name}`
}

Nah, jika kita sudah membuat source codenya, mari kita test source code tersebut dengan membuat file test dengan nama say-hello.test.ts. Pada file test isikan code berikut ini:

import {sayHello} from "../src/say-hello";

describe('sayHello', function (){
    it('should return hello ardhan', function(){
        expect(sayHello('ardhan')).toBe('Hello ardhan');
    });
})

Jika berhasil maka kita akan mendapatkan hasil seperti ini:

Penutup TypeScript Dasar

Nah, demikianlah cara untuk membuat project typescript dasar. Semoga penjelasan di atas bermanfaat. Terima kasih sudah membaca.