Panduan Lengkap Basic Typescript
Artikel ini merupakan sebuah catatan pribadi saya, seperti ada kalimat pepatah “ikatlah ilmu dengan menulis”, namun saya berharap tulisan ini juga berguna bari pembaca.
Oya, artikel ini tidak banyak teori, oleh karena itu saya akan banyak langsung tulis contoh kodenya. Semua contoh kode saya, bisa kamu akses di github saya di https://github.com/dikiharifwibowo/learn-typescript
Data Type
Bagi saya yang sudah lama menggunakan Javascript. Fitur ini yang paling saya suka di typescript. Jika di javascript tipe data bersifat dinamis, maka di typescript kita bisa tentukan tipe data nya. Ini membantu agar data di variabel kita konsisten.
String Data Type
String data type digunakan untuk mewakili karakter. Jika dimasukan data selain karakter maka typescript akan mengeluarkan error.
let fullName: string = "John Doe"; fullName = "Diki Arif Wibowo";
console.log(fullName)
// Output: Diki Arif Wibowo //fullName = 23
// Output: Error: Type '23' is not assignable to type 'string'.
Number Data Type
let age: number = 99;
age = 25
console.log(age)
// Output: 25 //age = "25";
// Output: Error: Type 'string' is not assignable to type 'number'.
Boolean Data Type
let isMarried: boolean = true;
isMarried = false;
console.log(isMarried)
// Output: false
//isMarried = "false";
// Output: Error: Type 'string' is not assignable to type 'boolean'.Any Data Type
Di typescript akan mengeluarkan error, jika data yang dimasukan tidak sesuai tipe datanya nya. Nah dengan menggunakan Any data type kita bebas memasukan data, terlepas apapun itu jenis tipe data nya.
//Without any data type
let phoneNumber: number = 123456789;
//phoneNumber = "+628123456789";
// Output: Type 'string' is not assignable to type 'number'.
//With any data type
let phoneNumber2: any = 123456789;
phoneNumber2 = "+628123456789";
console.log(phoneNumber2);
// Output: +628123456789
phoneNumber2 = true
console.log(phoneNumber2)
// Output: trueArray Data Type
Enakanya di typescript kita juga dapat menentukan type data yang ada didalam array, typescript akan menghasilkan error jika ada yang tidak sesuai dengan tipe data yang ditentukan, kita lihat contoh berikut.
let array: number[];
array = [1, 2, 3, 4, 5];
// Output: [1, 2, 3, 4, 5]
//array = [1, 2, 3, 4, 5, "string"];
// Output: Type 'string' is not assignable to type 'number'.
let array2: string[];
array2 = ["string 1", "string 2", "string 3"];
// Output: ["string 1", "string 2", "string 3"]
//array2 =[1, 2, 3, 4, 5];
// Output: Type 'number' is not assignable to type 'string'.
let array3: any[];
array3 = [1, 2, 3, "string", true, {name: "John"}];
console.log(array3);
// Output: [1, 2, 3, "string", true, {name: "John"}]Tupple Data Type
tupple data type memungkinkan kita untuk membuat array dengan sejumlah elemen tetap yang tipe data nya diketahui. Biar lebih paham saya contohkan berikut:
//Array Tuple
let biodata: [string, number];
biodata = ["John", 23];
// Output: ["John", 23]
//biodata = [23, "John"];
// Output: Type number is not assignable to type string.
//biodata = ["John"];
// Output: Source has 1 element(s) but target requires 2.
//biodata = ["John", 23, true];
// Output: source has 3 element(s) but target allows only 2.Enum Data Type
Enum berguna jika kit aingin membuat standart set. By default, Enum dimulai dengan 0, tapi kita bebas merubahnya.
//Numeric Enum
enum Month {
JAN = 1,
FEB,
MAR,
APR,
MAY,
}
console.log(Month.JAN);
//Output: 1
//String Enum
enum Month2 {
JAN = "January",
//FEB,
}
console.log(Month2);
//Output: Enum member must have initializer.
enum Month3 {
JAN = "January",
FEB = "February",
}
console.log(Month3);
//Output: { 'JAN': 'January', 'FEB': 'February' }Union Data Type
Tipe data Union digunakan ketika ingin membuat variabel memiliki lebih dari satu tipe data. Sebagai contoh kita ingin membuat variabel phoneNumber yang memiliki tipe data number atau string.
let phone: number | string;
phone = 628123456789;
phone = '08123456789';
//Output: 08123456789
//phone = true;
//Output: Type boolean is not assignable to type number | stringFunction
Function Type
Function type mempunya dua bagian yaitu type argumen dan return type. di Typescript kita dapat menentukan type argumen dan return type nya. Ini sangat membantu, katakan kamu ingin membuat function untuk menjumlahkan dua data, kita berekspetasi return type nya adalah number, dengan function type jika return type nya bukan number, typescript akan menghasilkan error.
function getFirstName(): string {
return "Hello, my name is John";
}
function getLastName(): string {
return "Doe";
//return 23;
//Output: Type 'number' is not assignable to type 'string'.
}
function getAge(): number {
return 24;
}
function setFullName() {
console.log("No return value");
}
setFullName();Argument type
Yups, seperti yang sudah di jelaskan, kita dapat mementukan type argumen nya.
function getFullName(firstName: string, lastName: string): string {
return `Hallo my name is: ${firstName} ${lastName}`;
}
console.log(getFullName("John", "Doe"));
//Output: Hallo my name is: John Doe
function add(a: number, b: number): number {
return a + b;
}
console.log(add(1, 2));
//Output: 3
function getFullNameAndAge(firstName: string, lastName: string, age: number): any {
return 24;
}Function Default Parameter & Optional Parameter
Untuk default parameter kita dapat mementukan value default dan tipe datanya.
const myFullName = (firstName: string, lastName: string = 'Smith'): string => {
return `${firstName} ${lastName}`;
}
console.log(myFullName('John'));
//Output: John Smith
console.log(myFullName('John', 'Doe'));
//Output: John Doesedangkan optional parameter jika value parameter tidak ada maka akan menghasilkan value undefined, sedangkan jika paramater ada kita dapat juga menentukan tipe datanya.
function optionalParameter(name: string, age?: number) {
return `${name} ${age}`;
}
console.log(optionalParameter('John'));
//Output: John undefined
console.log(optionalParameter('John', 24));
//Output: John 24Type
Function as Type
menariknya selain variabel, di typescript kita bisa membuat function sebagai tipe data. menarik bukan? biar lebih paham katakan kita ingin membuat type add, type ini nanti bisa dipakai di function.
type add = (val1: number, val2: number) => number;lalu kita ingin membuat function addTwoData, kita tinggal panggil type add.
const addTwoData: add = (val1: number, val2: number): number => val1 + val2;
console.log(addTwoData(2,5));
//Output: 7function as type ini berguna jika kita ingin argumen dan return function kita memiliki tipe data yang sesuai, yang sudah kita tentukan.
Object as Type
kita juga bisa membuat object kita menjadi object type. Katakan kita membuat object type User.
type User = {
name: string;
age: number;
}kita bisa gunakan object type user saat kita ingin membuat variabel object.
let user: User = {
name: "John",
age: 24
}
console.log(user);
//Output: { name: 'John', age: 24 }
let user2: User = {
name: "John",
age: 24,
// address: '123 Main St',
//Output : Object literal may only specify known properties, and 'address' does not exist in type 'User'.
}Basic OOP di Typescript
Object Oriented Programming adalah paradigma pemrograman yang menggunakan konsep class dan object. Kita akan bahas OOP basic, untuk pembahasan OOP di typescript yang lebih mendalam kita buat di part yang berbeda. Oke langsung saja.
Class
Penggunaan class di typescript tidak jauh berbeda dengan pemrograman lain.
export class User {
public name: string;
public age: number; constructor(name: string, age: number {
this.name = name;
this.age = age;
}
}
Ada sebuah tips yang bagus, untuk mempersingkat penulisan constructur di class kita bisa menggunakan cara berikut:
export class User {
constructor(public name: string, public age: number) {}
}Jauh lebih singkat bukan? 💃 Sedangkan untuk membuat instance class adalah
let user = new User('John', 24);
console.log(user);
//Output: { name: 'John', age: 24 }Inheritance
Inheritance memungkinkan sebuah class dapat menurunkan property dan method yang dimilikinya kepada class lain, manfaat inheritance adalah untuk menghindari duplikasi kode program.
sebagai contoh, kita mempunya class User, kemudian kita turunkan kepada class Admin, maka class Admin dapat mengakses property dan method dari class User.
export class User {
constructor(public name: string, public age: number) {}
setName(name: string): void {
this.name = name;
}
getName(): string {
return this.name;
}
}
class Admin extends User {
read: boolean = true;
write: boolean = false;
getRole(): { read: boolean, write: boolean } {
return {
read: this.read,
write: this.write
}
}
}
let admin = new Admin('John', 24);
console.log(admin.getRole());
//Output: { read: true, write: false }
console.log(admin.getName());
//Output: John
admin.setName('Jane');
console.log(admin.getName());
//Output: JaneSuper Constructor
di OOP kita mengenal constructor merupakan method yang pertama kali dijalankan pada sebuah class. Kita sudah belajar inheritance, di parent class katakan kita sudah menggunakan constructor, nah bagaimana jika di child class kita juga mau menggunakan constructor? jawabannya adalah menggunakan super constructor.
Dengan super constructor memungkinkan child class dapat mengambil parameter yang ada di parent class. kita lihat contohnya.
export class User {
constructor(public name: string, public age: number) {}
setName(name: string): void {
this.name = name;
}
getName(): string {
return this.name;
}
}
class Admin extends User {
read: boolean = true;
write: boolean = false;
constructor(public phone:string, public name: string, public age: number) {
super(name, age)
}
getRole(): { read: boolean, write: boolean } {
return {
read: this.read,
write: this.write
}
}
}
let admin = new Admin('08134567890','John', 24);
console.log(admin.phone)
//Output: 08134567890di class Admin kita menggunakan super constructor untuk mengambil parameter name & age di parent class.
Setter & Getter
Setter biasa disebut juga mutator, yang berfungsi untuk update property value.
Sedangkan getter disebut juga accessor, getter akan me-return sebuah value dari suatu property value.
class Person {
private _age: number = 0;
get age() {
return this._age;
}
set age(value: number) {
if(value <= 0 || value >= 200) {
throw new Error('The age is invalid');
}
this._age = value;
}
get isOld() {
return this._age > 100 ? true : false;
}
}
let person = new Person();
person.age = 50;
console.log(person.age, person.isOld);
//Output: 50 falseStatic Property & Static Method
Merupakan sebuah property atau method yang bisa di akses langsung dari dalam class itu sendiri, tanpa perlu instance terlebih dahulu.
Untuk menjadi static, kita perlu menambahkan kata kunci static di property & method.
class Users {
static firstName: string = 'John';
static lastName: string = 'Doe';
static getFullName(): string {
return `${this.firstName} ${this.lastName}`;
}
}
let firstName = Users.firstName;
let lastName = Users.lastName;
console.log(`first name: ${firstName}, last name: ${lastName}`);
//Output: first name: John, last name: Doe
let fullNameUser = Users.getFullName();
console.log(`full name: ${fullNameUser}`);
//Output: full name: John DoeAbstract Class
adalah sebuah class yang tidak bisa di instansiasi secara langsung dari kelas itu sendiri melainkan harus extend di child class.
yang perlu di perhatikan adalah ketika di class abstract kita membuat property dan method jadi abstract maka di child class kita wajib menuliskan kembali property dan method, atau biasa disebut overriding.
abstract class Vehicle {
abstract wheels: number;
start(): void {
console.log("Starting vehicle");
}
getMyWheels(): void {
console.log(`This vehicle has ${this.wheels} wheels`);
}
}
class Car extends Vehicle {
wheels: number = 4;
}
class MotorCycle extends Vehicle {
wheels: number = 2;
}
let car = new Car();
console.log(car.wheels);
car.start();
car.getMyWheels();
//Output: This vehicle has 4 wheels
let motorCycle = new MotorCycle();
console.log(motorCycle.wheels)
motorCycle.start();
motorCycle.getMyWheels()
//Output: This vehicle has 2 wheelsInterface
Interface merupakan prototype untuk sebuah concrete class. Interface ini mirip dengan abstract, ada beberapa perbedaan yang perlu kita ketahui.
- Abstract class berisi abstract dan non abstract class, sedangkan interface hanya boleh berisi abstract method.
- Modifier di abstract class harus dituliskan sendiri, sedangkan interface tidak perlu di depan nama method, karena modifier di interface untuk method adalah public dan abstract.
- Abstract class bisa mendeklarasikan constant dan instance variabel, sedangkan di interface hanya bisa mendeklarasikan constant, karena variabel di interface bersifat public, static dan final.
- Method di abstract class boleh bersifat static dan final, sedangkan method pada interface tidak boleh bersifat static dan final.
- Abstract class hanya bisa extend satu abstract class lainnya, sedangkan interface bisa extend lebih dari satu interface lainnya.
- Abstract class hanya bisa implement beberapa interface, sedangkan Interface hanya bisa extend interface lainnya. Dan tidak bisa implement class atau interface lainnya.
interface Size {
width: number;
height: number;
getWidth(): number;
getHeight(): number;
}
class Shapes implements Size {
constructor(public width: number, public height: number) {}
getWidth(): number {
return this.width;
}
getHeight(): number {
return this.height;
}
}
let shapes = new Shapes(10, 20);
console.log(shapes.getWidth());
console.log(shapes.getHeight());Generic Method & Generic Class
Generic merupakan tipe data yang dinamis. Ini memungkinkan function, class atau data struktur kita menjadi tidak kaku.
Sebagai contoh kita ingin membuat function identity , nah dengan menggunakan function generic kita bisa tentukan parameter yang berisikan variabel dengan tipe data tertentu. Selain itu kita bisa juga tentukan nilai kembaliaannya.
function identity<T>(value: T): T {
return value;
}
const result = identity<number>(123);
console.log(result);
//Output: 123
//console.log(result.length);
//Output: Property 'length' does not exist on type 'number'.
const result2 = identity<string>("Hello");
console.log(result2);
//Output: Hello
console.log(result2.length);
//Output: 5lebih lanjutkan, kita contohkan generic class.
class List<T> {
private items: T[];
constructor(...items: T[]) {
this.items = items;
}
add(item: T) {
this.items.push(item);
}
addMultiple(...items: T[]) {
this.items.push(...items);
}
getAll(): T[] {
return this.items;
}
}
let randomList = new List<number | string>(1, 2, 'three');
randomList.add(4);
randomList.addMultiple(5, 'six', 7);
console.log(randomList.getAll());
//Output: [1, 2, 'three', 4, 5, 'six', 7]Sekian dulu untuk belajar basis typescript, doakan agar saya bisa menulis lagi untuk pembahasan OOP di typescript dan Design Pattern Typescript.
