Interface declaration syntax in Typescript - Step-by-Step Execution

Concept Flow - Interface declaration syntax

Start Interface Declaration

↓

Write 'interface' keyword

↓

Name the Interface

↓

Open Curly Brace '{'

↓

Declare Properties and Methods

↓

Close Curly Brace '}'

↓

Interface Ready

This flow shows the steps to declare an interface: start with the keyword, name it, add properties/methods inside braces, then finish.

Execution Sample

Typescript

interface Person {
  name: string;
  age: number;
  greet(): void;
}

Declares an interface named Person with two properties and one method signature.

Execution Table

Step	Action	Code Part	Result
1	Start interface declaration	interface	Begin interface block
2	Name the interface	Person	Interface named Person created
3	Open interface body	{	Start listing members
4	Declare property	name: string;	Property 'name' of type string added
5	Declare property	age: number;	Property 'age' of type number added
6	Declare method signature	greet(): void;	Method 'greet' with no return added
7	Close interface body	}	Interface declaration complete

💡 Interface declaration ends after closing brace '}'

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6	Final
Interface Name	None	Person	Person	Person	Person
Properties	None	name: string	name: string, age: number	name: string, age: number	name: string, age: number
Methods	None	None	None	greet(): void	greet(): void

Key Moments - 3 Insights

Why do we use a semicolon after each property or method in the interface?

Each property or method declaration ends with a semicolon to separate it from the next one, as shown in steps 4, 5, and 6 in the execution_table.

Does the interface contain actual code for methods?

No, interfaces only declare method signatures without implementation, as seen in step 6 where 'greet(): void;' is declared without a body.

Can we declare variables inside an interface?

No, interfaces declare the shape of objects with properties and method signatures, not variables or executable code.

Visual Quiz - 3 Questions

Look at the execution_table, what is the interface name after step 2?

A greet

B interface

C Person

D None

💡 Hint

Check the 'Code Part' and 'Result' columns at step 2 in the execution_table.

At which step does the interface declaration complete?

A Step 7

B Step 5

C Step 6

D Step 4

💡 Hint

Look for the step where the closing brace '}' is processed in the execution_table.

If we remove the semicolon after 'age: number', what would happen?

A Method 'greet' becomes a property

B No effect, code runs fine

C Syntax error, interface won't compile

D Interface name changes

💡 Hint

Semicolons are optional in TypeScript interfaces due to automatic semicolon insertion on newlines; the code compiles fine.

Concept Snapshot

interface InterfaceName {
  propertyName: type;
  methodName(): returnType;
}
- Use 'interface' keyword
- Declare properties with types
- Declare method signatures only
- End each declaration with semicolon
- No method bodies inside interface

Full Transcript

This visual execution traces how to declare an interface in TypeScript. First, the keyword 'interface' starts the declaration. Then you name the interface, for example, 'Person'. Next, open curly braces '{' to begin listing properties and methods. Each property like 'name: string;' and 'age: number;' is declared with a type and ends with a semicolon. Methods like 'greet(): void;' declare the signature without code. Finally, close the interface with '}'. The interface describes the shape of an object but does not contain executable code. Semicolons separate each declaration. This step-by-step helps beginners see how interfaces are built and why syntax matters.