我个人觉得学习 TypeScript 非常重要。一旦你编写了足够的 JavaScript 代码，或者参与了许多 React 项目，特别是全栈项目，在这些项目中，你需要发送复杂的结构化数据，你就会理解 JavaScript 的问题所在。因此，对于 React 开发者来说，学习 TypeScript 非常必要。
在这篇文章中，我想介绍在React项目中最常用的TypeScript特性。让我们深入研究一下TypeScript吧！
Typescript 解决了哪些问题：在全栈项目中，比如行程规划应用中，你需要将目的地信息以字符串格式保存，将天数数据以数字格式保存。如果你在任意组件里将天数数据当作字符串传到后端，这就会是一个大麻烦，对吧？从更大范围来看，这就是 TypeScript 要解决的问题之一。
TypeScript 介绍TypeScript 是 JavaScript 的超集语言。TypeScript 是一种静态且强类型语言。TypeScript 代码本身不会被执行，而会被 TypeScript 编译器用来检查变量的类型，并将其转换成 JavaScript 代码。如果我们声明一个变量的类型为字符串，然后试图将它赋值给其他类型的变量，比如数字，编译器会抛出错误（因为它具有静态类型）。这样，当我们处理各种类型的变量和数据时，可以减少出现错误的可能性。
TypeScript 的一些重要特性包括：
TypeScript 是一种具有强类型特性的编程语言。
2. TypeScript 是 JavaScript 的超集语言。
3. 它支持面向对象。
- 编译时发现错误。
类型标注:
在 TypeScript 中，变量可以这样声明：
const 变量名 = 值
在这里，类型可以是数字、布尔值、字符串、/void、/any、/undefined、/null之一。变量的值必须符合其类型，否则会引发错误。
下面列出了 TypeScript 中的所有数据类型
void类型用于表示一个函数不返回任何值。它通常被用作做一些事情但不返回任何有用值的函数的类型。这种类型的函数通常用于执行某些操作。
function logMessage(message: string): void {
console.log(message);
}
const result = logMessage("Hello, World!"); // 结果是 `undefined`never类型用于表示一个函数永远不会返回。这意味着函数要么抛出错误，要么进入无限循环。never类型是所有类型的子类型，可以在预期函数永远不会返回任何值时使用此类型。
function throwError(message: string): never { // 抛出带有指定消息的错误 {
throw new Error(message);
} // 结束抛出错误函数
function infiniteLoop(): never { // 开始无限循环 {
while (true) {
// 进行无限循环
}
} // 结束无限循环函数在 TypeScript 中，any 类型允许你绕过类型检查，即这意味着你可以将任何值赋给 any 类型的变量，并且可以在没有静态类型限制的情况下使用它们。实际上，这会使 TypeScript 的类型检查对该特定变量失效。
let anything: any; // 可以是任何类型
anything = "Hello, World!"; // 字符串
anything = 42; // 数字
anything = true; // 布尔
anything = { name: "John" }; // 对象
// 不会报错，TypeScript 不会发出警告
console.log(anything.name);
console.log(anything.someNonExistentProperty); // 某个不存在的属性，这在编译时不会有问题未知（原文缺失或不完整）
在 TypeScript 中，unknown 类型与 any 类似，但具有 更严格的类型安全。这表示“未知”，并且你不能直接对其执行任何操作，除非先缩小其类型。
let value: unknown;
value = "Hello";
if (typeof value === "string") {
console.log(value.toUpperCase()); // 类型检查后是安全的
}
// 尝试这在没有检查的情况下会导致错误:
// value.toUpperCase(); // ❌ 在没有类型断言的情况下不允许执行你可以用枚举来定义一组命名常量。
枚举方向 Direction {
Up = 1,
Down,
Left,
Right
}
// 使用这个枚举
let move: Direction = Direction.Up;
console.log(move); // 打印 move 的值，输出: 1您可以在枚举中声明不同类型的数据值，但枚举内部通常只有一种数据类型。
用户界面接口定义了... 的结构。
interface 用户接口 {
姓名: string;
年龄: number;
电子邮件?: string; // 可选
}
const 用户: 用户接口 = {
姓名: "John",
年龄: 25
};有三种访问权限：
1. 公有修饰符可以让类的变量、属性和方法在任何地方都可以被访问。
- 私有修饰符仅限同一类使用。
3. 受保护的修饰符允许类的属性和方法在同一个类及其所有子类中访问。
class Person {
// public 是默认属性；可以从任何地方访问它
public name: string;
// protected；可以在类及其子类中访问
protected age: number;
// private；只能在该类中访问
private ssn: string;
constructor(name: string, age: number, ssn: string) {
this.name = name;
this.age = age;
this.ssn = ssn;
}
// 公共方法
public greet() {
console.log(`你好，我的名字是 ${this.name}.`);
}
// 私有方法
private showSSN() {
return this.ssn;
}
// 受保护的成员方法
protected getAge() {
return this.age;
}
}
class Employee extends Person {
private employeeId: number;
constructor(name: string, age: number, ssn: string, employeeId: number) {
super(name, age, ssn);
this.employeeId = employeeId;
}
// 可以访问父类的受保护成员方法
public showInfo() {
console.log(`${this.name} 是 ${this.getAge()} 岁.`); // `getAge` 是受保护的
}
}
const emp = new Employee("Alice", 30, "123-45-6789", 101);
emp.greet(); // 公共方法，可以正常运行
emp.showInfo(); // 访问受保护的 `getAge` 方法
// console.log(emp.age); // 错误：'age' 是受保护的
// console.log(emp.ssn); // 错误：'ssn' 是私有的
// console.log(emp.getAge()); // 错误：'getAge' 是受保护的TypeScript 支持面向对象编程，并且它被用来设计结构更合理、更优秀的应用程序。TypeScript 的面向对象概念和其它编程语言中的面向对象概念类似。
OOP的特性如下：
- 类和对象
- 封装
- 继承
- 多态
- 抽象化
将 TypeScript 集成到您的 React 项目中不仅有利，而且对于现代 web 开发来说是必不可少的。通过利用 TypeScript 的静态类型，开发人员可以在早期捕获错误，提高代码质量，并促进团队间的协作。其中包括数据类型、枚举、接口和面向对象编程原则，使开发人员能够自信地处理复杂的数据结构。随着对健壮和可扩展的应用程序需求的持续增长，精通 TypeScript 无疑将使 React 开发人员更具竞争力。从今天开始使用 TypeScript，不仅可以提升您的开发体验，还能更轻松地交付高质量的应用程序。
希望这篇博客能帮助你更清楚地理解TypeScript。想了解更多精彩内容，记得关注我哦！:3
关注我：
随时随地看视频
