Type aliases vs interfaces
TypeScript has two ways to name a type: type, which makes a type alias, and interface. Watch tsc read both in one file: an alias naming the union number | string, an interface Pet declared twice and merged, and Dog built with extends. tsc uses the shape it builds to catch a Dog with no age, then erases every type and the program prints Rex 3.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01Which of these can only be written with a type alias?
An alias can name any type, including a union. An interface only describes object shapes: interface ID = number | string is a syntax error (TS1005: '{' expected).
02dog.ts declares interface Pet { name: string } and then interface Pet { age: number }. What does Pet need?
Interfaces with the same name merge their members. This is called declaration merging.
03What happens if you write type Pet = { name: string }; and then type Pet = { age: number };?
A type alias cannot be reopened. tsc reports Duplicate identifier 'Pet' on both lines.
04Which line builds Dog from Pet using a type alias instead of interface ... extends?
& makes an intersection: a value must have everything in Pet and everything in { id: ID }. | would make a union, meaning one or the other.
05What is left of lines 1 to 4 in the dog.js that tsc writes?
Type aliases and interfaces exist only for the type check. dog.js holds just the two lines that make and print d, and prints Rex 3.
Glossary
- Type alias
- A name for a type, written with type, as in type ID = number | string. It can name any type.
- Interface
- A named object shape, written with interface, as in interface Pet { name: string }.
- Union type
- A type that allows one of several types, written with |. number | string means a number or a string.
- Declaration merging
- When an interface is declared more than once, tsc joins the declarations into one shape.
- extends
- Builds an interface on top of another: interface Dog extends Pet { id: ID } has all of Pet's properties plus id.
- Intersection type
- A type written with & that needs everything from both sides, as in Pet & { id: ID }.
- Shape
- The properties an object must have and their types. TypeScript compares shapes, not names.
- Type erasure
- Removing all types, aliases and interfaces when tsc writes JavaScript.
Notes and sources
- The TypeScript Handbook suggests using interface until you need something only an alias can do, such as naming a union. Either works for plain object shapes.
- The dog.js shown is what tsc 5.9 writes with --target es2022. With no settings tsc 5.9 targets old JavaScript (ES5) and writes var instead of const; the types are removed either way.
- Neither name creates a new kind of value: TypeScript compares shapes, not names. Any object with name, age and id fits Dog, whether Dog is an alias or an interface.
- With the alias form of Dog (Pet & { id: ID }) tsc reports the same problem in two lines: error TS2322, then Property 'age' is missing ... required in type 'Pet'.
- TypeScript Handbook: Everyday Types, Type Aliases
- TypeScript Handbook: Differences Between Type Aliases and Interfaces
- TypeScript Handbook: Union Types
- TypeScript Handbook: Object Types, Extending Types
- TypeScript Handbook: Object Types, Intersection Types
- TypeScript Handbook: Declaration Merging
- TypeScript Handbook: The Basics, Erased Types
- TSConfig Reference: target
- MDN: undefined
Quiz Unlocks after the last step.