前端 TS 微课系列（一）：深入了解 TypeScript 基本类型-CSDN博客

引言

今天开始学习前端 TypeScript 微课系列，整个系列通过视频 + 文字的方式呈现出来，通过深入研究 TypeScript 中的各种关键概念，从基础到高级应用，今天先来了解 TypeScript 的基本类型。

TypeScript 是一种超集，它为 JavaScript 提供了静态类型检查，让我们更轻松地发现和解决潜在的错误。

1：数字类型

通过数字类型，可以更精确地定义变量的值

// 数字类型
let age: number = 25;
let price: number = 19.99;

console.log(age);
console.log(price);

age = 26; // 正确
// price = "20.00"; // 错误，类型不匹配

使用 number 类型定义了 age 和 price 变量。数字类型可以包括整数和浮点数。将字符串赋值给 price 变量时，TypeScript 提示类型不匹配。

2：字符串类型

字符串类型用于表示文本

// 字符串类型
let name: string = "John Doe";
let greeting: string = 'Hello, TypeScript!';

console.log(name);
console.log(greeting);

// name = true; // 错误，类型不匹配

使用 string 类型定义了 name 和 greeting 变量。字符串类型可以用双引号或单引号表示。如果将布尔值赋值给 name 变量，TypeScript 提示类型不匹配。

3：布尔类型

布尔类型在 TypeScript 中用于表示逻辑值 true 或 false。

// 布尔类型
let isReady: boolean = true;
let isPaused: boolean = false;

console.log(isReady);
console.log(isPaused);

// isReady = 1; // 错误，类型不匹配

使用布尔类型定义了 isReady 和 isPaused 变量。将数字赋值给 isReady 变量将提示类型不匹配。

4：数组类型

数组是一种容纳多个元素的数据结构，可以使用 number[] 或 Array<number> 来声明数字类型的数组。

// 数组类型
let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ['apple', 'banana'];

console.log(numbers);
console.log(fruits);

// numbers.push("six"); // 错误，类型不匹配

定义了数字数组 numbers 和字符串数组 fruits。将字符串赋值给 numbers 数组将提示类型不匹配。

5：元组类型

元组是一种具有固定长度和特定类型的数组。在 TypeScript 中，可以使用元组类型来定义。

// 元组类型
let person: [string, number] = ['John', 25];

console.log(person);
console.log(person[0]); // John
console.log(person[1]); // 25

// person = ["Jane", "25"]; // 错误，类型不匹配

定义了一个元组 person，它包含一个字符串和一个数字。将不匹配类型的数组赋值给 person 将导致错误。

6：空和未定义

有时，我们可能想要表示一个变量可能是空或未定义的状态，这时可以使用 null 或 undefined。

// 空和未定义
let mayBeNull: string | null = null;
let mayBeUndefined: number | undefined = undefined;

console.log(mayBeNull);
console.log(mayBeUndefined);

// mayBeNull = 23; // 错误，类型不匹配

使用联合类型 string | null ，表示 mayBeNull 可以是字符串或空。将非字符串值赋给 mayBeNull 将提示类型不匹配。

7：任意类型

如果不确定变量的类型，或者希望一个变量可以接受任何类型的值，可以使用 any 类型。

// 任意类型
let dynamic: any = 42;

console.log(dynamic);

dynamic = "TypeScript is awesome!";
console.log(dynamic);

dynamic = true;
console.log(dynamic);

使用 any 类型定义了 dynamic 变量，它可以存储任何类型的值。尽管灵活，但使用 any 会失去 TypeScript 提供的类型安全性。

8：联合类型

联合类型允许变量具有多种类型之一，通过使用 | 运算符。

// 联合类型
let mixed: string | number = "TypeScript";

console.log(mixed);

mixed = 42;
console.log(mixed);

// mixed = true; // 错误，类型不匹配

使用联合类型表示 mixed 可以是字符串或数字。将布尔值赋给 mixed 将提示类型不匹配。

9：交叉类型

交叉类型允许将多个类型合并为一个类型，通过使用 & 运算符。

// 交叉类型
interface Car {
  brand: string;
  speed: number;
}

interface MusicPlayer {
  playMusic: () => void;
}

let autonomousCar: Car & MusicPlayer = {
  brand: "Tesla",
  speed: 120,
  playMusic: () => {
    console.log("Playing music...");
  },
};

console.log(autonomousCar.brand);
autonomousCar.playMusic();

定义了两个接口 Car 和 MusicPlayer，然后使用交叉类型将它们合并成一个新的接口。最后，创建了一个对象 autonomousCar，它同时具有汽车和音乐播放器的属性和方法。