TS学习笔记 ---未完待续....

TS学习笔记

1 .ts文件与.tsx文件有什么区别
2.使用TS之前需要配置
3.TS特性
泛型和类型注解有什么区别？
3.什么是泛型参数?
4.函数、类、接口有什么区别？
- 4.1 一个class不符合interface的约束，会怎样？
枚举类型
- 是什么？
- 有什么用？
- 有什么特性？
- 如何使用枚举类型？
类型别名
- 是什么？
- 有什么用？使用场景？
- 如何使用？
联合类型

1 .ts文件与.tsx文件有什么区别

.ts 和 .tsx 文件都是 TypeScript 文件的扩展名，但它们在文件中可以包含的内容稍有不同：

.ts 文件是纯 TypeScript 文件，用于编写 TypeScript 代码，通常用于编写纯逻辑的代码，如函数、类、接口等。
.tsx 文件是包含 JSX（JavaScript XML）语法的 TypeScript 文件，用于编写包含 React 组件的代码。JSX 允许在 JavaScript/TypeScript 中编写类似 HTML 的标记结构，用于描述 UI 的结构和组件之间的关系。

如果您的文件中包含了 React 组件，并且您希望使用 JSX 语法编写组件的模板部分，那么您可以选择使用 .tsx 扩展名。如果您的文件仅包含纯 TypeScript 代码而没有 JSX，则可以选择使用 .ts 扩展名。

2.使用TS之前需要配置

当您使用 TypeScript Compiler (tsc) 进行编译时，您可以使用 tsconfig.json 文件来配置编译器的行为和选项。

在项目的根目录下创建一个名为 tsconfig.json 的文件，并根据您的项目需求进行配置。以下是一个基本的 tsconfig.json 示例：

{"compilerOptions": {"target": "es5","module": "commonjs","strict": true,"esModuleInterop": true,"outDir": "dist"},"include": ["src/**/*.ts","src/**/*.tsx"],"exclude": ["node_modules"]
}

这个示例配置文件指定了一些常见的选项，例如目标编译版本、模块系统、严格模式等。您可以根据您的项目需要进行修改和扩展。

在创建了 tsconfig.json 文件后，您可以使用 tsc 命令来编译您的 TypeScript 代码。编译输出将会根据配置文件中的 "outDir" 选项指定的目录进行输出。

更多关于 tsconfig.json 配置选项的详细信息可以参考 TypeScript 官方文档：tsconfig.json。

3.TS特性

TypeScript（TS）作为 JavaScript（JS）的超集，提供了许多增强和扩展的特性，以提高开发人员的工作效率和代码质量。以下是 TypeScript 的一些主要特性：

静态类型检查：TypeScript 引入了静态类型检查，可以在编译时捕获类型错误，提供更早的错误检测和更好的代码可靠性。
类型注解：TypeScript 允许开发人员为变量、函数参数、函数返回值等添加类型注解，明确指定变量的类型，提供更好的代码可读性和可维护性。
类型推断：TypeScript 能够根据上下文推断变量的类型，即使没有显式注解，也能提供类型检查和自动补全的功能。
接口和抽象类：TypeScript 提供了接口和抽象类的概念，用于定义对象的结构和行为，以增强代码的可读性和模块化。
泛型：TypeScript 支持泛型编程，可以编写具有通用类型的代码，增加代码的复用性和灵活性。
枚举类型enum：TypeScript 引入了枚举类型，允许开发人员定义具名的常量集合，提供更好的代码可读性和类型安全性。
类型别名type和联合类型：TypeScript 支持类型别名，允许开发人员为复杂的类型定义别名，提高代码可读性。此外，还支持联合类型，可以在一个变量中支持多种类型。
模块化支持：TypeScript 提供了模块化支持，允许开发人员使用模块化的方式组织代码，以提高可维护性和代码重用性。
编译时转换：TypeScript 允许在编译时将新语言特性转换为向后兼容的 JavaScript 代码，以便在不支持这些特性的运行时环境中运行。

泛型和类型注解有什么区别？

泛型和类型注解是 TypeScript 中用于处理类型的两个不同的概念。

类型注解（Type Annotation）：类型注解是在变量或函数声明时显式地指定其类型。使用类型注解可以告诉 TypeScript 变量的预期类型，从而进行类型检查和类型推断。例如：

let num: number = 10;function add(a: number, b: number): number {return a + b;
}

类型注解提供了一种明确指定类型的方式

泛型（Generics）：泛型是一种参数化类型的机制。通过泛型，可以在使用时指定具体的类型。例如：

