TS中class类的基本使用

本文介绍了如何在JavaScript中使用class关键字定义类,包括实例属性、静态属性、只读属性的设定,以及实例方法和静态方法的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

想要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建所指定类型的对象。

一、使用class关键字定义类

class 类名 {  }

// 使用class关键字来定义一个类
class Person{

}

// 使用new关键字创建一个对象
const per = new Person();
console.log(per);

二、定义属性

(一)定义实例属性

直接定义的属性是实例属性,需要通过对象的实例去访问

属性名 : 数据类型 = 属性值;     // 数据类型可以省略

class Person{
    // 直接定义的属性是实例属性,需要通过对象的实例去访问
    name: string = "寻霖";
}

const per = new Person();
console.log(per.name);  // 寻霖

(二)定义静态属性

    使用static关键字开头的属性是静态属性
    静态属性可以直接通过类去访问,不可以通过实例对象去访问

static 属性名 : 数据类型 = 属性值;    // 数据类型可以省略

class Person{
    // 使用static关键字开头的属性是静态属性
    // 可以直接通过类去访问,不可以通过实例对象去访问
    static age: number = 18;
}

console.log(Person.age);  // 18
const per = new Person();
console.log(per.age);  // 报错:属性“age”在类型“Person”上不存在

(三)设置属性只读

在属性名前加一个readonly关键字表示一个只读的属性不可修改

readonly 属性名 : 数据类型 = 属性值;

static readonly 属性名 : 数据类型 = 属性值;

在不设置readonly的情况下我们可以修改实例对象中的属性值

class Person{
    name: string = "寻霖";
}

const per = new Person();
console.log(per.name);  // 寻霖
per.name = "XunLin";
console.log(per.name);  // XunLin

 设置了过后就不能够修改属性值,不论是实例属性还是静态属性

三、定义方法

(一)定义实例方法

直接定义的方法是实例方法,需要通过对象的实例去访问

