in operator
- TypeScript course
- Advanced
- Lesson 26/57
- 4 min
Learn narrowing by property with the in operator.
in operator
The in operator checks whether a property exists on an object. A check like "swim" in animal lets TypeScript narrow a union type; if the property exists only on one member, the object is narrowed to that member's type inside the block.
interface Fish { swim(): void }
interface Bird { fly(): void }
function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim(); // Fish
} else {
animal.fly(); // Bird
}
}Distinguishing object shapes
The in operator is ideal for distinguishing objects that have different fields rather than a common one. If each member has a unique property, checking it with in narrows the type. Discriminated unions use a common kind field, but in is more flexible.
interface Square { size: number }
interface Circle { radius: number }
function area(shape: Square | Circle): number {
if ("radius" in shape) {
return Math.PI * shape.radius ** 2; // Circle
}
return shape.size ** 2; // Square
}Practice Separate shapes with in
Define Square (size: number) and Circle (radius: number) interfaces. Write an area(shape: Square | Circle): number function. If "radius" in shape, return Math.PI * shape.radius ** 2; otherwise return shape.size ** 2. Print results via console.log(area({ size: 5 })) and console.log(area({ radius: 2 })).
Starter code
// Square (size: number) interface tanımla
// Circle (radius: number) interface tanımla
// area(shape: Square | Circle) fonksiyonunu in ile yaz
// area({ size: 5 }) ve area({ radius: 2 }) sonuçlarını yazdırSample solution
interface Square { size: number; }
interface Circle { radius: number; }
function area(shape: Square | Circle): number {
if ("radius" in shape) {
return Math.PI * shape.radius ** 2;
}
return shape.size ** 2;
}
console.log(area({ size: 5 }));
console.log(area({ radius: 2 }));Expected output
25 12.566370614359172
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the in operator check?
- The type of a value
- The superclass of a class
- Whether a property exists on an object Correct answer
- Whether two objects have the same shape
Explanation: The in operator returns whether the property on the left exists on the object on the right; this is used to distinguish members of a union that have different shapes.
2 Property check with in
interface Fish { swim(): void }
interface Bird { fly(): void }
function move(a: Fish | Bird) {
if (____) {
a.swim();
} else {
a.fly();
}
}
interface Fish { swim(): void }
interface Bird { fly(): void }
function move(a: Fish | Bird) {
if ("swim" in a) {
a.swim();
} else {
a.fly();
}
}
Explanation: The in operator checks whether the "swim" property exists on the object; since the property is only on Fish, a is narrowed to Fish inside the condition.
3 in operator parts
| Term | Meaning |
|---|---|
in operatörü |
property exists on object |
"swim" in animal |
narrows to Fish member |
interface |
defines object shape |
Discriminated union |
distinguish via common kind field |