TypeScript 基础类型

在 JavaScript 中，我们都是直接使用 let 或 const 来定义一个变量。但在 TypeScript 中，为了让代码更加安全，我们需要给变量打上一个 “标签”，告诉编译器这个变量到底是什么类型的。

在这一节中，我们先从最常用的 3 种基础类型讲起，也就是：number（数字）、string（字符串）、boolean（布尔值）。

TypeScript 数字类型（number）

在 JavaScript 中，数字是不区分 “整数” 和 “浮点数” 的，统一都叫做 number。而 TypeScript 完美继承了这一点。无论是正数、负数、小数，甚至是十六进制、二进制数，它们的类型都是 number。

在 TypeScript 中，我们可以使用冒号 “:” 来为变量指定类型，这种方式也被称为 “类型注解”（这个术语非常重要）。

语法：

let 变量名: 类型名 = 值;

说明：

这里的 “类型名” 用于限制变量的类型，常用取值如下表所示。

小伙伴们可以这样理解：在 TypeScript 中，为变量指定类型，其实就是跟变量签订一份 “契约”。

示例 1：定义数字类型变量

let age: number = 20;

// 尝试修改值
age = 25; 

console.log(age);

运行结果如下。

25

分析：

在这个例子中，我们使用 “: number” 明确告诉 TypeScript：age 这个变量只能是数字，而不能是其他类型。

如果我们尝试把一个字符串赋值给它，那么 TypeScript 编辑器立马就会飘红报错。

TypeScript 字符串类型（string）

在 TypeScript 中，我们可以使用 “string” 来表示字符串类型。与 JavaScript 一样，我们可以使用单引号、双引号或反引号来表示一个字符串。

示例 2：使用字符串类型

const name: string = "阿莫";
const website: string = "绿叶网";

const words: string = `欢迎来到${website}，我是站长${name}`;

console.log(words);

运行结果如下。

欢迎来到绿叶网，我是站长阿莫

分析：

这里我们使用了 ES6 的模板字符串。在 TypeScript 中，模板字符串同样受到严格的类型保护。如果 “${}” 里面的变量没有定义，或者类型不匹配，编译器同样会报错。

TypeScript 布尔类型（boolean）

布尔值是编程中最简单的数据类型，它只有 2 个值：true 和 false。在 TypeScript 中，我们可以使用 boolean 来定义布尔类型。

示例 3：使用布尔类型

// 用户是否已登录
let isLogin: boolean = true;

// 用户是否是 VIP 会员
const isVip: boolean = false;

console.log(isLogin);
console.log(isVip);

运行结果如下。

true
false

分析：

特别注意的是，在 TypeScript 中，boolean 是基本数据类型，而大写的 Boolean 是 JavaScript 中的内置构造函数。我们在定义变量类型时，千万不要写成大写的 Boolean。

TypeScript 类型检查的强大

学到这里，有小伙伴们可能会问：“使用 TypeScript 定义变量，不就是给变量多写了个单词吗？这有什么了不起的呢？”

别急嘛，我们来看一个实际开发中很常见的翻车现场：假设你在做一个电商项目，需要计算商品的总价。

示例 4：JavaScript vs TypeScript

let count: number = 2;
const unitPrice: number = 50;

// 假如后面代码逻辑乱了，不小心把字符串赋给了 count
count = "2";

const total = count * unitPrice;
console.log(total);

然后 VS Code 直接飘红报错了，如下图所示。

分析：

在传统 JavaScript 中，如果我们不小心把 count 变成了字符串 "2"，计算结果可能依然是 100（因为 JavaScript 会自动转换类型）。如果代码逻辑更复杂，比如是加法运算 "2" + 50，结果就会变成离谱的 "250"。

而在 TypeScript 中，当我们试图写出 count = "2" 时，编辑器会立即提示：

Type 'string' is not assignable to type 'number'.

TypeScript 这种 “实时监控” 的能力，能够让我们在编写代码时感到前所未有的安全，再也不用怕被坑了。

TypeScript 的类型推断

有些小伙伴可能会觉得：“每个变量都要写上类型，那岂不是非常麻烦？”

实际上，TypeScript 是非常智能的。如果我们在定义变量的同时就给它赋了值，那么它会根据你赋的值，自动推断出变量的类型。这个功能也叫做 “类型推断”。

比如：

let score = 100;       // TypeScript 自动推断为 number 类型
let site = "绿叶网";    // TypeScript 自动推断为 string 类型

虽然有类型推断，但在编写复杂的函数或者重要的业务逻辑时，我们还是建议显式地写上类型注解。这样不仅能让代码更严谨，也能让别人一眼看出你的意图。