function identity<T>(arg: T): T {return arg;
}let result = identity<string>("Hello");

类型注解理解为在定义的时候就定义类型，但是泛型是使用时定义类型。
类型注解提供了一种静态的方式来明确表达代码中的数据类型；泛型则是在使用的时候根据需要动态地确定具体的类型，在编译时进行类型推断和检查的特性。

3.什么是泛型参数?

泛型参数是 TypeScript 中的一种特性，用于在定义函数、类或接口时，允许参数的类型在使用时动态指定。

通过使用泛型参数，我们可以编写更灵活、可复用的代码，使其适用于不同类型的数据，而不需要针对每种类型都编写重复的代码。

泛型参数使用尖括号 <T> 来表示，T 是一个占位符，可以根据需要替换为具体的类型。例如，可以使用 T 来表示数组的元素类型，或者表示函数的参数类型和返回值类型。

以下是一个简单的示例，展示了如何在函数定义中使用泛型参数：

function identity<T>(value: T): T {return value;
}const result = identity<string>("Hello");

在上面的例子中，identity 函数接受一个泛型参数 T，表示输入值和返回值的类型。使用 T，我们可以将函数用于不同类型的数据。在调用函数时，我们可以显式地指定泛型参数的具体类型，也可以让 TypeScript 根据传入的值进行类型推断。

泛型参数可以提供更灵活的类型约束和重用性，使代码更具通用性和可维护性。它在处理不同类型的数据时非常有用，并能够通过编译时类型检查捕获潜在的类型错误。

4.函数、类、接口有什么区别？

函数、类和接口是面向对象编程中常见的概念，它们分别用于描述不同的代码组织方式和抽象层级。

函数（Function）是一段可重复调用的代码块，用于执行特定的任务或操作。函数可以接受参数并返回一个值。它是程序中的基本构建块，用于封装可重用的逻辑。函数可以被独立调用，也可以作为其他代码的一部分调用。
类（Class）是一种面向对象编程的概念，用于描述具有相似特征和行为的对象的模板。类定义了对象的属性和方法，并可以创建多个实例（对象）来使用这些定义。类是面向对象编程的核心概念，它允许通过封装数据和方法来创建抽象的数据类型。
接口（Interface）是一种定义对象的结构和行为的抽象。接口描述了对象应该具有的属性、方法和其他约束条件，但它本身不提供实现。接口可以用于定义数据的合约，以确保代码的一致性和可靠性。在 TypeScript 中，接口还可以用于约束函数的形状。将接口理解成一种约束。

简而言之，函数用于封装可重用的逻辑，类用于创建对象的模板并封装属性和方法，接口用于描述对象的结构和行为的约束。它们在代码组织和抽象层级上有不同的作用和用途，可以根据需要选择合适的概念来实现特定的需求。

以下是函数、类和接口的简单示例代码，帮助您区分它们：

函数（Function）示例：

function greet(name) {console.log(`Hello, ${name}!`);
}greet('John');  // 输出：Hello, John!

类（Class）示例：

class Person {constructor(name) {this.name = name;}greet() {console.log(`Hello, ${this.name}!`);}
}const john = new Person('John');
john.greet();  // 输出：Hello, John!

接口（Interface）示例：

interface Greetable {name: string;greet(): void;
}class Person implements Greetable {constructor(public name: string) {}greet() {console.log(`Hello, ${this.name}!`);}
}const john: Greetable = new Person('John');
john.greet();  // 输出：Hello, John!

在函数示例中，我们定义了一个 greet 函数，它接受一个参数 name 并输出一条问候消息。

在类示例中，我们定义了一个 Person 类，它有一个构造函数和一个 greet 方法。我们创建了一个 Person 的实例 john，并调用了它的 greet 方法。

在接口示例中，我们定义了一个 Greetable 接口，它要求实现者具有 name 属性和 greet 方法。然后我们创建了一个 Person 类并实现了 Greetable 接口，使它符合接口的要求。最后，我们创建了一个 john 变量，它的类型是 Greetable，指向 Person 的实例，并调用了 greet 方法。

通过这些示例代码，您可以看到函数、类和接口在语法上的不同之处，并了解它们的用法和特点。

4.1 一个class不符合interface的约束，会怎样？

如果一个类声明了实现一个接口，但没有按照接口的要求提供相应的属性和方法，TypeScript 编译器会报错，指出类没有正确实现接口的约束。

这种情况下，编译器会给出一个错误，提示你需要在类中提供接口中定义的所有属性和方法。如果类没有正确实现接口，那么它不能被视为实现了该接口，无法通过编译。

枚举类型

是什么？

