📣读完这篇文章里你能收获到
- 掌握TypeScript的基本及高级数据类型
- 掌握TypeScript的类型系统
文章目录
- 一、基本类型
- 1. 类型声明
- 2. 基本数据类型
- 2.1 数字(Number)
- 2.2 字符串(String)
- 2.3 布尔值(Boolean)
- 2.4 数组(Array)
- 2.5 元组(Tuple)
- 2.6 枚举(Enum)
- 3. 高级数据类型
- 3.1 对象(Object)
- 3.2 空(Void)
- 3.3 任意类型(Any)
- 3.4 联合类型(Union)
- 二、类型系统
- 1. 类型推断
- 2. 类型断言
- 3. 类型兼容性
- 4. 类型保护
一、基本类型
TypeScript 是一种由微软开发的开源编程语言,它是 JavaScript 的超集,为 JavaScript 添加了静态类型检。在 TypeScript 中,我们可以对数据进行显式的类型注解,以提高代码的可读性、可维护性和可靠性。
1. 类型声明
- 语法:
let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型, 参数: 类型): 类型{ ... }
- 类型:
类型 | 例子 | 描述 |
---|---|---|
number | 1, -33, 2.5 | 任意数字 |
string | “hello” | 任意字符串 |
boolean | true、false | 布尔值true或false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | {name:‘孙悟空’} | 任意的JS对象 |
array | [1,2,3] | 任意JS数组 |
tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
enum | enum{A, B} | 枚举,TS中新增类型 |
2. 基本数据类型
2.1 数字(Number)
在 TypeScript 中,数字类型表示数值,可以包括整数和浮点数。使用 number 关键字声明数字类型变量,例如:
let age: number = 20;
let price: number = 9.99;
2.2 字符串(String)
字符串类型表示一串字符。使用单引号或双引号括起来的字符序列都是合法的字符串,例如:
let name: string = 'Alice';
let message: string = "Hello, TypeScript!";
2.3 布尔值(Boolean)
布尔类型表示真(true)或假(false)的值。使用 boolean 关键字声明布尔类型变量,例如:
let isFinished: boolean = false;
let hasErrors: boolean = true;
2.4 数组(Array)
数组类型表示一个元素的集合。使用 type[] 或 Array 格式来声明数组类型,其中 type 是元素的类型。例如:
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ['apple', 'banana', 'orange'];
2.5 元组(Tuple)
元组类型表示一个固定长度的数组,每个元素可以具有不同的类型。使用 [type1, type2, …] 格式来声明元组类型,例如:
let person: [string, number] = ['Alice', 20];
2.6 枚举(Enum)
枚举类型用于定义一组命名的常量。通过 enum 关键字来声明枚举类型,例如:
enum Color {
Red,
Green,
Blue,
}
let backgroundColor: Color = Color.Red;
3. 高级数据类型
3.1 对象(Object)
对象类型表示非原始类型的值。使用 object 关键字声明对象类型,例如:
let person: object = { name: 'Alice', age: 20 };
3.2 空(Void)
空类型表示没有任何值的类型。通常用于函数返回值的标注,例如:
function showMessage(): void {
console.log('Hello, TypeScript!');
}
3.3 任意类型(Any)
任意类型表示允许赋值为任意类型的值。使用 any 关键字声明任意类型变量,例如:
let data: any = 'Hello, TypeScript!';
data = 10;
data = true;
3.4 联合类型(Union)
联合类型表示可以是多种类型之一的值。使用 type1 | type2 | … 格式来声明联合类型,例如:
let value: string | number = 'Hello, TypeScript!';
value = 10;
二、类型系统
1. 类型推断
TypeScript 能够根据变量的使用上下文来自动推断变量的类型。例如,当我们声明一个变量而没有显式指定其类型时,TypeScript 会根据变量的初始值来推断它的类型。示例代码如下:
let message = 'Hello, TypeScript!';
// 推断 message 的类型为 string
在上述示例中,TypeScript 推断 message 的类型为 string,因为它的初始值是一个字符串。
此外,TypeScript 也能推断函数的返回类型。如果函数的返回语句中有明确的类型信息,TypeScript 将会根据该信息推断出函数的返回类型。示例代码如下:
function add(a: number, b: number) {
return a + b;
}
// 推断 add 函数的返回类型为 number
在上述示例中,TypeScript 推断 add 函数的返回类型为 number,因为 a 和 b 的类型都被显式地指定为 number,而函数体内部返回了两个 number 类型的值相加。
2. 类型断言
有时候,我们可能会清楚地知道一个变量的类型,但 TypeScript 并不能通过类型推断来确定。这种情况下,我们可以使用类型断言来告诉 TypeScript 变量的确切类型。示例代码如下:
let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;
在上述示例中,我们使用了类型断言 (someValue as string) 来将 someValue 断言为 string 类型,然后通过 .length 属性获取字符串的长度。通过类型断言,我们明确告诉 TypeScript 变量的类型,避免了潜在的类型错误。
除了 as 语法之外,还可以使用尖括号 进行类型断言。示例代码如下:
let someValue: any = 'this is a string';
let strLength: number = (<string>someValue).length;
3. 类型兼容性
在 TypeScript 中,类型兼容性是指当一个类型 A 可以被赋值给另一个类型 B 时,我们就说类型 A 兼容类型 B。TypeScript 的类型系统是基于结构子类型化的,这意味着类型的成员结构决定了它们是否兼容。
例如,如果一个类型具有与目标类型相同的属性和方法,则认为这两个类型是兼容的。示例代码如下:
interface Animal {
name: string;
}
class Dog {
name: string;
constructor(name: string) {
this.name = name;
}
}
let animal: Animal;
animal = new Dog('旺财');
在上述示例中,Animal 接口和 Dog 类具有相同的属性 name,因此我们可以将 Dog 类的实例赋值给 Animal 类型的变量,它们是兼容的。
4. 类型保护
类型保护是指一些表达式,它们能够在运行时检查类型,并以此来确保类型的正确性。TypeScript 提供了一些内置的类型保护机制,例如类型断言、类型判断等。
其中,类型判断是通过使用 typeof
、instanceof
、in
和自定义类型谓词函数等方式进行的。示例代码如下:
function isNumber(value: any): value is number {
return typeof value === 'number';
}
function printValue(value: any) {
if (isNumber(value)) {
console.log(value.toFixed(2));
} else {
console.log(value.toUpperCase());
}
}
在上述示例中,函数 isNumber
接收一个参数 value
,类型为 any
,并且返回一个表达式 value is number
。这里的 value is number
是一种类型谓词,意味着当这个函数返回 true
的时候,TypeScript 就会知道在这个条件下 value
的类型是 number
。在 printValue 函数中,我们使用了类型保护来确保 value 的类型正确,从而避免了潜在的错误操作。