TS DOCS
BASIC-TYPES
Name
Description
Example
Output
stringDescription: Tipe data teks.
Example:
let name: string = 'Ridho'
Output: Type: string
stringTipe data teks.
let name: string = 'Ridho'
Type: string
numberDescription: Tipe data angka (integer, float, hex, octal, binary).
Example:
let age: number = 25
Output: Type: number
numberTipe data angka (integer, float, hex, octal, binary).
let age: number = 25
Type: number
booleanDescription: Tipe data true/false.
Example:
let isActive: boolean = true
Output: Type: boolean
booleanTipe data true/false.
let isActive: boolean = true
Type: boolean
nullDescription: Tipe null (biasanya dengan strictNullChecks).
Example:
let nothing: null = null
Output: Type: null
nullTipe null (biasanya dengan strictNullChecks).
let nothing: null = null
Type: null
undefinedDescription: Tipe undefined.
Example:
let notDefined: undefined = undefined
Output: Type: undefined
undefinedTipe undefined.
let notDefined: undefined = undefined
Type: undefined
anyDescription: Nonaktifkan type checking (hindari jika bisa).
Example:
let data: any = 123; data = 'hello'
Output: No error
anyNonaktifkan type checking (hindari jika bisa).
let data: any = 123; data = 'hello'
No error
unknownDescription: Tipe aman untuk nilai yang tidak diketahui.
Example:
let input: unknown = 'hello'; (input as string).toUpperCase()
Output: Perlu type assertion
unknownTipe aman untuk nilai yang tidak diketahui.
let input: unknown = 'hello'; (input as string).toUpperCase()
Perlu type assertion
voidDescription: Fungsi tidak mengembalikan nilai.
Example:
function log(msg: string): void { console.log(msg) }Output: No return
voidFungsi tidak mengembalikan nilai.
function log(msg: string): void { console.log(msg) }No return
neverDescription: Fungsi tidak pernah selesai (throw error atau infinite loop).
Example:
function error(msg: string): never { throw new Error(msg) }Output: Never
neverFungsi tidak pernah selesai (throw error atau infinite loop).
function error(msg: string): never { throw new Error(msg) }Never
arrayDescription: Array dengan tipe elemen tertentu.
Example:
let list: number[] = [1, 2, 3]
Output: Type: number[]
arrayArray dengan tipe elemen tertentu.
let list: number[] = [1, 2, 3]
Type: number[]
tupleDescription: Array dengan jumlah dan tipe elemen tetap.
Example:
let pair: [string, number] = ['age', 25]
Output: Type: [string, number]
tupleArray dengan jumlah dan tipe elemen tetap.
let pair: [string, number] = ['age', 25]
Type: [string, number]
enumDescription: Enum numerik atau string (gunakan const enum untuk optimasi).
Example:
enum Color { Red, Green, Blue }Output: Color.Red = 0
enumEnum numerik atau string (gunakan const enum untuk optimasi).
enum Color { Red, Green, Blue }Color.Red = 0
literal typeDescription: Tipe yang hanya menerima nilai literal tertentu.
Example:
let direction: 'left' | 'right' = 'left'
Output: Union literal
literal typeTipe yang hanya menerima nilai literal tertentu.
let direction: 'left' | 'right' = 'left'
Union literal
union typeDescription: Gabungan beberapa tipe.
Example:
let id: string | number = 123
Output: Bisa string atau number
union typeGabungan beberapa tipe.
let id: string | number = 123
Bisa string atau number
intersection typeDescription: Gabungan semua properti dari beberapa tipe.
Example:
type A = { a: number } & { b: string }Output: { a: number, b: string }
intersection typeGabungan semua properti dari beberapa tipe.
type A = { a: number } & { b: string }{ a: number, b: string }
objectDescription: Tipe objek umum.
Example:
let user: object = { name: 'Ridho' }Output: Type: object (tidak spesifik)
objectTipe objek umum.
let user: object = { name: 'Ridho' }Type: object (tidak spesifik)
symbolDescription: Tipe data simbol (unik).
Example:
let sym: symbol = Symbol('key')Output: Type: symbol
symbolTipe data simbol (unik).
let sym: symbol = Symbol('key')Type: symbol
bigintDescription: Tipe bilangan besar.
Example:
let big: bigint = 9007199254740991n
Output: Type: bigint
bigintTipe bilangan besar.
let big: bigint = 9007199254740991n
Type: bigint
nullish coalescingDescription: Operator ?? untuk memberikan nilai default jika null/undefined.
Example:
let x = foo ?? 'default'
Output: x = 'default' jika foo null/undefined
nullish coalescingOperator ?? untuk memberikan nilai default jika null/undefined.
let x = foo ?? 'default'
x = 'default' jika foo null/undefined
optional chainingDescription: Akses properti dalam dengan aman (?. ).
Example:
let street = user?.address?.street
Output: undefined jika tidak ada
optional chainingAkses properti dalam dengan aman (?. ).
let street = user?.address?.street
undefined jika tidak ada
INTERFACES-TYPES
Name
Description
Example
Output
interfaceDescription: Mendefinisikan kontrak objek (bisa di-extend).
Example:
interface User { name: string; age: number }Output: User type
interfaceMendefinisikan kontrak objek (bisa di-extend).
interface User { name: string; age: number }User type
extending interfaceDescription: Pewarisan interface.
Example:
interface Admin extends User { role: string }Output: Admin memiliki name, age, role
extending interfacePewarisan interface.
interface Admin extends User { role: string }Admin memiliki name, age, role
type aliasDescription: Alias tipe untuk tipe apa pun.
Example:
type Point = { x: number; y: number }Output: Point type
type aliasAlias tipe untuk tipe apa pun.
type Point = { x: number; y: number }Point type
type vs interfaceDescription: Interface bisa di-merge deklarasi, type bisa union/intersection.
Example:
type ID = string | number
Output: Union type
type vs interfaceInterface bisa di-merge deklarasi, type bisa union/intersection.
type ID = string | number
Union type
readonlyDescription: Properti tidak bisa diubah setelah inisialisasi.
Example:
interface Config { readonly apiKey: string }Output: Tidak bisa reassign
readonlyProperti tidak bisa diubah setelah inisialisasi.
interface Config { readonly apiKey: string }Tidak bisa reassign
optional propertiesDescription: Properti dengan ? tidak wajib.
Example:
interface User { name: string; age?: number }Output: age opsional
optional propertiesProperti dengan ? tidak wajib.
interface User { name: string; age?: number }age opsional
index signaturesDescription: Properti dengan key dinamis.
Example:
interface Dict { [key: string]: number }Output: Semua key string -> number
index signaturesProperti dengan key dinamis.
interface Dict { [key: string]: number }Semua key string -> number
call signatureDescription: Tipe untuk fungsi.
Example:
interface Fn { (x: number): string }Output: Fungsi dengan signature
call signatureTipe untuk fungsi.
interface Fn { (x: number): string }Fungsi dengan signature
construct signatureDescription: Tipe untuk constructor.
Example:
interface Ctor { new (x: number): Date }Output: Constructor
construct signatureTipe untuk constructor.
interface Ctor { new (x: number): Date }Constructor
hybrid typeDescription: Objek yang juga bisa dipanggil.
Example:
interface Counter { (): number; count: number }Output: Fungsi + properti
hybrid typeObjek yang juga bisa dipanggil.
interface Counter { (): number; count: number }Fungsi + properti
GENERICS
Name
Description
Example
Output
generic functionDescription: Fungsi dengan parameter tipe.
Example:
function identity<T>(arg: T): T { return arg }Output: identity<string>('hello')
generic functionFungsi dengan parameter tipe.
function identity<T>(arg: T): T { return arg }identity<string>('hello')
generic interfaceDescription: Interface dengan tipe generik.
Example:
interface Box<T> { value: T }Output: Box<string>
generic interfaceInterface dengan tipe generik.
interface Box<T> { value: T }Box<string>
generic constraintsDescription: Batasi tipe generik dengan extends.
Example:
function getLength<T extends { length: number }>(arg: T): number { return arg.length }Output: Terima yang punya .length
generic constraintsBatasi tipe generik dengan extends.
function getLength<T extends { length: number }>(arg: T): number { return arg.length }Terima yang punya .length
generic defaultDescription: Nilai default parameter tipe.
Example:
interface Page<T = string> { data: T }Output: Default string
generic defaultNilai default parameter tipe.
interface Page<T = string> { data: T }Default string
keyof with genericsDescription: Ambil key dari tipe.
Example:
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key] }Output: Akses properti aman
keyof with genericsAmbil key dari tipe.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key] }Akses properti aman
generic classDescription: Kelas dengan tipe generik.
Example:
class Repository<T> { items: T[] = [] }Output: Repository<User>
generic classKelas dengan tipe generik.
class Repository<T> { items: T[] = [] }Repository<User>
infer keywordDescription: Ambil tipe dalam conditional type.
Example:
type Return<T> = T extends (...args: any[]) => infer R ? R : never
Output: ReturnType buatan
infer keywordAmbil tipe dalam conditional type.
type Return<T> = T extends (...args: any[]) => infer R ? R : never
ReturnType buatan
const type parameters (TS 5.0)Description: Parameter tipe dengan const modifier.
Example:
function getConst<T, const T2>(a: T, b: T2) {}Output: Literal type lebih presisi
const type parameters (TS 5.0)Parameter tipe dengan const modifier.
function getConst<T, const T2>(a: T, b: T2) {}Literal type lebih presisi
UTILITY-TYPES
Name
Description
Example
Output
Partial<T>Description: Semua properti jadi opsional.
Example:
Partial<{ a: number; b: string }>Output: { a?: number; b?: string }
Partial<T>Semua properti jadi opsional.
Partial<{ a: number; b: string }>{ a?: number; b?: string }
Required<T>Description: Semua properti jadi wajib.
Example:
Required<{ a?: number }>Output: { a: number }
Required<T>Semua properti jadi wajib.
Required<{ a?: number }>{ a: number }
Readonly<T>Description: Semua properti readonly.
Example:
Readonly<{ a: number }>Output: { readonly a: number }
Readonly<T>Semua properti readonly.
Readonly<{ a: number }>{ readonly a: number }
Record<K, T>Description: Objek dengan key K dan value T.
Example:
Record<'a' | 'b', number>
Output: { a: number; b: number }
Record<K, T>Objek dengan key K dan value T.
Record<'a' | 'b', number>
{ a: number; b: number }
Pick<T, K>Description: Ambil subset properti.
Example:
Pick<{ a: number; b: string }, 'a'>Output: { a: number }
Pick<T, K>Ambil subset properti.
Pick<{ a: number; b: string }, 'a'>{ a: number }
Omit<T, K>Description: Buang subset properti.
Example:
Omit<{ a: number; b: string }, 'b'>Output: { a: number }
Omit<T, K>Buang subset properti.
Omit<{ a: number; b: string }, 'b'>{ a: number }
Exclude<T, U>Description: Keluarkan tipe yang ada di U dari T.
Example:
Exclude<'a' | 'b' | 'c', 'a'>
Output: 'b' | 'c'
Exclude<T, U>Keluarkan tipe yang ada di U dari T.
Exclude<'a' | 'b' | 'c', 'a'>
'b' | 'c'
Extract<T, U>Description: Ambil tipe yang ada di U dari T.
Example:
Extract<'a' | 'b', 'a' | 'c'>
Output: 'a'
Extract<T, U>Ambil tipe yang ada di U dari T.
Extract<'a' | 'b', 'a' | 'c'>
'a'
NonNullable<T>Description: Buang null dan undefined.
Example:
NonNullable<string | null | undefined>
Output: string
NonNullable<T>Buang null dan undefined.
NonNullable<string | null | undefined>
string
ReturnType<T>Description: Ambil tipe return fungsi.
Example:
ReturnType<() => string>
Output: string
ReturnType<T>Ambil tipe return fungsi.
ReturnType<() => string>
string
Parameters<T>Description: Ambil tipe parameter fungsi sebagai tuple.
Example:
Parameters<(a: number, b: string) => void>
Output: [number, string]
Parameters<T>Ambil tipe parameter fungsi sebagai tuple.
Parameters<(a: number, b: string) => void>
[number, string]
ConstructorParameters<T>Description: Ambil parameter constructor.
Example:
ConstructorParameters<typeof Date>
Output: [string | number | Date]
ConstructorParameters<T>Ambil parameter constructor.
ConstructorParameters<typeof Date>
[string | number | Date]
InstanceType<T>Description: Ambil tipe instance dari constructor.
Example:
InstanceType<typeof Date>
Output: Date
InstanceType<T>Ambil tipe instance dari constructor.
InstanceType<typeof Date>
Date
Awaited<T>Description: Unwrap Promise.
Example:
Awaited<Promise<string>>
Output: string
Awaited<T>Unwrap Promise.
Awaited<Promise<string>>
string
Uppercase<StringType>Description: Ubah string literal ke uppercase.
Example:
Uppercase<'hello'>
Output: 'HELLO'
Uppercase<StringType>Ubah string literal ke uppercase.
Uppercase<'hello'>
'HELLO'
Lowercase<StringType>Description: Ubah ke lowercase.
Example:
Lowercase<'HELLO'>
Output: 'hello'
Lowercase<StringType>Ubah ke lowercase.
Lowercase<'HELLO'>
'hello'
Capitalize<StringType>Description: Kapitalisasi huruf pertama.
Example:
Capitalize<'hello'>
Output: 'Hello'
Capitalize<StringType>Kapitalisasi huruf pertama.
Capitalize<'hello'>
'Hello'
Uncapitalize<StringType>Description: Uncapitalize huruf pertama.
Example:
Uncapitalize<'Hello'>
Output: 'hello'
Uncapitalize<StringType>Uncapitalize huruf pertama.
Uncapitalize<'Hello'>
'hello'
TYPE-MANIPULATION
Name
Description
Example
Output
keyof TDescription: Union key dari T.
Example:
type Keys = keyof { a: number; b: string }Output: 'a' | 'b'
keyof TUnion key dari T.
type Keys = keyof { a: number; b: string }'a' | 'b'
typeofDescription: Ambil tipe dari nilai/variabel.
Example:
let user = { name: 'Ridho' }; type UserType = typeof userOutput: { name: string }
typeofAmbil tipe dari nilai/variabel.
let user = { name: 'Ridho' }; type UserType = typeof user{ name: string }
T[K] (indexed access)Description: Akses tipe properti.
Example:
type NameType = User['name']
Output: string
T[K] (indexed access)Akses tipe properti.
type NameType = User['name']
string
conditional typesDescription: Tipe kondisional T extends U ? X : Y.
Example:
type IsString<T> = T extends string ? true : false
Output: IsString<'hello'> = true
conditional typesTipe kondisional T extends U ? X : Y.
type IsString<T> = T extends string ? true : false
IsString<'hello'> = true
distributive conditionalDescription: Kondisional terdistribusi pada union.
Example:
type ToArray<T> = T extends any ? T[] : never
Output: ToArray<string|number> = string[] | number[]
distributive conditionalKondisional terdistribusi pada union.
type ToArray<T> = T extends any ? T[] : never
ToArray<string|number> = string[] | number[]
mapped typesDescription: Iterasi key untuk membuat tipe baru.
Example:
type Readonly<T> = { readonly [K in keyof T]: T[K] }Output: Custom utility
mapped typesIterasi key untuk membuat tipe baru.
type Readonly<T> = { readonly [K in keyof T]: T[K] }Custom utility
key remapping (as)Description: Ganti key dalam mapped type.
Example:
type Getters<T> = { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] }Output: Mengubah nama key
key remapping (as)Ganti key dalam mapped type.
type Getters<T> = { [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K] }Mengubah nama key
template literal typesDescription: Gabung string literal.
Example:
type Greeting = `Hello, ${string}!`Output: Semua string dengan prefix 'Hello, ' dan suffix '!'
template literal typesGabung string literal.
type Greeting = `Hello, ${string}!`Semua string dengan prefix 'Hello, ' dan suffix '!'
infer in conditionalDescription: Ekstrak sub-tipe.
Example:
type Unpack<T> = T extends (infer U)[] ? U : T
Output: Unpack<number[]> = number
infer in conditionalEkstrak sub-tipe.
type Unpack<T> = T extends (infer U)[] ? U : T
Unpack<number[]> = number
assertion functionsDescription: Fungsi yang meyakinkan TS tentang tipe.
Example:
function assert(condition: any, msg?: string): asserts condition
Output: Type guard
assertion functionsFungsi yang meyakinkan TS tentang tipe.
function assert(condition: any, msg?: string): asserts condition
Type guard
const assertions (as const)Description: Buat literal readonly dan narrow.
Example:
let arr = [1, 2, 3] as const
Output: readonly [1, 2, 3]
const assertions (as const)Buat literal readonly dan narrow.
let arr = [1, 2, 3] as const
readonly [1, 2, 3]
satisfies operatorDescription: Validasi tipe tanpa memperluas tipe.
Example:
let x = { a: 1 } satisfies Record<string, number>Output: Tetap { a: number }
satisfies operatorValidasi tipe tanpa memperluas tipe.
let x = { a: 1 } satisfies Record<string, number>Tetap { a: number }
typeof importDescription: Ambil tipe dari module yang diimport.
Example:
type MyModule = typeof import('./module')Output: Tipe modul
typeof importAmbil tipe dari module yang diimport.
type MyModule = typeof import('./module')Tipe modul
NARROWING-GUARDS
Name
Description
Example
Output
typeof guardDescription: Narrowing dengan typeof.
Example:
if (typeof x === 'string') { x.toUpperCase() }Output: x jadi string
typeof guardNarrowing dengan typeof.
if (typeof x === 'string') { x.toUpperCase() }x jadi string
instanceof guardDescription: Narrowing dengan instanceof.
Example:
if (x instanceof Date) { x.getFullYear() }Output: x jadi Date
instanceof guardNarrowing dengan instanceof.
if (x instanceof Date) { x.getFullYear() }x jadi Date
in operatorDescription: Cek keberadaan properti.
Example:
if ('name' in obj) { obj.name }Output: Tipe narrowed
in operatorCek keberadaan properti.
if ('name' in obj) { obj.name }Tipe narrowed
custom type guardDescription: Fungsi dengan return type predicate.
Example:
function isString(val: unknown): val is string { return typeof val === 'string' }Output: val is string
custom type guardFungsi dengan return type predicate.
function isString(val: unknown): val is string { return typeof val === 'string' }val is string
discriminated unionDescription: Union dengan properti literal pembeda.
Example:
type Shape = { kind: 'circle'; radius: number } | { kind: 'rect'; width: number }Output: Switch pada kind
discriminated unionUnion dengan properti literal pembeda.
type Shape = { kind: 'circle'; radius: number } | { kind: 'rect'; width: number }Switch pada kind
exhaustiveness checkDescription: never untuk memastikan semua kasus ditangani.
Example:
default: const _exhaustive: never = shape
Output: Error jika ada union baru
exhaustiveness checknever untuk memastikan semua kasus ditangani.
default: const _exhaustive: never = shape
Error jika ada union baru
truthiness narrowingDescription: Menggunakan truthy/falsy.
Example:
if (value) { /* value bukan null/undefined */ }Output: Narrowing
truthiness narrowingMenggunakan truthy/falsy.
if (value) { /* value bukan null/undefined */ }Narrowing
MODULES-NAMESPACES
Name
Description
Example
Output
ESM import/exportDescription: Sintaks module modern.
Example:
import { fn } from './module'Output: ES module
ESM import/exportSintaks module modern.
import { fn } from './module'ES module
default import/exportDescription: Import/export default.
Example:
import express from 'express'
Output: Default
default import/exportImport/export default.
import express from 'express'
Default
type importDescription: Hanya import tipe (dihapus saat kompilasi).
Example:
import type { User } from './types'Output: Type-only import
type importHanya import tipe (dihapus saat kompilasi).
import type { User } from './types'Type-only import
import type dengan inlineDescription: Import sebagian tipe.
Example:
import { type User, helper } from './module'Output: User adalah tipe
import type dengan inlineImport sebagian tipe.
import { type User, helper } from './module'User adalah tipe
namespace (ambient/module)Description: Namespace lama, hindari jika bisa.
Example:
namespace MyApp { export interface Config {} }Output: Digantikan ES modules
namespace (ambient/module)Namespace lama, hindari jika bisa.
namespace MyApp { export interface Config {} }Digantikan ES modules
declare moduleDescription: Deklarasikan tipe untuk modul eksternal.
Example:
declare module '*.svg' { const content: string; export default content }Output: Import SVG
declare moduleDeklarasikan tipe untuk modul eksternal.
declare module '*.svg' { const content: string; export default content }Import SVG
global declarationDescription: Perluas tipe global (Window, dll).
Example:
declare global { interface Window { myProp: string } }Output: Window.myProp
global declarationPerluas tipe global (Window, dll).
declare global { interface Window { myProp: string } }Window.myProp
moduleResolutionDescription: Strategi resolusi modul (node16, bundler).
Example:
"moduleResolution": "bundler"
Output: tsconfig
moduleResolutionStrategi resolusi modul (node16, bundler).
"moduleResolution": "bundler"
tsconfig
DECORATORS
Name
Description
Example
Output
Class Decorator (Stage 3)Description: Decorator pada class (tidak perlu experimental).
Example:
@sealed class MyClass {}Output: Decorator
Class Decorator (Stage 3)Decorator pada class (tidak perlu experimental).
@sealed class MyClass {}Decorator
Method DecoratorDescription: Decorator pada method.
Example:
@log class A { @log greet() {} }Output: Logging
Method DecoratorDecorator pada method.
@log class A { @log greet() {} }Logging
Accessor DecoratorDescription: Decorator pada getter/setter.
Example:
@configurable get name() {}Output: Accessor
Accessor DecoratorDecorator pada getter/setter.
@configurable get name() {}Accessor
Field DecoratorDescription: Decorator pada field.
Example:
@required name: string
Output: Field
Field DecoratorDecorator pada field.
@required name: string
Field
Decorator ContextDescription: Parameter kedua decorator: ClassMethodDecoratorContext.
Example:
function log(target: any, context: ClassMethodDecoratorContext) {}Output: Context metadata
Decorator ContextParameter kedua decorator: ClassMethodDecoratorContext.
function log(target: any, context: ClassMethodDecoratorContext) {}Context metadata
ENUMS
Name
Description
Example
Output
Numeric enumDescription: Enum dengan nilai numerik auto-increment.
Example:
enum Direction { Up, Down }Output: Direction.Up = 0
Numeric enumEnum dengan nilai numerik auto-increment.
enum Direction { Up, Down }Direction.Up = 0
String enumDescription: Enum dengan nilai string.
Example:
enum Color { Red = 'RED', Green = 'GREEN' }Output: Color.Red = 'RED'
String enumEnum dengan nilai string.
enum Color { Red = 'RED', Green = 'GREEN' }Color.Red = 'RED'
const enumDescription: Enum yang dihapus saat kompilasi, nilai inline.
Example:
const enum Size { Small, Large }Output: Tidak ada objek runtime
const enumEnum yang dihapus saat kompilasi, nilai inline.
const enum Size { Small, Large }Tidak ada objek runtime
const assertions for enumsDescription: Alternatif enum pakai as const.
Example:
const Colors = { Red: 'RED', Green: 'GREEN' } as constOutput: Readonly object
const assertions for enumsAlternatif enum pakai as const.
const Colors = { Red: 'RED', Green: 'GREEN' } as constReadonly object
TSCONFIG
Name
Description
Example
Output
compilerOptionsDescription: Opsi utama compiler TS.
Example:
"compilerOptions": { "target": "ES2022" }Output: Target ES2022
compilerOptionsOpsi utama compiler TS.
"compilerOptions": { "target": "ES2022" }Target ES2022
targetDescription: Versi JavaScript output.
Example:
"target": "ESNext"
Output: ES terbaru
targetVersi JavaScript output.
"target": "ESNext"
ES terbaru
moduleDescription: Sistem modul (ESNext, Node16, CommonJS).
Example:
"module": "Node16"
Output: Node16
moduleSistem modul (ESNext, Node16, CommonJS).
"module": "Node16"
Node16
moduleResolutionDescription: Cara resolve modul (bundler, node16, classic).
Example:
"moduleResolution": "bundler"
Output: Bundler (Next.js)
moduleResolutionCara resolve modul (bundler, node16, classic).
"moduleResolution": "bundler"
Bundler (Next.js)
strictDescription: Aktifkan semua strict checks.
Example:
"strict": true
Output: Semua ketat
strictAktifkan semua strict checks.
"strict": true
Semua ketat
strictNullChecksDescription: Null dan undefined tidak bisa diberikan ke tipe lain.
Example:
"strictNullChecks": true
Output: null tidak masuk string
strictNullChecksNull dan undefined tidak bisa diberikan ke tipe lain.
"strictNullChecks": true
null tidak masuk string
noUncheckedIndexedAccessDescription: Indexed access menghasilkan undefined opsional.
Example:
"noUncheckedIndexedAccess": true
Output: arr[0] mungkin undefined
noUncheckedIndexedAccessIndexed access menghasilkan undefined opsional.
"noUncheckedIndexedAccess": true
arr[0] mungkin undefined
pathsDescription: Path aliases untuk import.
Example:
"paths": { "@/*": ["./src/*"] }Output: import dari @/
pathsPath aliases untuk import.
"paths": { "@/*": ["./src/*"] }import dari @/
baseUrlDescription: Direktori dasar untuk resolve non-relatif.
Example:
"baseUrl": "./src"
Output: Resolve dari src
baseUrlDirektori dasar untuk resolve non-relatif.
"baseUrl": "./src"
Resolve dari src
includeDescription: File yang di-include.
Example:
"include": ["src/**/*"]
Output: Include src
includeFile yang di-include.
"include": ["src/**/*"]
Include src
excludeDescription: File yang dikecualikan.
Example:
"exclude": ["node_modules", "dist"]
Output: Exclude
excludeFile yang dikecualikan.
"exclude": ["node_modules", "dist"]
Exclude
outDirDescription: Folder output hasil kompilasi.
Example:
"outDir": "./dist"
Output: Output ke dist
outDirFolder output hasil kompilasi.
"outDir": "./dist"
Output ke dist
declarationDescription: Generate file .d.ts.
Example:
"declaration": true
Output: File deklarasi
declarationGenerate file .d.ts.
"declaration": true
File deklarasi
declarationMapDescription: Generate source map untuk deklarasi.
Example:
"declarationMap": true
Output: Navigasi ke source
declarationMapGenerate source map untuk deklarasi.
"declarationMap": true
Navigasi ke source
sourceMapDescription: Generate .map untuk debugging.
Example:
"sourceMap": true
Output: Debug di TS
sourceMapGenerate .map untuk debugging.
"sourceMap": true
Debug di TS
libDescription: Library yang disertakan (DOM, ESNext).
Example:
"lib": ["ES2022", "DOM"]
Output: ES2022 + DOM
libLibrary yang disertakan (DOM, ESNext).
"lib": ["ES2022", "DOM"]
ES2022 + DOM
isolatedModulesDescription: Pastikan setiap file bisa transpile sendiri (wajib Next.js).
Example:
"isolatedModules": true
Output: Wajib untuk bundler
isolatedModulesPastikan setiap file bisa transpile sendiri (wajib Next.js).
"isolatedModules": true
Wajib untuk bundler
forceConsistentCasingInFileNamesDescription: Pastikan casing file konsisten.
Example:
"forceConsistentCasingInFileNames": true
Output: Error jika salah casing
forceConsistentCasingInFileNamesPastikan casing file konsisten.
"forceConsistentCasingInFileNames": true
Error jika salah casing
skipLibCheckDescription: Lewati pengecekan tipe di .d.ts.
Example:
"skipLibCheck": true
Output: Cepat
skipLibCheckLewati pengecekan tipe di .d.ts.
"skipLibCheck": true
Cepat
noEmitDescription: Jangan emit output JS.
Example:
"noEmit": true
Output: Hanya cek tipe
noEmitJangan emit output JS.
"noEmit": true
Hanya cek tipe
esModuleInteropDescription: Interoperabilitas CommonJS.
Example:
"esModuleInterop": true
Output: Import default
esModuleInteropInteroperabilitas CommonJS.
"esModuleInterop": true
Import default
resolveJsonModuleDescription: Izinkan import JSON.
Example:
"resolveJsonModule": true
Output: Import json
resolveJsonModuleIzinkan import JSON.
"resolveJsonModule": true
Import json
allowImportingTsExtensionsDescription: Izinkan .ts di import path.
Example:
"allowImportingTsExtensions": true
Output: Import './file.ts'
allowImportingTsExtensionsIzinkan .ts di import path.
"allowImportingTsExtensions": true
Import './file.ts'
REACT-TYPES
Name
Description
Example
Output
React.FCDescription: Functional component dengan children opsional.
Example:
const Comp: React.FC<Props> = ({ children }) => <div>{children}</div>Output: Component
React.FCFunctional component dengan children opsional.
const Comp: React.FC<Props> = ({ children }) => <div>{children}</div>Component
React.ReactNodeDescription: Semua yang bisa dirender (string, element, array, dll).
Example:
type Props = { children: React.ReactNode }Output: Tipe children umum
React.ReactNodeSemua yang bisa dirender (string, element, array, dll).
type Props = { children: React.ReactNode }Tipe children umum
React.ReactElementDescription: Hanya JSX element.
Example:
type Props = { element: React.ReactElement }Output: JSX element
React.ReactElementHanya JSX element.
type Props = { element: React.ReactElement }JSX element
React.CSSPropertiesDescription: Tipe untuk style inline.
Example:
const style: React.CSSProperties = { color: 'red' }Output: Style object
React.CSSPropertiesTipe untuk style inline.
const style: React.CSSProperties = { color: 'red' }Style object
React.ComponentPropsDescription: Ambil props dari komponen.
Example:
type BtnProps = React.ComponentProps<'button'>
Output: Semua atribut button
React.ComponentPropsAmbil props dari komponen.
type BtnProps = React.ComponentProps<'button'>
Semua atribut button
React.HTMLAttributesDescription: Atribut HTML generik.
Example:
type DivProps = React.HTMLAttributes<HTMLDivElement>
Output: Div attributes
React.HTMLAttributesAtribut HTML generik.
type DivProps = React.HTMLAttributes<HTMLDivElement>
Div attributes
React.FormEventDescription: Event form.
Example:
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
Output: FormEvent
React.FormEventEvent form.
onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
FormEvent
React.ChangeEventDescription: Event perubahan input.
Example:
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
Output: ChangeEvent
React.ChangeEventEvent perubahan input.
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
ChangeEvent
React.MouseEventDescription: Event mouse.
Example:
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
Output: MouseEvent
React.MouseEventEvent mouse.
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
MouseEvent
React.KeyboardEventDescription: Event keyboard.
Example:
onKeyDown: (e: React.KeyboardEvent) => void
Output: KeyboardEvent
React.KeyboardEventEvent keyboard.
onKeyDown: (e: React.KeyboardEvent) => void
KeyboardEvent
React.RefDescription: Ref object atau callback.
Example:
const ref = React.useRef<HTMLDivElement>(null)
Output: Ref object
React.RefRef object atau callback.
const ref = React.useRef<HTMLDivElement>(null)
Ref object
React.PropsWithChildrenDescription: Props + children otomatis.
Example:
type Props = React.PropsWithChildren<{ title: string }>Output: { title: string; children?: ReactNode }
React.PropsWithChildrenProps + children otomatis.
type Props = React.PropsWithChildren<{ title: string }>{ title: string; children?: ReactNode }
React.ReactPortalDescription: Tipe untuk portal.
Example:
ReactDOM.createPortal(child, container)
Output: Portal
React.ReactPortalTipe untuk portal.
ReactDOM.createPortal(child, container)
Portal
NEXTJS-TYPES
Name
Description
Example
Output
NextPageDescription: Tipe untuk halaman Next.js (App Router).
Example:
import { NextPage } from 'next'Output: NextPage
NextPageTipe untuk halaman Next.js (App Router).
import { NextPage } from 'next'NextPage
PageProps (params, searchParams)Description: Props halaman App Router.
Example:
type Props = { params: { id: string }; searchParams: { q: string } }Output: Tipe halaman
PageProps (params, searchParams)Props halaman App Router.
type Props = { params: { id: string }; searchParams: { q: string } }Tipe halaman
LayoutPropsDescription: Props layout (children + params).
Example:
type Props = { children: React.ReactNode; params: { slug: string } }Output: Layout
LayoutPropsProps layout (children + params).
type Props = { children: React.ReactNode; params: { slug: string } }Layout
MetadataDescription: Tipe untuk metadata.
Example:
import { Metadata } from 'next'Output: Metadata
MetadataTipe untuk metadata.
import { Metadata } from 'next'Metadata
NextApiRequest / NextApiResponseDescription: Tipe untuk API Routes (Pages Router).
Example:
import { NextApiRequest, NextApiResponse } from 'next'Output: API types
NextApiRequest / NextApiResponseTipe untuk API Routes (Pages Router).
import { NextApiRequest, NextApiResponse } from 'next'API types
RouteHandler (App Router)Description: Tipe untuk route handler.
Example:
import { NextResponse, NextRequest } from 'next/server'Output: NextRequest, NextResponse
RouteHandler (App Router)Tipe untuk route handler.
import { NextResponse, NextRequest } from 'next/server'NextRequest, NextResponse
NextAuth types (next-auth)Description: Tipe untuk NextAuth (auth(), session).
Example:
import { getServerSession } from 'next-auth'Output: Session
NextAuth types (next-auth)Tipe untuk NextAuth (auth(), session).
import { getServerSession } from 'next-auth'Session
ERROR-HANDLING
Name
Description
Example
Output
try/catch typesDescription: Error adalah unknown di catch (useUnknownInCatchVariables).
Example:
catch (e) { if (e instanceof Error) { console.log(e.message) } }Output: Error safe
try/catch typesError adalah unknown di catch (useUnknownInCatchVariables).
catch (e) { if (e instanceof Error) { console.log(e.message) } }Error safe
asserts conditionDescription: Fungsi assertion.
Example:
function assert(condition: any, msg: string): asserts condition { if (!condition) throw Error(msg) }Output: Narrowing
asserts conditionFungsi assertion.
function assert(condition: any, msg: string): asserts condition { if (!condition) throw Error(msg) }Narrowing
never typeDescription: Untuk fungsi yang tidak kembali.
Example:
function fail(msg: string): never { throw new Error(msg) }Output: Never
never typeUntuk fungsi yang tidak kembali.
function fail(msg: string): never { throw new Error(msg) }Never
Promise rejection typesDescription: Tipe penanganan Promise reject.
Example:
Promise.reject(new Error('fail')) as Promise<never>Output: Promise<never>
Promise rejection typesTipe penanganan Promise reject.
Promise.reject(new Error('fail')) as Promise<never>Promise<never>
ASYNC-AWAIT
Name
Description
Example
Output
Promise<T>Description: Tipe return async function.
Example:
async function fetchUser(): Promise<User> {}Output: Promise
Promise<T>Tipe return async function.
async function fetchUser(): Promise<User> {}Promise
Awaited<T>Description: Unwrap tipe Promise.
Example:
type Result = Awaited<Promise<Promise<number>>>
Output: number
Awaited<T>Unwrap tipe Promise.
type Result = Awaited<Promise<Promise<number>>>
number
async function typeDescription: Fungsi async otomatis bungkus return dalam Promise.
Example:
const fn = async (): Promise<string> => 'hello'
Output: Promise<string>
async function typeFungsi async otomatis bungkus return dalam Promise.
const fn = async (): Promise<string> => 'hello'
Promise<string>