基础入门
接口基础
理解 interface 定义对象形状、可选属性、只读属性
接口基础
interface 是 TypeScript 的核心概念,用于定义对象的结构。
学完本章你将: 理解 interface、可选属性、只读属性。
定义接口
typescript
// 定义接口
interface User {
name: string;
age: number;
email: string;
}
// 使用接口
const alice: User = {
name: "Alice",
age: 25,
email: "alice@example.com",
};
// 函数参数使用接口
function register(user: User): void {
console.log(`注册:${user.name}`);
}
可选属性与只读属性
typescript
interface Config {
readonly apiKey: string; // 只读
timeout?: number; // 可选
retries?: number; // 可选
}
const config: Config = {
apiKey: "abc123",
timeout: 5000,
};
// config.apiKey = "xyz"; // ❌ 只读属性不可修改
console.log(config.retries); // undefined
接口描述函数
typescript
// 函数接口
interface Comparator {
(a: number, b: number): number;
}
const ascending: Comparator = (a, b) => a - b;
const descending: Comparator = (a, b) => b - a;
console.log(ascending(3, 1)); // 2
console.log(descending(3, 1)); // -2
接口继承
typescript
interface Animal {
name: string;
}
interface Dog extends Animal {
breed: string;
bark(): void;
}
const myDog: Dog = {
name: "旺财",
breed: "金毛",
bark() {
console.log("汪汪!");
},
};
// 多重继承
interface Flyable { fly(): void; }
interface Swimmable { swim(): void; }
interface Duck extends Flyable, Swimmable {
name: string;
}
interface vs type
| 特性 | interface | type |
|---|---|---|
| 可扩展 | extends | & 交叉 |
| 合并声明 | ✅ | ❌ |
| 联合类型 | ❌ | ✅ |
| 元组 | ❌ | ✅ |
typescript
// interface 声明合并
interface Window {
title: string;
}
interface Window {
ts: number;
}
// Window = { title: string; ts: number }
// type 更适合组合
type ID = string | number;
type Point = { x: number; y: number };