Objects
An object keeps related values together under names. { name: "Ana", age: 30 } is one object with two properties: name holds the text "Ana" and age holds the number 30. const ana gives it a name.
Shapes
An interface is a named description of an object's shape. interface User lists the properties a User must have and the type of each: name is a string, age is a number. It holds no values itself.
The check
Writing ana: User asks tsc, the TypeScript compiler, to check the object against User before anything runs. Each property must fill its slot: "Ana" is a string and 30 is a number. Both fit, so no errors.
Leave out age and tsc stops you on line 6: Property 'age' is missing in type '{ name: string; }' but required in type 'User'. A User must have every property that is not marked optional.
Write age: "30" in quotes and the value is a string, not a number. tsc reports: Type 'string' is not assignable to type 'number'. The property is there, but its value is the wrong kind.
The ? in email?: string makes email optional. ana has no email, and that is fine: an optional property may be left out. If an object does have one, it must still be a string.
Type ana.agee by mistake and tsc reports: Property 'agee' does not exist on type 'User'. Did you mean 'age'? Because ana is a User, tsc knows exactly which property names exist.
Running it
With the typo fixed, line 7 reads ana.age = 31. age is a number and 31 is a number, so tsc allows it. When the program runs, the value in ana's age box changes from 30 to 31.
tsc writes user.js with the whole interface removed: interfaces exist only for the check. Node.js runs the plain object, and line 8, console.log(ana.name, ana.age), prints Ana 31.
What happens
;; step 1/9 · object
line 6 of user.ts
const ana: User = { name: "Ana", age: 30 };
one object, two properties:
name → "Ana" a string (text)
age → 30 a number
read one with a dot: ana.name is "Ana"
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. 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.