Intro Typescript
Table of contents
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:
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.cfunction 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
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 terinstallnpm --version
untuk menge-cek versi npm yang terinstallnpx --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.