方法名 () {  //方法体...  }

class Person{
    // 直接定义的方法是实例方法,需要通过对象的实例去访问
    sayHello() {
        console.log("hello");
    }
}

const per = new Person();
per.sayHello();  // hello

(二)定义静态方法

    使用static关键字开头的方法是静态方法
    静态方法可以直接通过类去访问,不可以通过实例对象去访问

static 方法名 () {  //方法体...  }

class Person{
    // 使用static关键字开头的方法是静态方法
    // 静态方法可以直接通过类去访问,不可以通过实例对象去访问
    static sayHello() {
        console.log("hello");
    }
}

Person.sayHello();  // hello
const per = new Person();
per.sayHello();  // 报错:属性“sayHello”在类型“Person”上不存在。
<think>嗯,用户问的是在React和TypeScript使用State,也就是状态管理。首先,我需要回顾一下React中的State基本概念,尤其是结合TypeScript的情况。React中的State用于组件内部的数据管理,当状态变化时,组件会重新渲染。TypeScript为React提供了型检查,能增强代码的可靠性和可维护性。 首先,用户可能想知道如何在函数组件中使用State,因为现在函数组件和Hooks是主流。应该从useState这个Hook讲起,说明如何用泛型来定义状态的型。例如,useState<string>('')这样来明确型。需要举几个例子,比如基本型、对象、数组等,展示型标注的方法。 然后,可能要考虑组件中的State,虽然现在用得少了,但仍有项目在使用组件中的State需要定义接口或型,并在中声明state属性。比如interface State { count: number },然后class组件里state = { count: 0 }。这部分也要简单提一下,但重点放在函数组件上。 接下来,用户可能遇到复杂的状态结构,比如对象或数组。这时候需要说明如何正确标注型,避免型错误。例如,处理表单时,状态可能是一个对象,每个字段都有特定的型。这时候使用interface或type来定义状态结构,确保型安全。 还有,可能涉及状态更新的注意事项,特别是当新状态依赖于旧状态时,应该使用函数式更新,比如setCount(prev => prev + 1),这样可以避免闭包带来的问题。同时,TypeScript在这种情况下也能正确推断型,不需要额外标注。 另外,可能需要提到自定义Hook中的状态管理,如何在自定义Hook中使用useState并暴露型化的状态和更新函数,增强复用性。例如,一个useCounter的Hook,返回count和increment方法,并且有明确的型定义。 用户可能的误区是忘记给初始值或错误地推断型,导致运行时错误。比如,如果初始值是null,但没有联合型,后续使用可能会出问题。需要强调正确使用泛型或显式型声明的重要性。 最后,总结一下最佳实践,比如尽量使用函数组件和Hooks,合理划分状态结构,使用TypeScript型和接口来保证状态的安全,以及如何处理异步操作中的状态更新。可能还需要提醒一些常见的错误和解决方法,比如状态突变、依赖项数组的问题等。 需要确保回答结构清晰,分点说明,每个部分有示例代码,并且符合用户要求的LaTeX格式。不过用户的问题中没有数学公式,所以可能不需要数学表达式,但需要遵循系统级指令中的格式要求,比如行内代码用反引号,独立代码块用三个反引号,并且正确使用TypeScript语法高亮。</think>在 React + TypeScript使用 State 的状态管理,需要注意以下几个核心要点: --- ### 一、基础使用 #### 1. 函数组件中的 `useState` 使用 `useState` Hook 时需通过泛型定义型: ```typescript const [count, setCount] = useState<number>(0); // 明确型为 number const [text, setText] = useState<string | null>(null); // 联合型 ``` #### 2. 对象型状态 ```typescript interface User { id: number; name: string; } const [user, setUser] = useState<User>({ id: 1, name: 'Alice' }); ``` --- ### 二、复杂型处理 #### 1. 数组型 ```typescript const [todos, setTodos] = useState<Array<{ id: string; text: string }>>([]); ``` #### 2. 可选属性 ```typescript type FormState = { username?: string; age?: number; }; const [form, setForm] = useState<FormState>({}); ``` --- ### 三、型推导优化 #### 1. 自动型推断 当初始值足够明确时,TypeScript 可自动推断型: ```typescript const [isActive, setIsActive] = useState(false); // 自动推断为 boolean ``` #### 2. 强制型断言 初始值为空时需显式声明型: ```typescript const [data, setData] = useState<ApiResponse>({} as ApiResponse); // 避免 null 错误 ``` --- ### 四、状态更新模式 #### 1. 函数式更新 ```typescript setCount(prev => prev + 1); // 依赖旧状态时推荐此写法 ``` #### 2. 合并对象状态 ```typescript setUser(prev => ({ ...prev, name: 'Bob' })); // 保持不可变性 ``` --- ### 五、最佳实践 1. **型抽离**:将复杂型定义在 `types.ts` 文件中 2. **合理划分状态**:避免单个状态对象过于臃肿 3. **使用只读型**:防止意外修改 ```typescript interface ReadonlyState { readonly list: readonly string[]; } ``` --- ### 六、常见问题 #### 1. 型不匹配错误 ```typescript // 错误:型 string 无法赋值给 number const [count, setCount] = useState<number>('0'); // 正确 const [count, setCount] = useState<number>(0); ``` #### 2. 异步更新问题 ```typescript // 错误:直接依赖旧状态 const handleClick = () => setCount(count + 1); // 正确:使用函数式更新 const handleClick = () => setCount(prev => prev + 1); ``` --- ### 七、扩展方案 对于复杂应用,可结合状态管理库: - **Redux Toolkit**:提供型安全的 `createSlice` - **Recoil**:原生支持 TypeScript - **Zustand**:简洁的型友好方案 --- 通过 TypeScript型系统 + React 的状态管理机制,可以显著提升代码健壮性和开发体验。建议始终明确定义状态型,并利用 IDE 的型提示功能提高开发效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值