Summary - Type narrowing
- TypeScript course
- Advanced
- Lesson 28/57
- 4 min
Write a mixed data parser with narrowing.
Summary - Type narrowing
Type narrowing reduces a union type to a specific subtype in a given branch. typeof narrows primitive types, in narrows by object property, instanceof narrows by class. Choosing the right tool depends on the data: typeof for primitives, in for objects of different shapes, instanceof for class instances.
type Data = string | number | { name: string } | Error;
function describe(d: Data): string {
if (typeof d === "string") return `string: ${d}`;
if (typeof d === "number") return `number: ${d}`;
if (d instanceof Error) return `error: ${d.message}`;
if ("name" in d) return `object: ${d.name}`;
return "unknown";
}Practice Write a mixed data parser
Define the type Data = string | number | { name: string } | Error. Write a describe(d: Data): string function. In order: if typeof d === "string", return `string: ${d}`; if typeof d === "number", return `number: ${d}`; if d instanceof Error, return `error: ${d.message}`; otherwise return `object: ${d.name}`. Print results via console.log(describe("hello")), console.log(describe(42)), and console.log(describe({ name: "table" })).
Starter code
// Data türünü tanımla: string | number | { name: string } | Error
// describe(d: Data): string fonksiyonunu sırayla typeof, typeof, instanceof, else ile yaz
// describe("hello"), describe(42), describe({ name: "table" }) sonuçlarını yazdırSample solution
type Data = string | number | { name: string } | Error;
function describe(d: Data): string {
if (typeof d === "string") return `string: ${d}`;
if (typeof d === "number") return `number: ${d}`;
if (d instanceof Error) return `error: ${d.message}`;
return `object: ${d.name}`;
}
console.log(describe("hello"));
console.log(describe(42));
console.log(describe({ name: "table" }));Expected output
string: hello number: 42 object: table
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which of the following narrowing methods is appropriate for class instances?
- typeof
- instanceof Correct answer
- ===
- in
Explanation: To narrow class instances, instanceof is used; it checks the prototype chain and narrows to the correct class. typeof returns only "object" for objects and does not give the class name.
2 The right narrowing tool
type Data = string | { name: string };
function label(d: Data): string {
if (____) {
return d;
}
return d.name;
}type Data = string | { name: string };
function label(d: Data): string {
if (typeof d === "string") {
return d;
}
return d.name;
}Explanation: To narrow a primitive string value, typeof is used; d instanceof string errors because string is a primitive, not a constructor.
3 Type narrowing summary matching
| Term | Meaning |
|---|---|
typeof |
narrows primitive types |
in operatörü |
narrows by object property |
instanceof |
narrows by class |
Daraltma (narrowing) |
reduces union type in a branch |