Cheat Sheet TypeScript
Terakhir diperbarui
Tipe dasar
Tipe primitif dan cara memberi anotasi pada variabel.
| Operasi | Sintaks |
|---|---|
| String | let name: string = "Ada"; |
| Number | let age: number = 25; |
| Boolean | let ok: boolean = true; |
| Array berisi T | let xs: number[] = [1, 2, 3]; |
| Array generic | let xs: Array<string> = []; |
| Tuple | let pair: [string, number] = ["a", 1]; |
| Any (keluar dari pemeriksaan tipe) | let x: any = 1; |
| Unknown (any yang lebih aman) | let x: unknown = JSON.parse(s); |
| Void (tanpa nilai kembalian) | function log(): void { … } |
| Never (tidak pernah selesai) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Inferensi tipe & anotasi
Kapan membiarkan TS menyimpulkan tipe dan kapan menulis anotasi.
| Operasi | Sintaks |
|---|---|
| Disimpulkan dari nilai | let count = 0; // number |
| Anotasi eksplisit | let count: number = 0; |
| Parameter fungsi | function add(a: number, b: number) { … } |
| Tipe nilai kembalian | function add(a: number, b: number): number { … } |
| Arrow function | const sq = (x: number): number => x * x; |
| Type assertion | const el = input as HTMLInputElement; |
| Const assertion (literal) | const dirs = ["up", "down"] as const; |
| Non-null assertion | el!.focus(); |
Interface
Menggambarkan bentuk sebuah object.
| Operasi | Sintaks |
|---|---|
| Mendeklarasikan | interface User { id: number; name: string; } |
| Property opsional | interface User { age?: number; } |
| Property readonly | interface User { readonly id: number; } |
| Signature method | interface Logger { log(msg: string): void; } |
| Memperluas interface lain | interface Admin extends User { role: string; } |
| Index signature | interface Map { [key: string]: number; } |
| Mengimplementasikan di class | class Db implements Logger { … } |
Type alias & union
Memberi nama sebuah tipe dan menggabungkan tipe dengan | dan &.
| Operasi | Sintaks |
|---|---|
| Type alias | type ID = string | number; |
| Type alias untuk object | type User = { id: number; name: string }; |
| Union type | type Status = "idle" | "loading" | "done"; |
| Intersection type | type Admin = User & { role: string }; |
| Literal type | type Yes = "yes"; |
| Nullable | type Maybe<T> = T | null | undefined; |
| Type alias untuk fungsi | type Handler = (e: Event) => void; |
Fungsi
Parameter bertipe, nilai kembalian, dan overload.
| Operasi | Sintaks |
|---|---|
| Parameter opsional | function greet(name?: string) { … } |
| Parameter default | function greet(name = "friend") { … } |
| Rest parameter | function sum(...ns: number[]): number { … } |
| Tipe fungsi | let fn: (a: number) => number; |
| Interface yang bisa dipanggil | interface Fn { (x: number): number; } |
| Signature overload | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Kembalian void diabaikan | const cb: () => void = () => 42; // ok |
Class
Class dengan access modifier dan parameter property.
| Operasi | Sintaks |
|---|---|
| Mendeklarasikan class | class User { name: string; } |
| Constructor | constructor(name: string) { this.name = name; } |
| Parameter property | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Field readonly | readonly id: number; |
| Anggota static | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Inheritance | class Admin extends User { … } |
| Class abstrak | abstract class Shape { abstract area(): number; } |
Generic
Tipe yang bisa dipakai ulang dan diberi parameter tipe lain.
| Operasi | Sintaks |
|---|---|
| Fungsi generic | function id<T>(x: T): T { return x; } |
| Memanggil dengan tipe eksplisit | id<string>("hi"); |
| Interface generic | interface Box<T> { value: T; } |
| Type alias generic | type Pair<A, B> = [A, B]; |
| Class generic | class Stack<T> { items: T[] = []; } |
| Batasan dengan extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Parameter tipe default | interface Box<T = string> { value: T; } |
| Operator keyof | type K = keyof User; // "id" | "name" |
| Index access type | type Name = User["name"]; |
Narrowing
Mempersempit union menjadi satu tipe saat runtime.
| Operasi | Sintaks |
|---|---|
| Pemeriksaan typeof | if (typeof x === "string") { … } |
| Pemeriksaan instanceof | if (e instanceof Error) { … } |
| Operator in | if ("name" in obj) { … } |
| Narrowing lewat kesamaan | if (status === "done") { … } |
| Truthiness | if (value) { … } |
| Type guard kustom | function isUser(x: any): x is User { return "id" in x; } |
| Discriminated union | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Pemeriksaan kelengkapan dengan never | const _: never = shape; |
Enum
Kumpulan konstanta bernama.
| Operasi | Sintaks |
|---|---|
| Enum numerik | enum Direction { Up, Down, Left, Right } |
| Enum string | enum Status { Idle = "IDLE", Done = "DONE" } |
| Memakai sebuah nilai | let d: Direction = Direction.Up; |
| Const enum (disisipkan inline) | const enum Color { Red, Green, Blue } |
| Union literal (cara modern) | type Status = "idle" | "done"; |
Utility type
Fungsi bantu bawaan yang mengubah tipe yang sudah ada.
| Operasi | Sintaks |
|---|---|
| Menjadikan semua property opsional | Partial<User> |
| Menjadikan semua property wajib | Required<User> |
| Menjadikan semua property readonly | Readonly<User> |
| Memilih sebagian key | Pick<User, "id" | "name"> |
| Menghilangkan satu key atau lebih | Omit<User, "password"> |
| Object dengan key tertentu | Record<string, number> |
| Mengecualikan dari union | Exclude<"a" | "b" | "c", "a"> |
| Hanya menyisakan dari union | Extract<"a" | "b", "a" | "c"> |
| Menghapus null / undefined | NonNullable<string | null> |
| Tipe nilai kembalian fungsi | ReturnType<typeof fn> |
| Tuple parameter fungsi | Parameters<typeof fn> |
| Tipe hasil promise (awaited) | Awaited<Promise<string>> |
Module
Import dan export antar-file.
| Operasi | Sintaks |
|---|---|
| Named export | export function add(a: number, b: number) { … } |
| Default export | export default class User { … } |
| Re-export | export { User } from "./user"; |
| Named import | import { add } from "./math"; |
| Default import | import User from "./user"; |
| Mengimpor tipe saja | import type { User } from "./user"; |
| Mengimpor semuanya | import * as math from "./math"; |
| Triple-slash reference | /// <reference types="node" /> |
Dasar tsconfig
Flag compiler yang perlu kamu ketahui.
| Opsi | Efek |
|---|---|
"strict": true | Mengaktifkan semua pemeriksaan strict mode (disarankan). |
"target": "ES2022" | Versi JavaScript yang dihasilkan tsc. |
"module": "ESNext" | Sistem module pada output yang dihasilkan. |
"moduleResolution": "bundler" | Me-resolve module dengan cara bundler modern. |
"jsx": "react-jsx" | Mengaktifkan JSX untuk React 17+. |
"esModuleInterop": true | Default import yang lebih rapi dari module CommonJS. |
"skipLibCheck": true | Melewati pemeriksaan tipe node_modules (build lebih cepat). |
"noEmit": true | Hanya memeriksa tipe; output diserahkan ke bundlermu. |
Sintaks TypeScript yang paling sering kamu pakai, dalam satu halaman. Cheat sheet TypeScript ini adalah referensi cepat untuk TS sehari-hari: tipe dasar, interface, type alias, generic, union, narrowing, dan utility type bawaan. Karena TypeScript dibangun di atas JavaScript, simpan juga cheat sheet JavaScript untuk sintaks dasarnya.
Semua yang ada di sini adalah TypeScript standar yang bisa kamu compile dengan tsc dan berjalan di mana pun JavaScript modern berjalan. Salin yang kamu butuhkan, atau coba potongan kode apa pun langsung di playground TypeScript, tanpa perlu instalasi. Baru mengenal tipe? Kursus TypeScript interaktif gratis dari Coddy membangunnya selangkah demi selangkah dari JavaScript.
FAQ cheat sheet TypeScript
Apakah cheat sheet TypeScript ini gratis?
Ya. Cheat sheet TypeScript ini sepenuhnya gratis, tanpa perlu daftar. Simpan di bookmark dan kembali kapan pun kamu perlu mencari tipe, interface, atau utility type.
Apa perbedaan interface dan type alias?
interface. Aturan umumnya: pakai interface untuk bentuk object publik, dan type untuk union, tuple, dan tipe hasil perhitungan.Apa perbedaan any dan unknown?
any sepenuhnya keluar dari pemeriksaan tipe: compiler membiarkanmu melakukan apa saja padanya. unknown aman dari sisi tipe: kamu harus mempersempitnya (dengan typeof, instanceof, atau type guard) sebelum bisa memakainya. Utamakan unknown untuk nilai dari sumber luar seperti JSON.parse atau fetch, karena ia memaksamu memvalidasi dulu sebelum dipakai.Apakah saya perlu belajar JavaScript sebelum TypeScript?
Ya. TypeScript adalah JavaScript dengan sistem tipe di atasnya, jadi setiap keterampilan JavaScript tetap terpakai. Kalau kamu masih membangun dasar JS (array, object, async/await), cheat sheet JavaScript adalah titik awal yang bagus, dan kursus JavaScript gratis dari Coddy membahas materi yang sama secara interaktif.
Bisakah saya berlatih TypeScript secara online?
Bisa. Buka playground TypeScript untuk menjalankan potongan kode apa pun dari cheat sheet ini di browsermu, tanpa perlu instalasi. Kalau kamu ingin belajar terarah, mulailah dari halaman kursus JavaScript, lalu terapkan tipe dari halaman ini di atasnya.
Sumber terkait
Cheat sheet lainnya
