Type Inference TypeScript: Kapan Perlu Anotasi Tipe

Type inference adalah TypeScript yang menentukan tipe yang tidak kamu tulis. Inisialisasi variabel, dan variabel itu mengambil tipe nilainya; kembalikan nilai dari fungsi, dan tipe kembaliannya ikut menyesuaikan. Sebagian besar kode TypeScript punya anotasi jauh lebih sedikit daripada yang orang kira.

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

Komentarnya menunjukkan apa yang ditampilkan editor saat kamu mengarahkan kursor ke setiap nama. Baris terakhir adalah error kompilasi (TS2322) walaupun count tidak pernah diberi anotasi; // @ts-expect-error menandainya sebagai error yang memang diharapkan supaya sisa blok tetap berjalan.

let vs const: Pelebaran Literal

const tidak pernah bisa berubah, jadi TypeScript memberinya tipe tersempit: nilai literal itu sendiri. let mendapat tipe yang lebih lebar, karena nilainya mungkin diganti nanti.

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

Ini penting ketika sebuah fungsi hanya menerima nilai tertentu:

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

Perbaiki dengan const, atau dengan memberi anotasi pada variabelnya: let dir: "left" | "right" = "left". Tipe literal dibahas tersendiri di halaman tipe literal.

Object dan Array Melebarkan Anggotanya

Property object literal bisa diubah, jadi tipenya melebar seperti let, bahkan ketika object itu sendiri const. Elemen array juga begitu. as const membuat semuanya readonly dan mempertahankan tipe literalnya.

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

Inferensi Tipe Kembalian

Tipe kembalian fungsi disimpulkan dari pernyataan return-nya. Kalau ada beberapa, hasilnya adalah union dari semuanya.

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

Tipe kembalian hasil inferensi sudah cukup untuk sebagian besar fungsi. Tulis tipe kembalian secara eksplisit pada fungsi yang di-export atau publik kalau kamu ingin signature-nya menjadi kontrak: perubahan di dalam isi fungsi yang mengembalikan tipe berbeda akan gagal di fungsi itu, bukan di pemanggil yang jauh.

Contextual Typing: Callback Mendapat Tipenya

Parameter tidak disimpulkan dari cara fungsi dipanggil. Ada dua pengecualian. Parameter dengan nilai default mengambil tipe nilai default itu (function retry(times = 3) membuat times bertipe number). Dan fungsi yang ditulis di tempat yang sudah mengharapkan tipe fungsi mendapat tipe parameternya dari konteks itu, jadi parameter callback tidak perlu anotasi.

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

Hal yang sama berlaku untuk forEach, filter, reduce, callback Promise, event handler, dan fungsi apa pun yang kamu berikan ke parameter dengan tipe fungsi yang sudah dideklarasikan.

Parameter Perlu Anotasi

Tanpa nilai default atau konteks seperti itu, TypeScript tidak melihat cara fungsi dipanggil untuk menebak tipe parameternya. Dengan strict aktif, parameter tanpa anotasi adalah error TS7006:

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

Tulis function double(x: number) dan blok itu mencetak 42, dengan tipe kembalian number yang disimpulkan dari x * 2.

Best Common Type

Untuk array literal dengan nilai yang jenisnya berbeda-beda, TypeScript menyimpulkan array dari union tipe-tipenya. TypeScript tidak mencari tipe dasar bersama yang tidak kamu sebutkan.

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

Array kosong adalah satu kasus yang perlu diwaspadai. const list = [] dimulai sebagai array yang "berkembang", yang tipenya bertambah setiap kali push; anotasi, const list: string[] = [], menyatakan maksudnya sejak awal dan lebih jelas.

Kapan Perlu Anotasi

Cara tercepat untuk melihat apa yang disimpulkan adalah mengarahkan kursor ke nama itu di editor. Tanpa editor, berikan nilai itu ke variabel dengan tipe yang salah, misalnya const probe: boolean = mixed;, dan pesan error compiler akan menyebutkan tipe hasil inferensinya.