『TypeScript』深入理解TypeScript基本类型及其应用

📣读完这篇文章里你能收获到

• 掌握TypeScript的基本及高级数据类型
• 掌握TypeScript的类型系统

一、基本类型

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 的类型正确，从而避免了潜在的错误操作。

『TypeScript』系列博客文章，欢迎关注上面的专栏

• 从零开始编写你的第一个TypeScript程序
• 深入理解TypeScript变量声明、函数定义、类与接口及泛型
  
• 深入理解TypeScript基本类型及其应用