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.

Practice

1. What is the purpose of an interface in TypeScript?

easy

A. To import external modules

B. To execute code conditionally

C. To define the shape of an object with properties and methods

D. To create a new variable

Solution

1. Step 1: Understand the role of interfaces

   Interfaces describe how an object should look by specifying its properties and methods.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated concepts like control flow, variables, and modules.

3. Final Answer:

   To define the shape of an object with properties and methods -> Option C

4. Quick Check:

   Interface = Object shape definition [OK]

Hint: Interfaces define object structure, not code execution [OK]

Common Mistakes:

• Confusing interfaces with classes
• Thinking interfaces run code
• Mixing interfaces with variables

2. Which of the following is the correct syntax to declare an interface named Person with a string property name?

easy

A. interface Person { name = string; }

B. interface Person = { name: string; }

C. interface Person (name: string);

D. interface Person { name: string; }

Solution

1. Step 1: Recall interface declaration syntax

   Interfaces use the keyword interface, followed by the name and curly braces with property declarations using colon syntax.

2. Step 2: Check each option

   interface Person { name: string; } uses correct syntax: interface Person { name: string; }. Options B, C, and D have syntax errors like using equals, parentheses, or assignment instead of colon.

3. Final Answer:

   interface Person { name: string; } -> Option D

4. Quick Check:

   Interface syntax uses colon for properties [OK]

Hint: Use colon, not equals, to declare properties in interfaces [OK]

Common Mistakes:

• Using '=' instead of ':' for properties
• Using parentheses instead of braces
• Assigning values inside interface

3. What will be the output of the following TypeScript code?

interface Car {
  brand: string;
  year: number;
}

const myCar: Car = { brand: "Toyota", year: 2020 };
console.log(myCar.brand + " " + myCar.year);

medium

A. Toyota 2020

B. undefined 2020

C. Error: Property 'brand' missing

D. Toyota undefined

Solution

1. Step 1: Understand the interface and object assignment

   The interface Car requires brand (string) and year (number). The object myCar correctly provides both.

2. Step 2: Analyze the console.log output

   Concatenating myCar.brand and myCar.year with a space results in Toyota 2020.

3. Final Answer:

   Toyota 2020 -> Option A

4. Quick Check:

   Correct object matches interface = "Toyota 2020" [OK]

Hint: Check if object matches interface properties exactly [OK]

Common Mistakes:

• Missing required properties in object
• Confusing property names
• Expecting runtime errors for correct code

4. Identify the error in this interface declaration and object assignment:

interface User {
  id: number;
  name: string;
}

const user: User = { id: 1 };

medium

A. Interface name should be lowercase

B. Missing property 'name' in object assigned to User

C. Property 'id' should be a string, not number

D. Object should use parentheses instead of braces

Solution

1. Step 1: Check interface properties

   The interface User requires both id (number) and name (string).

2. Step 2: Check object assignment

   The object assigned to user only has id, missing the required name property, causing a TypeScript error.

3. Final Answer:

   Missing property 'name' in object assigned to User -> Option B

4. Quick Check:

   All interface properties must be present in object [OK]

Hint: All interface properties must appear in assigned objects [OK]

Common Mistakes:

• Ignoring missing required properties
• Thinking interface names must be lowercase
• Confusing property types

5. Given the interface declaration below, which object correctly implements Product with an optional description property?

interface Product {
  id: number;
  name: string;
  description?: string;
}

hard

A. { id: 101, name: "Book" }

B. { id: 101, description: "A book" }

C. { name: "Book", description: "A book" }

D. { id: "101", name: "Book" }

Solution

1. Step 1: Understand optional properties in interfaces

   The description property is optional (marked with ?), so it can be omitted.

2. Step 2: Check each object against the interface

   { id: 101, name: "Book" } has required id (number) and name (string), no description, which is valid.
   { id: 101, description: "A book" } misses required name.
   { name: "Book", description: "A book" } misses required id.
   { id: "101", name: "Book" } has id as string instead of number.

3. Final Answer:

   { id: 101, name: "Book" } -> Option A

4. Quick Check:

   Optional properties can be omitted safely [OK]

Hint: Optional properties can be left out without error [OK]

Common Mistakes:

• Omitting required properties
• Using wrong types for properties
• Confusing optional with required