技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

接口

基础接口

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

let user: User = {
  name: 'John',
  age: 25
};

可选属性

interface User {
  name: string;
  age?: number;  // 可选
  email?: string;
}

let user1: User = { name: 'John' };
let user2: User = { name: 'Jane', age: 25 };

只读属性

interface Point {
  readonly x: number;
  readonly y: number;
}

let point: Point = { x: 10, y: 20 };
// point.x = 5; // 错误

索引签名

// 字符串索引
interface StringMap {
  [key: string]: string;
}

let map: StringMap = {
  name: 'John',
  city: 'Beijing'
};

// 数字索引
interface NumberArray {
  [index: number]: string;
}

let arr: NumberArray = ['a', 'b', 'c'];

// 混合索引
interface Mixed {
  [key: string]: string | number;
  length: number;
}

函数类型

interface SearchFunc {
  (source: string, subString: string): boolean;
}

let search: SearchFunc = function(src, sub) {
  return src.includes(sub);
};

类类型

interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

class Clock implements ClockInterface {
  currentTime: Date = new Date();
  
  setTime(d: Date) {
    this.currentTime = d;
  }
}

继承接口

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square: Square = {
  color: 'blue',
  sideLength: 10
};

// 多继承
interface PenStroke {
  penWidth: number;
}

interface ColoredSquare extends Square, PenStroke {
  opacity: number;
}

混合类型

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

function getCounter(): Counter {
  let counter = function(start: number) {
    return start.toString();
  } as Counter;
  
  counter.interval = 123;
  counter.reset = function() {};
  
  return counter;
}

接口扩展类

class Control {
  private state: any;
}

interface SelectableControl extends Control {
  select(): void;
}

class Button extends Control implements SelectableControl {
  select() {}
}

接口合并

interface User {
  name: string;
}

interface User {
  age: number;
}

// 合并为
// interface User {
//   name: string;
//   age: number;
// }

let user: User = {
  name: 'John',
  age: 25
};
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
函数
Next
类