AsrulDev

AsrulDev

Intro Typescript

Asrul H's photo
Asrul H
·Aug 1, 2021·

3 min read

Subscribe to our newsletter and never miss any upcoming articles

Table of contents

  • Kenapa harus Typescript
  • Memulai Typescript

Typescript merupakan bahasa pemograman javascript dengan tambahan type yang dikeluarkan oleh Microsoft. Typescript sendiri dibangun berdasarkan javascript atau sering disebut dengan superset javascript, dimana saat membuat file typescript (ekstensi .ts) maka akan dilakukan compile sehingga menghasilkan file javscript (ekstensi .ts).

Kenapa harus Typescript

Berikut beberapa alasan menurut saya kenapa harus menggunakan typescript:

  1. Typescript akan membantu produktifitas dalam koding, karena dapat mendeteksi bug saat dini atau sebelum dicompile. Perhatikan contoh berikut ini.

    function penjumlahan(a, b) {
    return a + b
    }
    

    Ketika function diatan diterapkan untuk mendpatkan input dari html, bisa jadi kamu tidak akan mendapatkan yang sesuai dengan harapan.

    const bilA = document.getElementById("input-a")
    // anggap saja nilai bilA = 5
    const bilB = document.getElementById("input-b")
    // anggap nilai bilB = 10
    const hasilPenjumlahan = penjumlahan(bilA, bilB)
    console.log(hasilPenjumlahan)
    // 510
    

    Anggap nilai yang diinputkan pada form adalah 5 dan 10, kemudian hasilnya akan menjadi 510 bukan 15. Itu dikarenakan hasil input dari html adalah string. Pada javascript string di tambah (+) string akan menggabungkan string tersebut. Dengan typescript bisa diubah function tersebut dengan kode berikut.c

    function penjumlahan(a: number, b: number): number {
    return a + b;
    }
    

    Sehingga saat function dipanggil dengan input dari html tersebut akan mengeluarkan pesan error bahwa yang seharusnya adalah dengan type number, maka kita dapat memperbaikinya dengan konversi terlebih dahulu input tersebut ke number, sehingga hsilnya menjadi seperti berikut.

    const bilA = document.getElementById("input-a")
    // anggap saja nilai bilA = 5
    const bilB = document.getElementById("input-b")
    // anggap nilai bilB = 10
    const hasilPenjumlahan = penjumlahan(Number(bilA), Number(bilB))
    console.log(hasilPenjumlahan)
    // 15
    
  2. Typescript memberikan dapat menjalankan kode javascript modern, dengan Typescript anda bisa menjalankan kode-kode ESNext dengan sangat baik.

Memulai Typescript

Sama halnya dengan javascript, Nodejs juga mendukung typescript agar dapat berjalan dengan baik.

Sebelum memulai pastikan sudah menginstall nodejs (nodejs.org/en) include npm dan npx, dan berikut perintah cek versi untuk memastikan nodejs, npm dan npx terisntall dengan baik.

  • node --version untuk menge-cek versi node yang terinstall

  • npm --version untuk menge-cek versi npm yang terinstall

  • npx --version untuk menge-cek npx yang terinstall

Setelah mengetahui nodejs, npm dan npx terintall dengan baik sekarang mari membuat sebuah folder hello yang akan digunakan sebagai folder project yang akan digunakan dengan cara masuk ke terminal, lalu gunakan perintah mkdir hello dan cd hello.

Setelah posisi terminal, aktif pada folder hello maka set folder tersebut sebagai projek nodejs dengan perintah npm init -y dan setelah selesai akan menghasilkan file package.json yang isinya seperti berikut.

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Asrul harahap",
  "license": "ISC"
}

Dengan ter-generate-nya file package.json itu, maka sudah berhasil manjadikan folder hello tersebut menjadi folder projek nodejs dan akan dapat menginstall library-library di dalamnya, selanjutnya install typescript dengan perintah npm i typescript. Perikdsa file package.json dan pastikan adanya tercatat dependencies typescript.

Selanjutnya setting folder untuk root (ini berisi file-file dengan typescript) dan output (ini berisi file-file compiler typescript menjadi javascript) dengan perintah npx tsc --init --rootdir src --outdir lib, maka akan muncul informasi pada terminal seperti berikut.

Created a new tsconfig.json with:                                               
                                                                             TS 
  target: es2016
  module: commonjs
  outDir: lib
  rootDir: src
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

Selanjutnya mari membuat file src/index.ts untuk menulis kode typescript yang kira kira isinya seperti berikut.

let greet: string = "Hello";
console.log(greet)

Lalu mari eksekusi dengan perintah npx tsc --watch sehingga akan men-generate file lib/index.js yang isinya seperti berikut.

"use strict";
var greet = 'Hello';
console.log(greet)

Perhatikan kode typescript telah menjadi kode javascrtipt dan dapat dijlankan dengan perintah node lib/index.js sehingga menghasilkan.

Hello

Semoga mengerti.... dan jika ingin berdiskusi dan koreksi silahkan menulis di kolom komentar.

 
Share this