Object type annotation inline in Typescript - Step-by-Step Execution

Concept Flow - Object type annotation inline

Start

↓

Declare variable with inline object type

↓

Assign object matching type

↓

Use variable

↓

End

This flow shows how to declare a variable with an inline object type, assign a matching object, and then use it.

Execution Sample

Typescript

const person: { name: string; age: number } = { name: "Alice", age: 30 };
console.log(person.name);
console.log(person.age);

Declares a variable 'person' with an inline object type and prints its properties.

Execution Table

Step	Action	Evaluation	Result
1	Declare 'person' with inline type {name: string; age: number}	TypeScript checks type	Variable 'person' ready to hold matching object
2	Assign {name: "Alice", age: 30} to 'person'	Check object matches type	Assignment successful
3	Access 'person.name'	Retrieve value	"Alice"
4	Access 'person.age'	Retrieve value	30
5	End of code	No more actions	Program ends

💡 All steps completed, program ends normally

Variable Tracker

Variable	Start	After Assignment	Final
person	undefined	{name: "Alice", age: 30}	{name: "Alice", age: 30}

Key Moments - 3 Insights

Why do we write the object type inline instead of using an interface?

Inline object types let you quickly specify the shape of an object right where you declare it, as shown in step 1 of the execution_table, without needing a separate interface.

What happens if the assigned object does not match the inline type?

TypeScript will show an error during the assignment step (step 2 in execution_table) because the object does not fit the declared inline type.

Can we access properties not declared in the inline type?

No, TypeScript will prevent accessing properties not declared in the inline type, ensuring safety as seen in steps 3 and 4 where only 'name' and 'age' are accessed.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'person.name' at step 3?

A undefined

B "Bob"

C "Alice"

D 30

💡 Hint

Check the 'Result' column at step 3 in the execution_table

At which step does TypeScript check if the assigned object matches the inline type?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'Evaluation' columns in the execution_table for the assignment step

If we add a property 'height: number' to the object but not in the inline type, what happens?

A No error, property is accepted

B TypeScript error at assignment

C Property is ignored silently

D Error when accessing 'height'

💡 Hint

Refer to key_moments about type mismatch during assignment (step 2 in execution_table)

Concept Snapshot

Inline object type annotation syntax:
const varName: { prop1: type1; prop2: type2 } = { prop1: value1, prop2: value2 };
- Defines object shape directly where variable is declared
- TypeScript checks assigned object matches this shape
- Access properties safely with autocomplete and type checks

Full Transcript

This example shows how to declare a variable with an inline object type in TypeScript. First, the variable 'person' is declared with a type specifying it must have a 'name' string and an 'age' number. Then, an object matching this shape is assigned. Accessing 'person.name' and 'person.age' retrieves the values safely. TypeScript checks the object matches the inline type during assignment, preventing errors. Inline object types are useful for quick, local type definitions without creating separate interfaces.