Dokumentasi TypeScript
Referensi TypeScript yang ringkas dan penuh contoh. Baca konsepnya, lihat kodenya, lalu praktikkan di perjalanan Coddy.
Mulai kursusMemulai
- Apa itu TypeScriptTypeScript adalah JavaScript dengan tipe statis. Kamu memberi anotasi tipe pada nilai, compiler memeriksanya sebelum kode dijalankan, dan hasilnya adalah JavaScript biasa yang berjalan di browser mana pun atau di Node.js, Deno, dan Bun.
- TypeScript vs JavaScriptTypeScript adalah JavaScript ditambah sistem tipe statis yang diperiksa sebelum kode dijalankan. Bandingkan keduanya berdampingan: sintaks, apa yang ditangkap pemeriksa tipe, langkah build, kecepatan saat runtime, tingkat kesulitan belajar, dan cara migrasi proyek JavaScript.
- Install TypeScriptInstal TypeScript dengan npm sebagai dev dependency proyek, cek versinya dengan npx tsc --version, buat tsconfig.json dengan tsc --init, dan compile file pertamamu. Membahas instalasi global, pnpm, Yarn, dan Bun, serta error yang sering ditemui.
- Menjalankan TypeScriptLima cara menjalankan file .ts: compile dengan tsc lalu jalankan JavaScript-nya, jalankan langsung dengan node file.ts (type stripping), pakai tsx atau ts-node, atau pakai Deno dan Bun. Mana yang mengecek tipe, sintaks apa yang didukung masing-masing, dan mana yang sebaiknya dipilih.
- tsconfig.jsontsconfig.json menandai sebuah folder sebagai proyek TypeScript dan mengatur opsi compiler. Opsi yang penting (target, module, moduleResolution, strict, rootDir, outDir, include, lib, types, noEmit, skipLibCheck), konfigurasi awal yang direkomendasikan, extends, dan apa yang diubah TypeScript 7.
- TypeScript 7TypeScript 7 adalah compiler TypeScript yang ditulis ulang dengan Go sebagai program native: sekitar sepuluh kali lebih cepat, dengan perintah tsc dan bahasa yang sama. Apa yang berubah bagi pengguna (default baru, opsi yang dihapus, JavaScript API yang belum ada), tool mana yang masih butuh TypeScript 6, dan cara upgrade.
- KomentarTypeScript memakai komentar // dan /* */ dari JavaScript, ditambah komentar JSDoc /** */ yang ditampilkan editor saat kursor diarahkan. TypeScript juga membaca beberapa komentar khusus: @ts-expect-error, @ts-ignore, @ts-nocheck, @ts-check, dan direktif /// <reference>.
- TypeScript vs PythonTypeScript dan Python sama-sama bahasa tingkat tinggi dengan garbage collection, tetapi TypeScript memeriksa tipenya sebelum kode dijalankan, sedangkan type hint Python bersifat opsional dan diabaikan saat runtime. Perbandingan berdampingan soal tipe, runtime, kecepatan, ekosistem, dan kegunaan, dengan program yang sama di keduanya.
Tipe Dasar
- Tipe DasarTipe bawaan TypeScript: string, number, boolean, bigint, symbol, null, dan undefined, ditambah sekilas tentang array dan objek. Cara menulis anotasi tipe, kenapa tidak ada tipe integer, dan kenapa kamu menulis string, bukan String.
- Type InferenceTypeScript menentukan sebagian besar tipe dari nilai yang kamu tulis. Pelajari apa yang disimpulkannya untuk variabel, let vs const, object, array, dan nilai kembalian, bagaimana callback mendapat tipenya dari konteks, dan kapan kamu tetap butuh anotasi.
- StringBekerja dengan string di TypeScript: interpolasi dengan template literal, string multiline, mengecek apakah string memuat substring, method yang umum beserta tipe kembaliannya, dan string literal type.
- String ke NumberUbah string menjadi number di TypeScript dengan Number(), parseInt(), parseFloat() atau unary +, lihat bagaimana masing-masing menangani input seperti "42px", "" dan "1e3", cek NaN dengan aman, dan ubah number kembali menjadi string.
- ArrayCara memberi tipe pada array di TypeScript: T[] vs Array<T>, array of object, array yang menampung beberapa tipe, array readonly, dan apa yang dikembalikan map, filter, reduce, dan find. Ditambah jebakan includes pada array literal.
- TupleTuple di TypeScript adalah array dengan jumlah elemen tetap yang tipenya diketahui berdasarkan posisi, seperti [string, number]. Pelajari sintaksnya, elemen bernama, opsional, dan rest, tuple readonly dan as const, mengembalikan tuple dari fungsi, dan perbedaan tuple dengan array.
- Object TypeCara memberi tipe pada object di TypeScript: object type inline, property opsional dengan ?, property readonly, object bersarang, method, excess property check, dan perbedaan object, {} dan Object.
- EnumEnum TypeScript adalah kumpulan konstanta bernama, seperti enum Direction { Up, Down }. Pelajari enum numerik dan string, JavaScript hasil kompilasi sebuah enum, reverse mapping, iterasi pada enum, const enum, dan kapan union berisi string literal atau objek as const menjadi pilihan yang lebih baik.
Tipe Khusus
- Literal TypeLiteral type adalah tipe yang hanya punya tepat satu nilai, seperti "GET" atau 404. Pelajari literal type string, angka, dan boolean, union dari literal, kenapa let melebarkan tipe sedangkan const tidak, apa yang dilakukan as const, dan parameter tipe const.
- any vs unknownany dan unknown sama-sama menerima semua nilai. any mematikan pemeriksaan tipe untuk nilai itu, sedangkan unknown mewajibkanmu memeriksa nilainya sebelum dipakai. Pelajari perbedaannya, cara mempersempit unknown, noImplicitAny, dan tempat any diam-diam masuk ke kode yang sudah bertipe.
- Tipe nevernever adalah tipe tanpa nilai. Ia adalah tipe kembalian fungsi yang tidak pernah selesai, tipe yang tersisa ketika narrowing sudah menyingkirkan semua kemungkinan, dan alat di balik exhaustive check pada switch. Pelajari dari mana ia berasal dan apa bedanya dengan void.
- null dan undefinedDengan strictNullChecks, null dan undefined adalah tipe tersendiri yang wajib kamu tangani di TypeScript. Pelajari cara mengeceknya, optional chaining (?.), tanda tanya ganda (??) dan ??=, serta perbedaan property opsional dengan | undefined.
- Non-Null Assertion (!)Tanda seru setelah sebuah nilai, seperti user!, adalah operator non-null assertion: ia membuang null dan undefined dari tipe tanpa pemeriksaan apa pun saat runtime. Pelajari apa yang dilakukan x!, bentuk definite assignment let x!: T dan prop!: T, kenapa keduanya berisiko, dan alternatif yang lebih aman.
Interface dan Type Alias
- InterfaceInterface memberi nama pada bentuk sebuah object: properti apa saja yang dimilikinya dan tipe isinya. Pelajari cara mendeklarasikannya, properti opsional dan readonly, method, index signature, extends, implements di class, declaration merging, interface generic, dan cara memberi nilai default pada interface.
- Type AliasType alias memberi nama pada tipe apa pun dengan kata kunci type: bentuk object, union, tuple, fungsi, generic, dan tipe rekursif. Pelajari sintaksnya, rupa setiap bentuknya, dan kenapa alias hanyalah nama, bukan tipe baru yang terpisah.
- Interface vs Typeinterface dan type sama-sama bisa menjelaskan bentuk object, dan sebagian besar waktu keduanya sama-sama bisa dipakai. Pelajari perbedaan yang sebenarnya: declaration merging, union dan mapped type, extends vs intersection, index signature implisit, pelaporan error dan performa compiler, ditambah aturan yang jelas untuk memilih.
- Kata Kunci extendsKata kunci extends membangun satu tipe dari tipe lain. Pelajari cara meng-extend interface (dari satu atau beberapa interface), memperluas type alias dengan &, menimpa tipe property, mengganti property dengan Omit, dan arti extends di class, generic constraint, dan conditional type.
- Union TypeUnion type seperti string | number berarti sebuah nilai bisa berupa salah satu dari beberapa tipe. Pelajari apa yang bisa kamu lakukan dengan union (hanya yang didukung semua anggotanya), cara mempersempitnya, union dari literal dan object type, serta perbedaan (A | B)[] dan A[] | B[].
- Intersection TypeIntersection type A & B menjelaskan nilai yang sekaligus A dan B, jadi ia punya setiap member dari keduanya. Pelajari cara menggabungkan tipe object dengan &, kenapa properti yang bertentangan menjadi never, bagaimana intersection dari union hanya menyisakan member yang sama, dan kapan sebaiknya memakai extends.
- Discriminated UnionDiscriminated union adalah union dari object type yang berbagi property tag berupa literal, seperti kind atau status. Memeriksa tag-nya mempersempit seluruh objek. Pelajari polanya, penyempitan dengan switch, pemeriksaan menyeluruh dengan never, dan cara memodelkan hasil API, state request, dan state machine.
Fungsi
- FungsiCara memberi tipe pada fungsi di TypeScript: anotasi setiap parameter, tulis atau biarkan tipe kembalian disimpulkan, pakai void untuk fungsi yang tidak mengembalikan apa pun, dan beri tipe pada arrow function, function expression, fungsi async, serta parameter this.
- Function TypeCara menulis tipe sebuah fungsi di TypeScript: sintaks arrow (a: number) => string, type alias untuk fungsi, memberi tipe pada arrow function dan callback, call signature dan construct signature, serta kenapa tipe Function terlalu longgar.
- Parameter OpsionalJadikan parameter TypeScript opsional dengan ?, beri nilai default, atau kumpulkan argumen sebanyak apa pun dengan rest parameter. Membahas aturan urutan, argumen yang dilewati vs undefined, options object, dan parameter opsional di tipe fungsi.
- Function OverloadingFunction overload di TypeScript membuat satu fungsi punya beberapa call signature, masing-masing dengan tipe kembaliannya sendiri. Pelajari pola overload signature ditambah implementasi, aturan yang diperiksa compiler, kapan parameter union lebih baik, dan overload di class.
Narrowing dan Pemeriksaan Tipe
- Type NarrowingNarrowing adalah cara TypeScript mengubah tipe yang lebar seperti string | number menjadi tipe yang spesifik di dalam if, switch, atau setelah return lebih awal. Semua bentuk narrowing di satu tempat: typeof, truthiness, kesamaan, in, instanceof, assignment, type predicate, dan discriminated union.
- Operator typeoftypeof punya dua tugas di TypeScript. Di dalam kode, ia adalah operator JavaScript yang mengembalikan "string", "number", "object" dan seterusnya saat runtime, dan TypeScript mempersempit tipe berdasarkan hasilnya. Di dalam tipe, ia adalah type query yang menyalin tipe sebuah variabel, seperti pada keyof typeof obj dan ReturnType<typeof fn>.
- Operator instanceofinstanceof memeriksa saat runtime apakah sebuah object dibuat dari suatu class, dan TypeScript mempersempit tipe variabelnya menjadi class tersebut. Cara kerjanya dengan class buatanmu sendiri dan subclass Error, kenapa ia tidak bisa memeriksa interface atau type alias, dan kapan jawabannya mengejutkan.
- Type GuardType guard adalah pemeriksaan saat runtime yang dipahami TypeScript. Pelajari type guard bawaan, cara menulis type guard sendiri dengan type predicate value is Type, cara mengecek apakah object punya tipe tertentu, assertion function dengan asserts, dan cara memvalidasi data unknown.
- Type AssertionKata kunci as memberi tahu TypeScript untuk memperlakukan sebuah nilai sebagai tipe lain. Ini bukan cast: tidak ada yang dikonversi atau dicek saat runtime. Pelajari sintaks as dan kurung sudut, apa yang diizinkan compiler, double assertion lewat unknown, dan kapan type guard adalah alat yang lebih tepat.
- Operator satisfiesOperator satisfies mengecek bahwa sebuah nilai cocok dengan suatu tipe tanpa mengubah tipe hasil inferensi nilai itu. Pelajari fungsinya, perbandingannya dengan anotasi tipe dan dengan as (object yang sama ditulis dengan tiga cara), cara menggabungkannya dengan as const, dan kenapa ia cocok untuk object konfigurasi.
Class
- ClassClass TypeScript adalah class JavaScript dengan field, method, dan constructor yang bertipe. Pelajari cara kerja deklarasi field dan strictPropertyInitialization, cara memberi tipe pada this, getter dan setter, member static, implements, dan bagaimana sebuah class sekaligus menjadi tipe.
- ConstructorCara memberi tipe pada constructor class di TypeScript: parameter bertipe dan opsional, parameter property seperti constructor(private name: string), urutan inisialisasi field, overload constructor, pemanggilan super di subclass, constructor private, dan tipe constructor dengan new.
- Access ModifierTypeScript punya tiga access modifier, yaitu public, private, dan protected, ditambah readonly. Pelajari apa yang diizinkan masing-masing, kenapa private di TypeScript hanya diperiksa saat kompilasi sementara field #private JavaScript ditegakkan saat runtime, dan mana yang sebaiknya dipilih.
- InheritancePewarisan class di TypeScript: extends dan super, meng-override method dengan tipe yang kompatibel, kata kunci override dan noImplicitOverride, member protected, mendeklarasikan ulang field dengan declare, dan kapan implements adalah alat yang lebih tepat.
- Abstract ClassAbstract class di TypeScript adalah class dasar yang tidak bisa dibuat instance-nya secara langsung dan boleh menyerahkan implementasi method ke subclass. Pelajari method dan property abstract, pola template method, tipe constructor abstract, dan kapan interface menjadi pilihan yang lebih tepat.
- DecoratorDecorator adalah fungsi yang membungkus atau mengganti member class dengan sintaks @. Pelajari decorator standar yang didukung TypeScript tanpa flag apa pun (class, method, getter, field, dan accessor), decorator factory, addInitializer, dan perbedaannya dengan experimentalDecorators lama yang dipakai Angular dan NestJS.
Generic
- GenericGeneric membuat fungsi, interface, tipe, atau class bisa bekerja dengan banyak tipe sambil tetap saling terhubung: apa yang masuk menentukan apa yang keluar. Pelajari fungsi generic, inferensi argumen tipe, beberapa parameter tipe, interface dan class generic, nilai default, dan kapan sebaiknya tidak memakai generic.
- Generic ConstraintGeneric constraint, T extends Something, membatasi tipe apa saja yang diterima sebuah parameter tipe dan membuat fungsi boleh memakai apa yang dijamin constraint itu. Membahas extends dengan bentuk object dan interface, K extends keyof T untuk akses properti yang aman, constraint pada tipe primitif, dan error yang akan kamu temui.
Operator Tipe
- Operator keyofkeyof menerima tipe object dan memberimu union dari nama-nama propertinya. Pelajari keyof dengan interface, keyof typeof untuk object biasa, akses properti bertipe dengan generic, index signature (string | number), dan kenapa Object.keys mengembalikan string[].
- Indexed Access TypeIndexed access type membaca tipe sebuah properti dari tipe lain: Person["age"] adalah number. Pelajari T["key"], key berupa union, T[keyof T], T[number] untuk elemen array, indeks tuple, dan (typeof arr)[number] untuk mengubah array const menjadi union.
- Mapped TypeMapped type membangun tipe object baru dengan menelusuri key: { [K in keyof T]: ... }. Pelajari sintaksnya, modifier readonly dan ? dengan + dan -, key remapping dengan as, menyaring key, dan cara Partial, Readonly, Required, Pick, serta Record ditulis.
- Conditional TypeConditional type memilih satu dari dua tipe berdasarkan sebuah tes: T extends U ? X : Y. Pelajari sintaksnya, bagaimana conditional type didistribusikan ke union (dan cara menghentikannya), mengekstrak tipe dengan infer, dan cara menulis ReturnType sendiri.
- Template Literal TypeTemplate literal type membangun string literal type dengan sintaks backtick yang sama seperti template string JavaScript: `on${Capitalize<E>}`. Pelajari sintaksnya, bagaimana union berlipat ganda, Uppercase dan Capitalize, pola seperti `${number}px`, getter dengan mapped type, dan mem-parse string dengan infer.
- Branded TypeBranded type adalah tipe primitif dengan tag tak terlihat, seperti string & { readonly __brand: "UserId" }, sehingga UserId tidak bisa dikirim ke tempat yang mengharapkan OrderId. Pelajari cara kerja brand, fungsi constructor yang memvalidasi, helper Brand generic, brand dengan unique symbol, dan number ber-brand.
Utility Type
- Utility TypesSemua utility type bawaan TypeScript di satu tempat: Partial, Required, Readonly, Pick, Omit, Record, Exclude, Extract, NonNullable, Parameters, ReturnType, Awaited, tipe string, dan lainnya, masing-masing dengan penjelasan satu baris dan contoh yang bisa dijalankan.
- RecordRecord<K, V> adalah object type yang key-nya bertipe K dan semua nilainya bertipe V. Pelajari Record dengan key string dan key union (setiap key wajib ada), Partial<Record>, perulangan atas Record dengan key bertipe, jebakan key yang tidak ada, dan kapan sebaiknya memakai index signature atau Map.
- Partial dan RequiredPartial<T> membuat setiap property T menjadi opsional, persis tipe untuk object update atau patch. Pelajari Partial di fungsi update, kenapa sifatnya dangkal, cara menulis DeepPartial, jebakan undefined eksplisit, dan kebalikannya, Required<T>.
- OmitOmit<T, K> membuat tipe berisi semua property T kecuali key K. Pelajari Omit dengan satu dan beberapa key, mengganti tipe property, menghapus property saat runtime, Omit vs Exclude dan Pick, kenapa Omit menerima key yang tidak ada, Omit yang ketat, dan Omit pada tipe union.
- PickPick<T, K> membuat tipe yang hanya berisi property T yang key-nya ada di K. Pelajari Pick dengan satu atau beberapa key, cara ia mengecek key, Pick vs Omit, memilih dari tipe bersarang, fungsi pick() bertipe, dan memilih property berdasarkan tipe nilainya.
- readonly dan ReadonlyModifier readonly dan utility type Readonly<T> mencegah kode meng-assign ulang property. Pelajari property dan field class readonly, Readonly<T>, array readonly (readonly T[] dan ReadonlyArray), ReadonlyMap dan ReadonlySet, kenapa readonly dangkal dan hanya berlaku saat kompilasi, serta perbandingannya dengan Object.freeze dan as const.
- Exclude dan ExtractExclude, Extract, dan NonNullable menyaring anggota sebuah union type. Pelajari apa yang disimpan dan dibuang masing-masing, cara memilih anggota union berdasarkan bentuknya, cara ketiganya dibangun dari conditional type, dan perbedaannya dengan Omit dan Pick.
- ReturnType dan ParametersReturnType, Parameters, ConstructorParameters, InstanceType dan Awaited mengambil tipe dari fungsi, class, dan promise. Pelajari cara memakainya dengan typeof, cara mendapatkan tipe hasil fungsi async, apa yang terjadi pada overload dan generic, serta bagaimana ReturnType dibangun dengan infer.
Perulangan dan Koleksi
- PerulanganSemua cara melakukan perulangan di TypeScript dan tipe yang diberikan masing-masing: for loop klasik, for...of untuk array, map, dan string, for...in dan key-nya yang berupa string, forEach (tanpa break, tanpa await), perulangan bertipe atas key object, dan while.
- Pernyataan SwitchPernyataan switch di TypeScript: sintaks, bagaimana setiap case mempersempit tipe union, switch yang exhaustive sehingga gagal kompilasi kalau ada case yang terlewat, pola switch (true), fallthrough, dan scope blok.
- MapCara memakai Map di TypeScript: membuat Map<K, V> yang bertipe, kenapa get mengembalikan V | undefined, set, has, dan delete, iterasi sesuai urutan penyisipan, key berupa object, konversi dari dan ke object serta JSON, Map vs object vs Record, dan memberi tipe pada array.map().
- DictionaryTypeScript tidak punya class dictionary atau hashmap; kamu memberi tipe pada lookup key-value dengan index signature, Record<K, V>, atau Map<K, V>. Pelajari masing-masing, cara memeriksa apakah sebuah key ada, menambah, menghapus, dan mengiterasi, serta kenapa noUncheckedIndexedAccess penting untuk dictionary.
Async dan Error
- PromiseCara memberi tipe pada promise di TypeScript: tipe Promise<T>, memberi tipe pada new Promise dan resolve, bagaimana then mengubah tipe, kenapa catch memberimu any, Promise.all dengan hasil tuple, tipe hasil Promise.allSettled, dan membungkus API callback dalam promise bertipe.
- Async/AwaitCara async dan await diberi tipe di TypeScript: fungsi async mengembalikan Promise<T>, await membukanya, error ditangkap dengan try/catch, top-level await butuh ES module, serta perbedaan await satu per satu, await secara paralel, dan jebakan forEach.
- Penanganan ErrorPenanganan error di TypeScript: kenapa variabel catch bertipe unknown, cara mempersempitnya dengan instanceof Error, melempar error, menulis class error kustom dengan name dan cause, serta pola tipe Result untuk error yang sudah diperkirakan.
- SleepTypeScript tidak punya sleep bawaan, tetapi satu baris kode sudah cukup: fungsi yang mengembalikan Promise<void> yang di-resolve oleh setTimeout. Pelajari cara melakukan await padanya, berhenti sejenak di dalam perulangan, mencoba ulang dengan jeda, membatalkan sleep, dan kenapa tidak ada sleep yang memblokir di JavaScript.
Modul dan Tooling
- ModuleSetiap file TypeScript yang punya import atau export di level teratas adalah sebuah module. Pelajari named export dan default export, import type dan export type, bagaimana pengaturan module menentukan output ES module atau CommonJS, dan kenapa node16 serta nodenext meminta ekstensi .js di import.
- NamespaceNamespace TypeScript mengelompokkan nilai dan tipe di bawah satu nama dan dikompilasi menjadi object biasa. Pelajari sintaksnya, bagaimana namespace bergabung satu sama lain serta dengan fungsi dan class, kenapa ES module menggantikannya, dan di mana kamu masih menemuinya: declaration file dan global augmentation.
- File DeklarasiFile .d.ts mendeskripsikan tipe kode JavaScript tanpa berisi kodenya sama sekali, dan kata kunci declare melakukan hal yang sama di dalam file .ts. Pelajari cara file deklarasi dihasilkan, posisi package @types, cara memberi tipe pada modul tanpa tipe, serta bagaimana declare global dan module augmentation memperluas tipe yang sudah ada.
- Strict Modestrict: true di tsconfig.json mengaktifkan sekelompok pengecekan tipe: noImplicitAny, strictNullChecks, strictPropertyInitialization, dan lima lainnya. Lihat apa yang ditangkap masing-masing, cara mengaktifkan strict mode di proyek yang sudah ada, dan flag berguna yang tidak termasuk dalam strict.
- JSONJSON.parse mengembalikan any, jadi TypeScript memercayai tipe apa pun yang kamu berikan pada hasilnya. Pelajari cara memberi tipe pada JSON hasil parse, memvalidasinya dengan type guard, mengubah contoh JSON menjadi interface, meng-import file .json, dan apa yang dilakukan JSON.stringify pada Date, Set, dan undefined.
Lebih Jauh
- Best PracticeDelapan kebiasaan TypeScript yang mencegah bug sungguhan: biarkan strict menyala, pakai unknown alih-alih any, biarkan inferensi bekerja, pilih union daripada enum, periksa config dengan satisfies, modelkan state dengan discriminated union, hindari ! dan as, dan jadikan data readonly. Masing-masing dilengkapi contoh sebelum dan sesudah yang bisa dijalankan.
- Pertanyaan Interview25 pertanyaan interview TypeScript dengan jawaban singkat yang benar beserta kode, dikelompokkan dari pemula sampai mahir: any vs unknown, interface vs type, generic, narrowing, utility type, mapped type dan conditional type, structural typing, tsconfig, dan TypeScript 7.
