Z
ZHANK
基础入门

接口基础

理解 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

特性interfacetype
可扩展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 };