Memulai Belajar Typescript

Musliadi
Musliadi
Nov 3 · 5 min read

Pendahuluan

Kenapa belajar typescript ? beberapa sumber yang saya baca typescript menjadi alternatif atas ketidak jelasan bahasa javascript. Jika kita seorang developer javascript, sehari-hari menggunakan nodejs, vuejs, react, angular maka secara tidak sengaja kita akhirnya akan bertemu dengan typescript ini. Banyak developer senior yang merasakan manfaat dari typescript ini, dan teknologi seperti vuejs, reactjs, angular semakin kesini juga semakin dibawa ke typescript.

jadi kesimpulannya, ketika kamu menggunakan javascript maka belajar typescript menurut saya wajib.

Memulai Belajar Typescript

Install Typescript :

  • Pastikan nodejs sudah terinstall
  • Setelah terinstall, buka cmd command line anda dan ketikkan : npm install -g typescript
  • Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan : tsc -v

Bekerja Dengan Typescript

  • Buat folder project, misal folder bernama TS,
  • kemudian masuk ke folder TS dan buat file project dengan extensi .ts (extensi typescript).

buat codingan seperti berikut :

let num: number = 5;
let name: string = 'Belajar Typescript';
let isPresent: boolean = true;

kemudian compile file typescript tersebut dengan cara : tsc latihan.ts. Ketika kita berhasil mengcompile file typescript, typescript otomatis membuat file baru bertipe javascript ( .js). Jadi file typescript yang barusan dibuat diterjemahkan ke javascript.

Nah coba perhatikan, bahasa typescript memungkinkan kita membuat type data pada variabel seperti number, string, boolean. Dan coba lihat yang sebelah kanan adalah hasil compile versi javascript semua type variabel yang ada di latihan.ts dijadikan var. Adanya type data sangat membantu jika kita mengerjakan proyek skala besar, ketika kita menyertakan type data pada parameter sebuah fungsi maka otomatis kita mengetahui batasan atau type data seperti apa yang boleh masuk.

alasan lain developer menggunakan typescript karena memungkinkan konsep OOP seperti halnya java atau php. Mari kita coba dengan code berikut:

class Car {
model: String;
doors: Number;
isElectric: Boolean;
constructor(model: String, doors: Number, isElectric: Boolean) {
this.model = model;
this.doors = doors;
this.isElectric = isElectric;
}
displayMake(): void {
console.log(`This car is ${this.model}`);
}
}

ketika di complie maka hasilnya :

Sebelah kiri adalah file typescript, pada contoh diatas kita membuat class objek bernama car yang memiliki properti bertipe data, kemudian juga ada constructor method bawaan dari sebuah bahasa yang memiliki konsep oop.

sebelah kanan adalah hasil compile typescript ke bahasa javascript. Class car diubah menjadi fungsi kenapa ? karena pada dasarnya konsep pada core javascript semuanya fungsi, (tidak ada class didalam javascript, kalaupun ada itu bakalan di konversi lagi menjadi fungsi).

Ketika juga bisa mencoba konsep OOP lainnya, misal kita coba buat interface :

interface ICar {
model: String,
make: String,
display(): void
}
const Car: ICar = {
model: 'Prius',
make: 'Toyota',
display() => { console.log('hi'); }
}

Untuk konsep OOP lainnya teman-teman bisa coba sendiri ya.

Sekian, semoga bermanfaat jangan lupa share supaya ekosistem digital indonesia maju hehe.

Pendahuluan

Kenapa belajar typescript ? beberapa sumber yang saya baca typescript menjadi alternatif atas ketidak jelasan bahasa javascript. Jika kita seorang developer javascript, sehari-hari menggunakan nodejs, vuejs, react, angular maka secara tidak sengaja kita akhirnya akan bertemu dengan typescript ini. Banyak developer senior yang merasakan manfaat dari typescript ini, dan teknologi seperti vuejs, reactjs, angular semakin kesini juga semakin dibawa ke typescript.

jadi kesimpulannya, ketika kamu menggunakan javascript maka belajar typescript menurut saya wajib.

Memulai Belajar Typescript

Install Typescript :

  • Pastikan nodejs sudah terinstall
  • Setelah terinstall, buka cmd command line anda dan ketikkan : npm install -g typescript
  • Kemudian untuk mengetahui versi dari typescript yang terinstall ketikkan : tsc -v

Bekerja Dengan Typescript

  • Buat folder project, misal folder bernama TS,
  • kemudian masuk ke folder TS dan buat file project dengan extensi .ts (extensi typescript).

buat codingan seperti berikut :

let num: number = 5;
let name: string = 'Belajar Typescript';
let isPresent: boolean = true;

kemudian compile file typescript tersebut dengan cara : tsc latihan.ts. Ketika kita berhasil mengcompile file typescript, typescript otomatis membuat file baru bertipe javascript ( .js). Jadi file typescript yang barusan dibuat diterjemahkan ke javascript.

Nah coba perhatikan, bahasa typescript memungkinkan kita membuat type data pada variabel seperti number, string, boolean. Dan coba lihat yang sebelah kanan adalah hasil compile versi javascript semua type variabel yang ada di latihan.ts dijadikan var. Adanya type data sangat membantu jika kita mengerjakan proyek skala besar, ketika kita menyertakan type data pada parameter sebuah fungsi maka otomatis kita mengetahui batasan atau type data seperti apa yang boleh masuk.

alasan lain developer menggunakan typescript karena memungkinkan konsep OOP seperti halnya java atau php. Mari kita coba dengan code berikut:

class Car {
model: String;
doors: Number;
isElectric: Boolean;
constructor(model: String, doors: Number, isElectric: Boolean) {
this.model = model;
this.doors = doors;
this.isElectric = isElectric;
}
displayMake(): void {
console.log(`This car is ${this.model}`);
}
}

ketika di complie maka hasilnya :

Sebelah kiri adalah file typescript, pada contoh diatas kita membuat class objek bernama car yang memiliki properti bertipe data, kemudian juga ada constructor method bawaan dari sebuah bahasa yang memiliki konsep oop.

sebelah kanan adalah hasil compile typescript ke bahasa javascript. Class car diubah menjadi fungsi kenapa ? karena pada dasarnya konsep pada core javascript semuanya fungsi, (tidak ada class didalam javascript, kalaupun ada itu bakalan di konversi lagi menjadi fungsi).

Ketika juga bisa mencoba konsep OOP lainnya, misal kita coba buat interface :

interface ICar {
model: String,
make: String,
display(): void
}
const Car: ICar = {
model: 'Prius',
make: 'Toyota',
display() => { console.log('hi'); }
}

Untuk konsep OOP lainnya teman-teman bisa coba sendiri ya.

Sekian, semoga bermanfaat jangan lupa share supaya ekosistem digital indonesia maju hehe.

Musliadi

Written by

Musliadi

Back End Developer > JogjaCamp | Javascript Enthusiast

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade