ts---学习类型--- interface篇

interface篇
定义:interface:接口,感觉像是自定义类型,因为ts中,会进行类型的强校验,但是除了基本数据类型,引用类型,还可以具体定义某一个对象的属性

使用:比如:

interface Person{
	name:string;
	age?:string;
}
这是接口类型,要求此类型必须有name属性,?表示可以有age属性,可以没有age属性。

同自定义类型的type的区别
如下,type类型可以直接代替某基础类型,但是interface接口不可以,接口一般都代表具体对象类型。

type Person1 ={
  name:string,
}
type Person2 = string;

ps:


const getPersonName = (person:Person):void=>{
  console.log(person.name)
}
const person = {
  name:'lee',
  sex:0,
}
// 此时直接调用getPersonName(person)和调用
getPersonName(
 {
  name:'lee',
  sex:0,
}
)
//不一样,后者会报错,因为如果不传变量,ts将会对传入的obj做强类型检测,这时,检测到interface接口中没有sex的变量,就会报错。但是传入person变量这种就没有问题

常用方式:接口和type都是ts用来帮助我们做类型校验的,在编译成js之后,根本没有这些东西

// 接口 
// 1.可以提供灵活的propName,来兼容之后的属性
interface Person {
// readonly name:string; // 只能读的属性
  name:string;
  age?:number; // ?代表可以有可以没有
  [propName:string]:any; // 属性是string类型,值是any类型
}
//2.可以有方法
interface Person {
  name:string;
  age?:number; // ?代表可以有可以没有
  [propName:string]:any;
  say():string;   // 返回值为string
}
// 3. class 类实现接口
class user implements Person{
  name='dell';
  say(){
    return 'hello';
  }
}
//4.接口继承接口
interface teacher extends Person{
  teach():string;
}
// 此时如果某个类是teacher类型,必须要有teach方法,否则就会报错
//5.接口定义方法
interface SayHi{
  (word:string):string
}
const sy:SayHi=(word:string)=>{return word}
### 如何使用 TypeScript 编写 React 类组件 当涉及到使用 TypeScript 来增强 React 应用的安全性和可维护性时,类组件同样可以从静态类型检查中获益。下面是一个详细的指南来帮助理解如何利用 TypeScript 创建和管理 React 的类组件。 #### 定义属性接口 为了给类组件提供强类型的 props,在创建组件之前先定义一个描述预期 prop 形状的接口是非常重要的。这不仅有助于开发者更清晰地了解哪些数据应该传递给组件,而且编译器也能基于这些信息进行错误检测[^1]。 ```typescript interface AppProps { message: string; } ``` #### 扩展 `React.Component` 并设置泛型参数 接着通过继承自 `React.Component<P, S>` 来声明一个新的类组件,其中 P 表示 Props 而 S 表示 State。这里传入前面定义好的 `AppProps` 接口作为第一个泛型参数,并且如果组件有状态的话,则还需要为第二个泛型参数指定相应的 state 类型;如果没有特别的状态需求则可以用 `{}` 或者省略它[^4]。 ```typescript class App extends React.Component<AppProps> { render() { return ( <h1>Hello from {this.props.message}</h1> ); } } ``` #### 初始化状态与生命周期方法 对于拥有内部状态或者需要处理复杂逻辑(比如异步操作)的情况来说,可以在构造函数里初始化 this.state 和绑定事件处理器到实例上。另外也可以重载一些特定阶段的方法如 componentDidMount(), componentDidUpdate() 等来进行副作用的操作[^2]。 ```typescript interface AppState { count: number; } class Counter extends React.Component<{}, AppState> { constructor(props: {}) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick(): void { this.setState((prevState) => ({ count: prevState.count + 1 })); } render() { return ( <> <p>{this.state.count}</p> <button onClick={this.handleClick}>Increment</button> </> ); } } ``` #### 使用装饰器语法糖简化代码结构 虽然不是强制性的特性之一,但是采用实验性质的装饰器可以让某些场景下的编码变得更加直观简洁——特别是当你想要实现高阶组件模式或是混入功能的时候[^3]。 ```typescript @observer class ObservableComponent extends React.Component<{ observableData: any }> {} ``` 以上就是有关于怎样运用 TypeScript 构建安全可靠的 React 类组件的一些基本指导原则。希望这份资料能够满足学习的需求并促进更好的实践应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值