在 TypeScript 中，枚举（Enum）类型是一种特殊数据类型

用于定义一组命名常量

有什么用？

枚举类型在以下情况下非常有用：

表示一组相关的命名常量：枚举类型可以用于表示一组相关的命名常量，例如表示方向（上、下、左、右）、星期几（星期一到星期日）等。这样可以提高代码的可读性，避免硬编码的值。
限制变量取值范围：通过使用枚举类型，可以限制变量的取值范围，只允许其取枚举中定义的成员之一。这可以帮助在编码过程中发现潜在的错误。
增强代码可维护性：使用枚举类型可以使代码更具可维护性。当需求变化时，只需修改枚举定义即可，而不必在代码中搜索和替换具体的值。
提供更好的代码提示和自动完成：编辑器可以根据枚举类型提供更好的代码提示和自动完成功能，帮助开发人员更快地编写代码并避免拼写错误。

有什么特性？

枚举类型的特性包括：

自动递增：枚举中的值可以自动递增。默认情况下，第一个枚举成员的值为0，后续的枚举成员的值会在前一个成员基础上递增。但是也可以手动指定枚举成员的值。
反向映射：枚举类型在编译为 JavaScript 时会生成一个反向映射，可以根据枚举值获取对应的枚举名称。这在某些场景下非常有用。
枚举成员类型：枚举成员的类型可以是数字或字符串。
枚举合并：在 TypeScript 中，可以合并具有相同名称的多个枚举定义，以便将它们的成员合并为单个枚举类型。

如何使用枚举类型？

要使用枚举类型，可以按照以下步骤：

定义枚举类型：使用enum关键字定义一个枚举类型，并为每个枚举成员分配一个名称。

enum Direction {Up,Down,Left,Right
}

使用枚举值：使用定义的枚举类型来声明变量，并将其赋值为枚举成员之一。

一个叫Direction 的枚举类型，它终究是个类型，只是比较特殊。

let direction: Direction = Direction.Up;
console.log(direction); // 输出: 0 (Up 的值)

访问枚举成员：可以通过枚举类型的名称以及成员名称来访问枚举成员的值。

console.log(Direction.Down); // 输出: 1 (Down 的值)

自定义枚举成员的值：可以为枚举成员手动指定值，也可以在第一个枚举成员之前设置初始值，以便后续的成员递增。

enum Direction {Up = 1,Down, // 2Left, // 3Right // 4
}

使用枚举成员的反向映射：可以根据枚举值获取对应的枚举名称。

console.log(Direction[2]); // 输出: "Down"

枚举类型在表示一组相关的命名常量时非常有用。它提供了更好的代码可读性，并且可以帮助减少硬编码的值，提高代码的可维护性。

类型别名

是什么？

类型别名是 TypeScript 中用来给一个类型起一个新名字的机制。它通过使用 type 关键字来定义一个新的类型名称，并将其与现有类型进行关联。

有什么用？使用场景？

复杂类型的简化：当一个类型较为复杂或冗长时，可以使用类型别名将其简化为一个可读性更好的名称。这有助于提高代码的可读性和理解性。

类型别名的使用场景包括但不限于：

定义复杂的数据结构，如对象、数组或元组类型。
定义函数签名或回调函数类型。
组合已有类型来创建更具表达力的新类型。

如何使用？

type Point = {x: number;y: number;
};type Callback = (data: string) => void;const origin: Point = { x: 0, y: 0 };function processData(callback: Callback) {// 处理数据并调用回调函数callback("Processed data");
}

可以理解为：

将长成{ x: 0, y: 0 }样的匿名对象取个名字叫Point

将长成(data: string) => void这样的匿名箭头函数取个名字叫Callback

联合类型

联合类型是指一个变量可以具有多个不同类型中的一个。它使用竖线 | 分隔不同的类型。

// 声明一个联合类型的变量
let myVariable: string | number;// 赋值为字符串类型
myVariable = 'Hello';// 赋值为数字类型
myVariable = 123;// 赋值为其他类型会报错
// myVariable = true; // Error: Type 'boolean' is not assignable to type 'string | number'// 使用联合类型处理函数参数
function displayData(data: string | number) {console.log(data);
}displayData('Hello'); // 输出: Hello
displayData(123); // 输出: 123
// displayData(true); // Error: Argument of type 'boolean' is not assignable to parameter of type 'string | number'// 使用联合类型处理返回值
function processData(input: string | number): string {if (typeof input === 'string') {return input.toUpperCase();} else {return input.toString();}
}console.log(processData('hello')); // 输出: HELLO
console.log(processData(123)); // 输出: 123