typescript 接口 interface 的理解

在学习typescript的时候,经常发现别人写了好多接口(interface),那问题来了,我们自己写代码,应该在什么情况下写接口才比较合适呢。于是我就找了找资料,整理一下。

接口运行时的影响为 0。TypeScript 接口中有很多方式来声明变量的结构。

以下两个是等效声明, 第一个使用内联注解,第二个使用接口:

// Sample A
declare const myPoint: { x: number; y: number };

// Sample B
interface Point {
  x: number;
  y: number;
}
declare const myPoint: Point;

示例 B 的好处在于,如果有人创建了一个基于 myPoint 的库来添加新成员, 他们可以轻松将此成员添加到 myPoint 的现有声明中:

// Lib a.d.ts
interface Point {
  x: number,
  y: number
}
declare const myPoint: Point

// Lib b.d.ts
interface Point {
  z: number
}

// Your code
let myPoint.z // Allowed!

因为 TypeScript 接口是开放式的,这是 TypeScript 的一个重要原则,它允许你使用接口模仿 JavaScript 的可扩展性。

通过上面可以明白,接口可以增加扩展性,又不会影响到性能,所以使用接口了。

类可以实现接口

如果你希望在类中使用必须遵循的接口(类)或是别人定义的对象结构,可以使用 implements 关键字来确保兼容性:

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

class MyPoint implements Point {
  x: number;
  y: number; // Same as Point
}

基本上在 implements(实现) 的存在下,该外部 Point 接口的任何更改都将导致代码库中的编译错误,因此可以轻松地使其保持同步:

interface Point {
  x: number;
  y: number;
  z: number; // New member
}

class MyPoint implements Point {
  // ERROR : missing member `z`
  x: number;
  y: number;
}

参考文档地址:https://jkchao.github.io/typescript-book-chinese/typings/interfaces.html

在 React 和 TypeScript 中,`interface` 是用于定义对象的类型结构的工具,可明确指定对象应具备的属性及其类型,增强代码的可读性和可维护性。 ### 作用 - **类型检查**:在编译阶段发现因类型不匹配导致的错误,提高代码的稳定性和可靠性。 - **代码可读性**:明确描述对象的结构,让其他开发者快速理解代码意图。 - **代码复用**:可以被多个组件或函数复用,避免重复定义类型。 ### 使用场景及示例 #### 定义组件的 props 类型 在定义 React 组件时,使用 `interface` 明确指定组件接收的 props 的类型。 ```typescript import React from 'react'; // 定义 props 的类型 interface UserProps { name: string; age: number; } // 使用 props 类型的组件 const User: React.FC<UserProps> = (props) => { return ( <div> <p>Name: {props.name}</p> <p>Age: {props.age}</p> </div> ); }; export default User; ``` #### 定义 state 的类型 在类组件中,使用 `interface` 定义 state 的类型。 ```typescript import React from 'react'; // 定义 state 的类型 interface CounterState { count: number; } // 类组件 class Counter extends React.Component<{}, CounterState> { constructor(props: {}) { super(props); this.state = { count: 0, }; } increment = () => { this.setState((prevState) => ({ count: prevState.count + 1, })); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>Increment</button> </div> ); } } export default Counter; ``` #### 接口拓展 `interface` 可以通过 `extends` 关键字拓展其他接口,实现类型的复用和扩展。 ```typescript interface Animal { name: string; } interface Dog extends Animal { breed: string; } const myDog: Dog = { name: 'Buddy', breed: 'Golden Retriever', }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值