lifelong learner — urip iku urup, currently working on accenture.

Cara Installasi Typescript pada Windows dan Linux

0
Degananda.com -

typescript

Typescript adalah superset dari javascript. Artinnya, syntax bahasa yang digunakan ditypescript mengacu pada syntax-syntax yang dimiliki oleh javascript namun disempurnakan serta memiliki beberapa syntax yang tidak ada di javacript (superset).

salah satu contoh syntax yang ada pada typescript namun tidak ada di javascript adalah tipe data. Pada typescript,variabel dapat diberikan tipedata berupa number, string dan boolean.

Typescript menggunakan nodejs sebagai baseline-nya. Framework besar seperti angular menggunakan typescript sebaagai bahasa pemrograman yang digunakan diframework tersebut. Ini dikarenakan typescript sangat rigid dalam hal penulisnnya jika dibandingkan dengan javascript. Sangat cocok digunakan untuk berkolaborasi di tim besar karena telah mengikuti standar penulisan yang ada di industri software engineering.

Cara Installasi Typescript pada Windows dan Linux

langkah 1 – Install NodeJS

typescript menggunakan nodejs sebagai baseline utamannya. Kunjungi tautan dibawah ini dan install nodejs

https://nodejs.org/en/

pastikan untuk memilih versi nodejs yang sesuai dengan sistem operasi yang digunakan. jika menggunakan windows maka pilihlah installer nodejs untuk windows dan apabila menggunakan linux, pilihlah installer untuk sistem operasi linux.

langkah 2 – inisiasi project node

langkah pertama adalah menginisiasi project node. Ini dikarenakan typescript menggunakan nodejs dan npm. Sehingga project pertama kali perlu dilakukan inisiasi dan memiliki package.json

gunakan npm init untuk memulai project node

npm init

cukup ikuti prompt window yang muncul. Untuk main file disarankan menggunakan main.js.

seteleah itu pada project folder akan nampak file package.json. Ini artinnya project node telah berhasil di inisiasi

package_json.JPG

langkah 3 – install typescript dengan npm

library typescript terdapat pada NPM (node package manager), sehingga proses installasi typescript cukup dengan menggunakan perintah npm install

npm install typescript -g

gunakan “-g” apabila ingin melakukan insallasi typescript secara global, tetapi jka hanya ingin install typescript di project tersebut saja jangan gunakan opsi “-g” melainkan gunakan opsi “–save”

npm install typescript --save

setelah proses installasi berhasil, maka akan nampak folder node_modules

node_modules.JPG

langkah 4 – Inisiasi project typescript

setelah project node terinisiasi dan typescript terinstall pada project, maka langkah selanjutnya adalah melakukan inisiasi terhadap typescript.

tsc --init

perintah diatas akan menginisiasi project typescript dan akan muncul satu file konfigurasi baru yakni tsconfig.json

inisiasi_project_typescript.JPG

jangan lupa membuat file main.ts, sesuai dengan nama file yang didefinisikan pada saat menginisiasi project node.d

langkah 5 – Tambahkan path dist pada package.json dan tsconfig.json

typescript akan melakukan kompilasi terhadap file javascript yang berada di folder tertentu. Umumnya pada industri software engineering, file javascript yang merupakan hasil dari kompilasi typescript ini akan diletakan pada folder dist. Sehingga pada package json tambahkanlah satu baris untuk menentukan file tersebut

 "main": "dist/main.js",

nama file main.js sesuai dengan nama index file yang didefinisikan pada proses inisisasi project node.

serta tambahkan outDir dan rootDir pada tsconfig.json

 "outDir": "./dist",
"rootDir": "./",

nilai dari kedua config diatas sesuaikan dengan struktur project. Pada kasus ini file kompilasi typescripta akan diletakan di folder dist dan source code typescript akan diletakan di root folder.

struktur_node_dist_root.JPG

ini adalah isi dari file tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./",
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

ini adalah isi dari file pacakge.json

{
  "name": "installtypescript",
  "version": "1.0.0",
  "description": "",
  "main": "dist/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.0.3"
  }
}

langkah 6 – Jalankan proses typescript watch

untuk memulai koding dan melakukan live compile saat ada changes pada file, gunakan perintah typescript watch

tsc -w

untuk menjalankan program typescript yang telah terkompile menjadi javascript (pada folder dist) gunakan perintah node

node dist/main.js

berikut adalah hasilnya

hasil_node_ahir_typescript.JPG

~~happy coding typescript !!!

(Visited 20 times, 1 visits today)

Leave a Reply