**Javascript** dan **Typescript** keduanya secara sederhana adalah Javascript. Perbedaannya **Typescript** merupakan **Javascript** dengan tambahan syntax *static types* yang artinya setiap bagian pada program (variabel, konstanta, fungsi, dll) ditentukan jenisnya secara eksplisit.

Contoh program **Javascript**
```js title="main.js"
const a = 1;

function tambah(a, b) {
  return a + b;
}

const y = tambah(a, 9);
console.log(y);
```

Contoh program **Typescript**
```ts title="main.ts"
const a: number = 1;

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

const y: number = tambah(a, 9);
console.log(y);
```

Jika diperhatikan kedua kode di atas, maka kita dapat melihat keduanya memiliki semantik yang sama, namun berbeda secara syntax dengan **Typescript** menuliskan langsung jenis data pada setiap bagian. Perbedaan JS dan TS di atas dinamakan *static types*.

### Eksekusi Program Javascript

Untuk mengeksekusi/menjalankan program **Javascript** terdapat dua cara umum:
- Menjalankan halaman web dengan menyisipkan tag `<script></script>`
- Menggunakan program interpreter Javascript seperti NodeJS

#### Eksekusi #1 (dengan halaman Web)

Berikut ini sebuah file HTML dengan script **Javascript** `main.js`

```html title="index.html"
<html>
  <script>
    const a = 1;

    function tambah(a, b) {
      return a + b;
    }

    const y = tambah(a, 9);
    console.log(y);
  </script>
</html>
```

Ketika file `main.html` di atas dibuka pada browser, bagian console browser akan menampilkan hasil eksekusi dari perintah di dalam tag `<script></script>`

#### Eksekusi #2 (dengan NodeJS)

Pastikan program NodeJS telah terinstal di komputer/server kalian, jika belum lihat [Cara Install NodeJS](https://graf.co.id/tutorials/install-nodejs-menggunakan-nvm) di tutorial sebelumnya.

Jalankan file `main.js` menggunakan program NodeJS

```bash
$ node main.js
```

output dari hasil eksekusi program akan muncul

### Eksekusi Program Typescript

Berbeda dengan **Javascript**, file **Typescript** tidak dapat dieksekusi menggunakan program NodeJS/Browser, melainkan harus di-*compile* terlebih dahulu ke **Javascript**. Sederhananya program `main.ts` harus diubah dahulu ke `main.js`, karena program NodeJS tidak mengenali tambahan syntax *static types* pada **Typescript**.

Cara meng-*compile* **Typescript** ke **Javascript** akan lanjut kita bahas di bagian bawah.

## Best Practice NodeJS
Sebelum berbicara lebih jauh tentang **Typescript**, disini kita akan membahas tentang seperti apa kebiasaan orang-orang bekerja pada project **Javascript**.

Sebuah project **Javascript** biasanya akan diinisialisasi dengan bantuan program *Package Manager* atau `npm` (Node Package Manager) sebuah program yang disediakan oleh NodeJS.

Berikut cara memulai project **Javascript** dengan `npm`. Pertama buat sebuah folder lalu masuk ke folder tersebut (folder ini akan menjadi folder utama project)

```bash
$ mkdir project-jsku
$ cd project-jsku
```

inisialisasi project menggunakan `npm`

```bash
$ npm init
```

akan muncul input interaktif `npm` seperti di bawah, field tersebut dapat diisi atau dikosongkan

```text
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (p) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)
About to write to /<dir>/project-jsku/package.json:

{
  "name": "project-jsku",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

Is this OK? (yes)  
```

setelah selesai tekan enter untuk yes (menyelesaikan inisialisasi `npm`). Sekarang pada folder telah ada sebuah file `package.json` yang akan digunakan untuk mengelola project **Javascript** pada folder `project-jsku`.

### package.json

`package.json` merupakan sebuah file konfigurasi project untuk mengatur dependensi library, script `npm`, dan lainnya. Misal sekarang kita tambahkan sebuah file `main.js` sesuai seperti contoh di atas sebelumnya pada folder `project-jsku`. Untuk menjalankan file `main.js` kita bisa menggunakan `$ node main.js` atau dengan cara `npm` sebagai berikut:

Ubah isi `package.json`
```json title="package.json" {6}
{
  "name": "project-jsku",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
```

menjadi 
```json title="package.json" {6}
{
  "name": "project-jsku",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node main.js"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}
```

Lalu jalankan script

```bash
$ npm start
```

Proses yang terjadi ketika menjalankan `npm start`, program `npm` mengeksekusi perintah `start` yang ada pada `package.json`.

### Dependensi Library

`npm` pada NodeJS memudahkan proses memuat/mengimport library yang ada di luar project (di repository npmjs atau sumber lain) ke project NodeJS yang kalian miliki. Cara menambah dependensi library menggunakan syntax `npm install <nama package>`, misal:

```bash
$ npm install lodash
```

Lodash adalah sebuah library yang berisi subprogram/fungsi-fungsi manipulasi data.

Setelah terinstal, sekarang kalian dapat menggunakan lodash pada program `main.js` langsung.

```js title="main.js"
const lodash = require('lodash');

const a = 1;
const y = lodash.sum([a, 9]);
console.log(y);
```

### Instalasi Compiler Typescript

Untuk bisa meng-*compile* file **Typescript** menjadi **Javascript** diperlukan konfigurasi berikut:

Install package `typescript` sebagai dependensi

```bash
$ npm install typescript
```

Inisialisasi file konfigurasi typescript dengan perintah

```bash
$ npx tsc --init
```

sebuah file baru dengan nama `tsconfig.json` akan muncul setelah melakukan inisialisasi konfigurasi **Typescript**.

buat sebuah script `compile` pada `package.json` isi dengan program `tsc` (Typescript Compiler)
```json title="package.json" {5}
{
  ...
  "scripts": {
    "start": "node main.js",
    "compile": "tsc"
  }
  ...
}
```

Agar proses *compile* rapi terkumpul pada satu folder, modifikasi file konfigurasi `tsconfig.json` pada bagian

```json title="tsconfig.json" {4}
{
  "compilerOptions": {
    ...
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    ...
  }
}
```

menjadi

```json title="tsconfig.json" {4}
{
  "compilerOptions": {
    ...
    "outDir": "dist",                                   /* Specify an output folder for all emitted files. */
    ...
  }
}
```

### Compile Typescript

Sekarang proses *compile* dapat dilakukan, hapus file `main.js` (javascript), taruh file `main.ts` (typescript) pada folder project, lalu *compile*

```bash
$ npm run compile
```

setelah selesai hasil compile akan muncul pada folder `dist` sesuai modifikasi file `tsconfig.json` di atas. Program **Javascript** yang ada pada folder `dist` sekarang dapat dijalankan langsung menggunakan program `node`.

Javascript merupakan bahasa pemrograman yang populer saat ini. Bahasa Javascript ternyata dilanjutkan lagi dengan Typescript karena kebutuhan akan static types syntax. Typescript tidak dapat dijalankan oleh program node secara langsung tetapi harus di-compile terlebih dahulu baru dapat dijalankan.