Objects and interfaces
An object groups values under names, and an interface describes the shape an object must have: which properties, and the type of each. Watch tsc check one object, ana, against interface User slot by slot, catch a missing property, a value of the wrong type and a misspelt name before anything runs, then see the interface vanish at run time while the program prints Ana 31.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What does interface User { name: string; age: number; } describe?
An interface names an object's shape. It lists the properties and the type of each, and holds no values itself.
02What happens with const ana: User = { name: "Ana" }; ?
age has no ?, so it is required. tsc reports error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.
03Why is age: "30" an error when User says age: number?
Quotes make text. tsc reports: Type 'string' is not assignable to type 'number'.
04What does the ? in email?: string mean?
? marks an optional property. An object may leave it out; if it has one, it must still match the type.
05What is left of interface User in user.js, the JavaScript tsc writes?
Interfaces only exist for the check. tsc removes them, so the running program has just the plain object.
Glossary
- Object
- A value that groups other values under names, written with braces: { name: "Ana", age: 30 }.
- Property
- One named value inside an object, such as age: 30. Read it with a dot: ana.age.
- Interface
- A named description of an object's shape: which properties it has and the type of each.
- Optional property
- A property marked with ? (email?: string) that an object may leave out.
- Type annotation
- A type written after a name, like : User in const ana: User.
- tsc
- The TypeScript compiler. It checks the types before the program runs and writes plain JavaScript.
- Structural typing
- TypeScript's rule that only the shape matters: any object with the right properties fits the interface.
Notes and sources
- The user.js shown is exactly what tsc 5.9 writes with no settings. Its default target is ES5, an older JavaScript, so const is written as var; set target to ES2015 or later to keep const.
- By default tsc still writes the .js file even when it finds type errors (turn on noEmitOnError to stop that). Either way, you see the error first.
- TypeScript compares shapes, not names: any object with a string name and a number age fits User, even if it was never called a User. This is called structural typing.
- One more check exists: an object literal written straight into a User may not have properties User does not list. That is called excess property checking.
- Every version of the file is real: the four errors were produced by tsc 5.9.3, and the fixed program prints Ana 31.
- TypeScript Handbook: Everyday Types (Object Types, Optional Properties, Interfaces)
- TypeScript Handbook: Object Types
- TypeScript Handbook: The Basics (static checking, erased types)
- TypeScript for JavaScript Programmers (structural type system)
- TSConfig Reference: target
- TSConfig Reference: noEmitOnError
- MDN: Working with objects
- MDN: console.log()
Quiz Unlocks after the last step.