05-interfaces.ts
Typescript/src/01-beginner/05-interfaces.ts
// ============================================
// 05. Interfaces
// ============================================
console.log("=== INTERFACES IN TYPESCRIPT ===\n");
// Basic Interface
interface User { // User definition data type
name: string;
age: number;
email: string;
}
const alice: User = {
name: "Alice",
age: 25,
email: "alice@example.com"
};
interface User { // User2 definition data type
phone: string;
address: string;
}
console.log("=== BASIC INTERFACE ===\n");
console.log("Interface defines the shape of an object:");
console.log(` User: { name: string; age: number; email: string }`);
console.log(` user object:`, alice);
// Optional Properties
console.log("\n=== OPTIONAL PROPERTIES ===\n");
interface UserOptional {
name: string;
age: number;
email?: string; // Optional
}
const user1: UserOptional = {
name: "Alice",
age: 25
// email is optional, so we can omit it
};
const user2: UserOptional = {
name: "Bob",
age: 30,
email: "bob@example.com"
};
console.log("Optional properties use '?' - they can be omitted:");
console.log(` user1 (no email):`, user1);
console.log(` user2 (with email):`, user2);
// Readonly Properties
console.log("\n=== READONLY PROPERTIES ===\n");
interface Point {
readonly x: number;
readonly y: number;
}
const point: Point = { x: 10, y: 20 };
// point.x = 30; // Error: Cannot assign to 'x' because it is a read-only property
console.log("Readonly properties cannot be reassigned after initialization:");
console.log(` point:`, point);
console.log(" Note: point.x and point.y cannot be changed after creation");
// Function Types in Interfaces
console.log("\n=== FUNCTION TYPES IN INTERFACES ===\n");
interface Calculator {
add(a: number, b: number): number;
subtract(a: number, b: number): number;
}
const calc: Calculator = {
add(a, b) {
return a + b;
},
subtract(a, b) {
return a - b;
}
};
console.log("Interfaces can define function signatures:");
console.log(` calc.add(5, 3) = ${calc.add(5, 3)}`);
console.log(` calc.subtract(10, 4) = ${calc.subtract(10, 4)}`);
// Index Signatures
console.log("\n=== INDEX SIGNATURES ===\n");
interface Dictionary {
[key: string]: string;
}
interface Dictionary2 {
[key: number]: string;
}
const dict: Dictionary = {
hello: "world",
foo: "bar",
// Can add any string key-value pairs
};
const dict2: Dictionary2 = {
0: "world",
1: "bar",
// Can add any number key-value pairs
};
console.log("Index signatures allow dynamic properties:");
console.log(` dict:`, dict);
console.log(` dict.hello = "${dict.hello}"`);
console.log(` dict.foo = "${dict.foo}"`);
console.log(" Can add any string key-value pairs");
console.log(` dict2:`, dict2);
console.log(` dict2[0] = "${dict2[0]}"`);
console.log(` dict2[1] = "${dict2[1]}"`);
console.log(" Can add any number key-value pairs");
// Extending Interfaces
console.log("\n=== EXTENDING INTERFACES ===\n");
interface Animal {
name: string;
age: number;
}
interface Dog extends Animal {
breed: string;
bark(): void;
}
const myDog: Dog = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
bark() {
console.log("Woof!");
}
};
console.log("Interfaces can extend other interfaces:");
console.log(` Animal: { name: string; age: number }`);
console.log(` Dog extends Animal: { name, age, breed: string, bark(): void }`);
console.log(` myDog:`, { name: myDog.name, age: myDog.age, breed: myDog.breed });
console.log(" Calling myDog.bark():");
myDog.bark();
// Multiple Inheritance
console.log("\n=== MULTIPLE INHERITANCE ===\n");
interface Flyable {
fly(): void;
}
interface Swimmable {
swim(): void;
}
interface Duck extends Flyable, Swimmable {
quack(): void;
}
const duck: Duck = {
fly() {
console.log("Flying...");
},
swim() {
console.log("Swimming...");
},
quack() {
console.log("Quack!");
}
};
console.log("Interfaces can extend multiple interfaces:");
console.log(` Flyable: { fly(): void }`);
console.log(` Swimmable: { swim(): void }`);
console.log(` Duck extends Flyable, Swimmable: { fly(), swim(), quack() }`);
console.log("\n Demonstrating duck's abilities:");
duck.fly();
duck.swim();
duck.quack();
console.log("\n=== DEMO COMPLETE ===");
export { user, point, calc, myDog, duck };
Articles liés
01-introduction.ts
01-introduction.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/01-introduction.ts).
Lire l'article →02-basic-types.ts
02-basic-types.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/02-basic-types.ts).
Lire l'article →03-variables.ts
03-variables.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/03-variables.ts).
Lire l'article →04-functions.ts
04-functions.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/04-functions.ts).
Lire l'article →06-classes.ts
06-classes.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/06-classes.ts).
Lire l'article →07-arrays-tuples.ts
07-arrays-tuples.ts — typescript source code from the Typescript learning materials (Typescript/src/01-beginner/07-arrays-tuples.ts).
Lire l'article →