代写网站建设合同长沙网站推广公司

1. 扩展方式

Interface

接口支持通过 extends 关键字进行扩展，并且可以继承多个接口。

// 定义基础接口
interface Animal {name: string;
}// 扩展接口并添加更多属性
interface Bear extends Animal {honey: boolean;
}const myBear: Bear = { name: "Yogi", honey: true };
console.log(myBear); // 输出: { name: 'Yogi', honey: true }// 多重继承
interface FlyingAnimal extends Animal {canFly: boolean;
}interface Eagle extends Animal, FlyingAnimal {talons: number;
}const myEagle: Eagle = { name: "Sam", canFly: true, talons: 2 };
console.log(myEagle); // 输出: { name: 'Sam', canFly: true, talons: 2 }// 接口还可以包含方法
interface Bird extends Animal {fly(): void;
}class Sparrow implements Bird {constructor(public name: string) {}fly() {console.log(`${this.name} is flying`);}
}const sparrow = new Sparrow('Chirpy');
sparrow.fly(); // 输出: Chirpy is flying

Type

类型别名使用交叉类型（&）来实现类似的功能。

// 定义基础类型
type Animal = {name: string;
};// 使用 & 来组合类型
type Bear = Animal & {honey: boolean;
};const myBear: Bear = { name: "Yogi", honey: true };
console.log(myBear); // 输出: { name: 'Yogi', honey: true }// 多重组合
type FlyingAnimal = Animal & {canFly: boolean;
};type Eagle = Animal & FlyingAnimal & {talons: number;
};const myEagle: Eagle = { name: "Sam", canFly: true, talons: 2 };
console.log(myEagle); // 输出: { name: 'Sam', canFly: true, talons: 2 }// 类型别名也可以包含函数签名
type Bird = Animal & {fly: () => void;
};const parrot: Bird = {name: "Polly",fly() {console.log(`${this.name} is flying`);}
};parrot.fly(); // 输出: Polly is flying

2. 合并性

Interface

接口支持声明合并，这意味着相同的接口可以在不同的地方定义多次，TypeScript 会自动合并这些定义。

// 第一次定义
interface Box {height: number;
}// 第二次定义，自动合并
interface Box {width: number;
}const box: Box = { height: 10, width: 20 };
console.log(box); // 输出: { height: 10, width: 20 }// 声明合并示例：添加方法
interface Box {getVolume(): number;
}const boxWithMethod: Box = {height: 10,width: 20,getVolume() {return this.height * this.width;}
};
console.log(boxWithMethod.getVolume()); // 输出: 200// 声明合并示例：添加静态成员
interface Box {new (height: number, width: number): Box;
}class BoxClass implements Box {constructor(public height: number, public width: number) {}getVolume() {return this.height * this.width;}
}const boxInstance = new BoxClass(10, 20);
console.log(boxInstance.getVolume()); // 输出: 200

Type

类型别名不支持这种声明合并。

type Box = {height: number;
};// 下面的定义会导致编译错误
// type Box = {
//   width: number;
// };// 类型别名不能合并方法
type BoxWithMethod = {height: number;getVolume(): number;
};const boxWithMethod: BoxWithMethod = {height: 10,getVolume() {return this.height; // 注意这里没有宽度}
};
console.log(boxWithMethod.getVolume()); // 输出: 10

3. 描述非对象类型的能力

Interface

接口主要用于描述对象的形状或结构。

interface Point {x: number;y: number;
}const point: Point = { x: 10, y: 20 };
console.log(point); // 输出: { x: 10, y: 20 }

Type

类型别名可以用来描述几乎所有类型的结构，包括联合类型、元组、基本数据类型等。

// 联合类型
type ID = string | number;// 元组
type Coordinates = [number, number];// 字符串字面量类型
type Direction = 'North' | 'South' | 'East' | 'West';// 函数签名
type GreetFunction = (name: string) => string;// 实例化
let id: ID = 123;
let coords: Coordinates = [10, 20];
let direction: Direction = 'North';
let greet: GreetFunction = (name: string) => `Hello, ${name}`;console.log(id);       // 输出: 123
console.log(coords);   // 输出: [10, 20]
console.log(direction); // 输出: North
console.log(greet('Alice')); // 输出: Hello, Alice// 更复杂的类型操作
type StringOrNumber = string | number;
type ArrayOfStringsOrNumbers = StringOrNumber[];
const mixedArray: ArrayOfStringsOrNumbers = ['hello', 42];
console.log(mixedArray); // 输出: ['hello', 42]// 映射类型
type Keys = 'firstName' | 'lastName';
type PersonPartial<T> = {[P in Keys]?: T;
};const partialPerson: PersonPartial<string> = { firstName: 'John' };
console.log(partialPerson); // 输出: { firstName: 'John' }

4. 实现 

Interface

类可以直接实现接口，这意味着你必须实现接口中定义的所有成员。

interface HasName {name: string;
}class Person implements HasName {constructor(public name: string) {}
}const person = new Person('Alice');
console.log(person.name); // 输出: Alice// 接口还可以包含方法
interface HasGreeting {greet(): string;
}class Greeter implements HasGreeting {constructor(private message: string) {}greet(): string {return this.message;}
}const greeter = new Greeter('Hello, world!');
console.log(greeter.greet()); // 输出: Hello, world!

Type

类型别名不能被类实现或继承。如果尝试这样做，TypeScript 会报错。

type HasName = {name: string;
};// 下面的代码会导致编译错误
// class Person implements HasName {
//   constructor(public name: string) {}
// }// 类型别名可以用于类型注解
const hasName: HasName = { name: 'Alice' };
console.log(hasName.name); // 输出: Alice

5. 泛型

Interface

interface Container<T> {value: T;
}const container: Container<string> = { value: "Hello" };
console.log(container.value); // 输出: Hello// 泛型接口与泛型类结合使用
class GenericContainer<T> implements Container<T> {constructor(public value: T) {}
}const genericContainer = new GenericContainer("World");
console.log(genericContainer.value); // 输出: World

Type

type Container<T> = {value: T;
};const container: Container<string> = { value: "Hello" };
console.log(container.value); // 输出: Hello// 泛型类型别名与泛型类结合使用
class GenericContainer<T> implements Container<T> {constructor(public value: T) {}
}const genericContainer = new GenericContainer("World");
console.log(genericContainer.value); // 输出: World

6. 混合类型

Interface

interface Counter {(start: number): string;interval: number;reset(): void;
}function getCounter(): Counter {const counter = <Counter>function (start: number) {};counter.interval = 123;counter.reset = function () {};return counter;
}const c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

Type

type Counter = {(start: number): string;interval: number;reset(): void;
};function getCounter(): Counter {const counter: Counter = function (start: number) { return ''; } as Counter;counter.interval = 123;counter.reset = function () {};return counter;
}const c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

7. 使用场景偏好

• Interface：

  • 当你需要定义对象的结构时，尤其是当你的代码库中有许多对象需要共享相同结构时，接口是一个很好的选择。
  • 接口还支持声明合并，这对于大型项目中的模块化设计非常有用。
  • 接口更适合用于公开API、组件属性等。

• Type：

  • 当你需要定义复杂的类型关系（如联合类型、交叉类型）或需要描述非对象类型时，类型别名是更好的选择。
  • 类型别名在某些情况下提供了更大的灵活性，例如可以用来定义函数签名、枚举等。
  • 类型别名适合用于类型运算和映射类型。