头图

今天我们要介绍的是 TypeScript 中最基础也是最重要的概念之一——类型注解,特别是 基本类型。如果你刚刚接触 TypeScript,或者正在从 JavaScript 过渡到 TypeScript,那么理解并熟练使用类型注解会大大提升你编写代码的效率和安全性。

类型注解允许你明确指定变量、函数参数、返回值等的类型,这样编译器就能帮助你检测潜在的错误,避免了许多运行时的 bug。今天我们将从 TypeScript 的基本数据类型开始,看看如何在代码中使用类型注解。

6.1 什么是类型注解?

在 TypeScript 中,类型注解就是在代码中显式声明变量、参数或函数返回值的类型。这样,TypeScript 就能根据这些类型信息进行静态检查,确保类型一致性,避免你在运行时遇到一些难以调试的错误。

6.2 TypeScript 的基本类型

TypeScript 的基本类型包括:

  • number:用于表示数字类型,包括整数和浮动小数。
  • string:用于表示字符串类型。
  • boolean:用于表示布尔值(truefalse)。
  • nullundefined:分别表示空值和未定义的变量。
  • any:表示任意类型,可以是任何类型的值。
  • void:表示没有任何类型,通常用于函数没有返回值的情况。
  • never:表示永远不会返回的类型,通常用于抛出异常或者死循环的函数。

下面我们一一详细讲解。

6.3 number 类型

number 类型表示所有的数字,包括整数和浮动小数。TypeScript 使用 number 来表示所有的数字。

示例:

let age: number = 25;  // 整数类型
let price: number = 19.99;  // 浮动小数类型

注意,TypeScript 并不会区分整数和浮动小数,它们都使用 number 类型。你不需要额外的类型区分来表示整数和浮动小数。

6.4 string 类型

string 类型用于表示文本数据,也就是一串字符。它可以用单引号、双引号或反引号(模板字符串)来表示。

示例:

let firstName: string = "John";
let greeting: string = `Hello, ${firstName}!`;

在这个例子中,firstName 是一个普通的字符串,而 greeting 使用了模板字符串,它允许我们嵌入变量或表达式。

6.5 boolean 类型

boolean 类型用于表示布尔值,只能是 truefalse。布尔值通常用于控制逻辑流,如条件语句或循环等。

示例:

let isActive: boolean = true;
let isCompleted: boolean = false;

布尔类型在控制结构中非常常见,像 if 语句或 while 循环都需要布尔值来决定是否执行某些操作。

6.6 null 和 undefined 类型

nullundefined 是 TypeScript 中的两种特殊类型。null 表示一个空值,而 undefined 表示一个变量未定义的状态。你可以明确将某个变量设为 nullundefined,也可以将它们作为类型使用。

示例:

let notAssigned: null = null;  // 明确赋值为 null
let notDefined: undefined = undefined;  // 明确赋值为 undefined

在 TypeScript 中,nullundefined 是独立的类型,默认情况下它们不会自动赋值给其他类型的变量。如果你需要将一个变量声明为可以是 nullundefined,你可以使用联合类型:

let value: string | null = null;  // value 可以是 string 或 null

6.7 any 类型

any 类型表示任意类型的值,它允许我们跳过 TypeScript 的类型检查。也就是说,当你使用 any 类型时,TypeScript 不会对该变量做类型检查,允许任何类型的赋值。

any 类型通常用于动态类型的数据或者第三方库,尤其是在迁移 JavaScript 代码时。

示例:

let value: any = 42;
value = "Hello, TypeScript!";
value = true;

虽然 any 类型非常灵活,但过多使用会失去 TypeScript 静态类型检查的优势。所以,通常我们建议尽量避免使用 any,除非你非常确定这个值可以是任何类型。

6.8 void 类型

void 类型表示没有任何类型,通常用于函数的返回值类型,表示函数没有返回值。比如,常见的事件处理函数或其他没有返回值的函数通常使用 void 类型。

示例:

function logMessage(message: string): void {
  console.log(message);
}

在上面的例子中,logMessage 函数没有返回值,因此它的返回类型是 void。你也可以将 void 类型看作“没有类型”的意思。

6.9 never 类型

never 类型表示永远不会有值的类型。通常用于那些永远不会正常结束的函数,如抛出异常或进入死循环的函数。

示例:

function throwError(message: string): never {
  throw new Error(message);
}

在这个例子中,throwError 函数会抛出一个错误并终止函数的执行,因此它的返回类型是 nevernever 类型表示该函数不会正常返回。

6.10 联合类型

TypeScript 允许我们为一个变量指定多个类型,这叫做 联合类型。联合类型用竖线 (|) 来分隔多个类型,表示该变量可以是这些类型中的任何一个。

示例:

let value: string | number;
value = "Hello, world!";  // 合法
value = 42;  // 合法

在这个例子中,value 可以是 string 类型或 number 类型。你可以为一个变量指定多个可能的类型,这在某些情况下非常有用,比如在处理用户输入时,类型可能不确定。

6.11 类型推断

TypeScript 会根据赋值自动推断变量的类型,这样你在编写代码时可以省略类型注解。类型推断是 TypeScript 提供的一种非常方便的功能,它能让你写出简洁又安全的代码。

示例:

let name = "Alice";  // TypeScript 推断出 name 的类型是 string
let age = 30;  // TypeScript 推断出 age 的类型是 number

虽然 TypeScript 自动推断出类型,但是你仍然可以显式地指定类型来避免类型推断的不准确性。

6.12 小结:基本类型

今天我们学习了 TypeScript 中的基本类型及如何进行类型注解。我们从 numberstringboolean 等常见类型开始,了解了如何在变量、函数参数和返回值中使用类型注解。除此之外,我们还介绍了 anyvoidnever 等特殊类型,以及如何使用联合类型来处理多种类型的情况。

类型注解不仅能帮助你捕获潜在的错误,还能使你的代码更加清晰、易于理解。如果你还不太熟悉这些类型,赶紧在你的 TypeScript 项目中实践一遍吧!

后面,我们将讨论 TypeScript 中的对象类型和数组类型,继续带你深入了解 TypeScript 强大的类型系统。敬请期待!


轻口味
25.2k 声望4.2k 粉丝

移动端十年老人,主要做IM、音视频、AI方向,目前在做鸿蒙化适配,欢迎这些方向的同学交流:wodekouwei