TypeScript中的数据类型与类型推断
发布时间: 2024-02-22 04:33:16 阅读量: 66 订阅数: 35 ![](https://csdnimg.cn/release/wenkucmsfe/public/img/col_vip.0fdee7e1.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/col_vip.0fdee7e1.png)
![XMIND](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
TypeScript原始数据类型有哪些
# 1. 介绍TypeScript数据类型
TypeScript是一种由微软开发的开源编程语言,是JavaScript的超集,提供了静态类型检查和更丰富的面向对象编程能力。在TypeScript中,数据类型是一个非常重要的概念,能够帮助开发者更好地进行代码规范与错误检查。
## 1.1 TypeScript数据类型概述
在TypeScript中,数据类型可以分为基本数据类型和复合数据类型两大类,同时还支持类型注解和类型推断。通过合理使用数据类型,可以提高代码的可读性和可维护性,让代码更加健壮。
## 1.2 基本数据类型
TypeScript中的基本数据类型包括字符串类型、数字类型、布尔类型、空类型和未定义类型。这些基本数据类型用于定义变量的基本值类型,方便进行相关操作和计算。
## 1.3 复合数据类型
复合数据类型包括数组类型、元组类型、对象类型和枚举类型。这些数据类型可以帮助开发者管理复杂的数据结构,提高代码的表现力和灵活性。
## 1.4 类型注解与类型推断的区别
类型注解是开发者显式地为变量或函数指定数据类型,而类型推断是TypeScript根据赋值表达式自动推断变量的数据类型。合理使用类型注解和类型推断可以提高代码的可读性和开发效率。
# 2. 基本数据类型
在TypeScript中,数据类型是非常重要的概念,它可以帮助我们在编写代码时更好地理解和规范数据的结构与用途。本章将介绍TypeScript中的基本数据类型,包括字符串类型、数字类型、布尔类型、空类型与未定义类型。
### 2.1 字符串类型
字符串类型在TypeScript中表示文本数据,可以使用单引号(')或双引号(")来定义字符串变量。
```typescript
let message: string = 'Hello, TypeScript!';
console.log(message); // 输出:Hello, TypeScript!
```
字符串类型还支持模板字符串的方式,使用反引号(`)来定义,并可以在其中插入变量或表达式。
```typescript
let name: string = 'Alice';
let greeting: string = `Hello, ${name}!`;
console.log(greeting); // 输出:Hello, Alice!
```
### 2.2 数字类型
数字类型用于表示数值,在TypeScript中可以包括整数和浮点数。
```typescript
let count: number = 10;
let price: number = 29.99;
console.log(count); // 输出:10
console.log(price); // 输出:29.99
```
### 2.3 布尔类型
布尔类型只有两个取值,即true和false,用于表示逻辑值。
```typescript
let isDone: boolean = false;
console.log(isDone); // 输出:false
```
### 2.4 空类型与未定义类型
在TypeScript中,void类型用于表示没有任何返回值的函数,而undefined和null类型用于表示变量未定义或空值。
```typescript
function sayHello(): void {
console.log('Hello, TypeScript!');
}
let x: undefined = undefined;
let y: null = null;
```
基本数据类型在TypeScript中有着明确的定义和用途,可以帮助开发人员更好地理解和控制数据的含义和操作。
# 3. 复合数据类型
### 3.1 数组类型
在TypeScript中,数组是一种特殊的数据类型,用来存储同一种类型的元素。我们可以使用以下语法定义数组类型:
```typescript
// 定义字符串数组
let fruits: string[] = ["apple", "banana", "orange"];
// 定义数字数组
let numbers: number[] = [1, 2, 3, 4, 5];
// 定义任意类型数组
let mixed: any[] = ["hello", 10, true];
```
我们还可以使用数组泛型来定义数组类型:
```typescript
// 使用数组泛型定义字符串数组
let names: Array<string> = ["Alice", "Bob", "Eve"];
```
### 3.2 元组类型
元组是TypeScript新增的数据类型,用于表示已知元素数量和类型的数组。我们可以使用以下语法定义元组类型:
```typescript
// 定义一个元组类型
let employee: [number, string] = [1, "Alice"];
// 访问元组元素
let employeeId: number = employee[0];
let employeeName: string = employee[1];
```
### 3.3 对象类型
在TypeScript中,对象是一种复合数据类型,用来表示拥有多个属性和对应值的结构。我们可以使用以下语法定义对象类型:
```typescript
// 定义对象类型
let person: { name: string, age: number } = { name: "Alice", age: 30 };
// 访问对象属性
let personName: string = person.name;
let personAge: number = person.age;
```
### 3.4 枚举类型
枚举是一种特殊的数据类型,用于定义数值集合并给它们友好的名称。我们可以使用以下语法定义枚举类型:
```typescript
// 定义枚举类型
enum Color {
Red,
Green,
Blue,
}
// 使用枚举类型
let selectedColor: Color = Color.Red;
```
以上是关于TypeScript中复合数据类型的介绍,包括数组类型、元组类型、对象类型以及枚举类型。接下来我们将深入探讨类型注解与类型推断的区别。
# 4. 类型注解与类型推断
在TypeScript中,类型注解和类型推断是非常重要的概念,可以帮助开发者更好地定义和使用数据类型。让我们深入了解它们的区别和用法。
#### 4.1 什么是类型注解
类型注解是一种显式地为变量或函数指定类型的方式。通过类型注解,我们可以告诉编译器一个变量的数据类型是什么,从而提高代码的可读性和可维护性。
下面是一个简单的例子,演示了如何使用类型注解:
```typescript
// 定义一个变量,并使用类型注解指定其类型为字符串
let message: string = "Hello, TypeScript!";
// 尝试给 message 指定一个数字值,会在编译阶段报错
message = 10; // Error: Type 'number' is not assignable to type 'string'
```
在上面的代码中,我们使用 `: string` 对 `message` 进行了类型注解,告诉编译器它的类型应该是字符串。当我们尝试将一个数字赋值给 `message` 时,TypeScript 编译器会报错,因为类型不匹配。
#### 4.2 如何使用类型注解
类型注解可以应用在变量、函数参数、函数返回值等各种场景。下面是一些使用类型注解的示例:
```typescript
// 变量类型注解
let age: number = 30;
// 函数参数类型注解
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
// 函数返回值类型注解
function add(x: number, y: number): number {
return x + y;
}
```
通过这些示例,我们可以看到如何在不同场景下使用类型注解来明确变量的数据类型,函数的参数类型以及返回值类型。
#### 4.3 什么是类型推断
类型推断是 TypeScript 的一项功能,它可以根据变量的初始赋值来推断出该变量的类型。这使得我们在声明变量时可以省略类型注解,让代码变得更加简洁和灵活。
让我们看一个类型推断的例子:
```typescript
// TypeScript 会根据初始赋值推断出变量的类型为 string
let username = "John Doe";
// 在未显式指定类型的情况下,username 的类型会被推断为 string
username = "Jane Doe"; // 正确赋值
username = 123; // 错误赋值,类型不匹配
```
在这个例子中,我们没有显式使用类型注解来指定 `username` 的类型,而是通过初始赋值来让 TypeScript 推断出它的类型为字符串。
#### 4.4 如何使用类型推断
使用类型推断可以简化代码,并且在某些情况下可以减少代码量。但在需要明确指定类型的情况下,我们仍然可以使用类型注解来提高代码的可读性和可维护性。
```typescript
// 类型推断例子
let age = 30; // TypeScript会推断age为number类型
// 显示类型注解可以提高代码可读性
let height: number = 180; // 明确指定height为number类型
```
通过上述例子,我们可以看到如何利用类型推断来简化代码,同时也理解了在某些情况下使用类型注解的必要性。
# 5. 类型断言与类型守卫
在 TypeScript 中,我们经常需要处理各种类型推断或转换的情况,本章将介绍类型断言与类型守卫两种方法,帮助我们更好地处理类型相关的操作。
#### 5.1 使用类型断言
类型断言是一种告诉编译器 "我比你更了解这个变量的类型" 的方式。有时候 TypeScript 无法准确推断出变量的类型,或者我们确切知道变量的类型时,我们可以使用类型断言来告诉编译器应该怎样处理这个变量。
在 TypeScript 中,有两种类型断言的语法:**尖括号** 语法和 **as** 语法。
```typescript
let someValue: any = "this is a string";
let strLength1: number = (someValue as string).length;
let strLength2: number = (<string>someValue).length;
console.log(strLength1); // 输出:16
console.log(strLength2); // 输出:16
```
在上面的示例中,我们将 `someValue` 断言为 `string` 类型,然后获取其 `length` 属性。这样可以避免编译器报错,并告诉编译器 `someValue` 确实是一个 `string` 类型。
#### 5.2 自定义类型守卫
类型守卫是一种用来在运行时检查变量类型的技术。通过自定义类型守卫函数,我们可以更加灵活地判断变量的类型,以便进行进一步的操作。
```typescript
interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
function isFish(pet: Bird | Fish): pet is Fish {
return (pet as Fish).swim !== undefined;
}
let pet: Bird | Fish = {} as Bird;
if (isFish(pet)) {
pet.swim();
} else {
pet.fly();
}
```
在上面的示例中,我们定义了接口 `Bird` 和 `Fish`,然后编写了一个自定义的 `isFish` 类型守卫函数来判断 `pet` 是否为 `Fish` 类型。在 if-else 分支中,根据类型守卫的判断结果,进行不同类型的操作。
#### 5.3 类型断言 vs 类型守卫
类型断言和类型守卫在处理类型相关问题时都能起到一定的作用,但两者的使用场景略有不同。
- 类型断言适用于在编译阶段告诉编译器变量的确切类型。
- 类型守卫适用于在运行时动态地判断变量的类型,并进行相应的操作。
合理地使用类型断言和类型守卫能够提高代码的类型安全性,避免意外的类型错误。
# 6. 高级类型
在TypeScript中,高级类型提供了更复杂的数据类型操作和转换方式,让我们对数据类型操作更加灵活和强大。本章将介绍高级类型的几种常见形式:联合类型、交叉类型、映射类型和条件类型。
### 6.1 联合类型
联合类型表示一个值可以是多种类型之一。使用"|"符号进行类型之间的连接,例如:
```typescript
function padLeft(value: string, padding: string | number) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, but got ${padding}`);
}
console.log(padLeft("Hello", 4)); // 输出: " Hello"
console.log(padLeft("World", "-")); // 输出: "-World"
```
在上面的示例中,参数padding可以是字符串类型或者数字类型,根据传入的实际参数类型执行不同的代码逻辑。
### 6.2 交叉类型
交叉类型将多个类型合并为一个新类型。使用"&"符号进行类型之间的交叉操作,例如:
```typescript
interface A {
a: number;
}
interface B {
b: string;
}
type AB = A & B;
const ab: AB = { a: 1, b: "hello" };
console.log(ab); // 输出: { a: 1, b: 'hello' }
```
在上面的示例中,类型AB表示同时具有A和B接口定义的属性的对象类型,通过交叉操作符"&"实现了合并两个接口的效果。
### 6.3 映射类型
映射类型允许您创建新类型,该新类型基于现有类型并将其每个属性转换为新类型。使用"keyof"获取类型的属性键,如下所示:
```typescript
interface Person {
name: string;
age: number;
}
type ReadonlyPerson = {
readonly [P in keyof Person]: Person[P];
}
const person: ReadonlyPerson = { name: "Alice", age: 30 };
// 下面的赋值将会报错,因为readonlyPerson类型的属性是只读的
// person.name = "Bob";
```
在上面的示例中,ReadonlyPerson类型将Person接口中的所有属性都设置为只读,通过映射每个属性实现了只读属性的效果。
### 6.4 条件类型
条件类型根据一个类型关系实现不同结果的类型变换。在类型判断时可以使用条件类型实现更灵活的类型处理,例如:
```typescript
type Check<T> = T extends string ? true : false;
type StrCheck = Check<string>; // StrCheck 的类型为 true
type NumCheck = Check<number>; // NumCheck 的类型为 false
```
在上面的示例中,根据条件T是否为字符串类型,返回不同的结果类型。条件类型可以根据泛型T的类型关系实现不同的类型转换。
通过本章节的介绍,我们可以看到TypeScript中高级类型的应用,包括联合类型、交叉类型、映射类型和条件类型,可以帮助我们更好地处理复杂的数据类型操作。
0
0
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)