TypeScript 基础入门：安装、编译与核心类型使用

简介

TypeScript（简称 TS）是由微软开发的开源编程语言，是 JavaScript 的严格超集。它在 JavaScript 的基础上添加了类型支持（Type），意味着所有合法的 JavaScript 代码同时也是合法的 TypeScript 代码。TS 的主要目的是在编译阶段捕捉类型错误，从而在运行时避免大多数低级错误，特别适合中大型项目开发。

环境准备与安装

浏览器和 Node.js 原生只能识别 JavaScript 代码，无法直接运行 TypeScript。因此，首要步骤是将 TypeScript 代码编译（转译）为 JavaScript 代码。这通常通过全局安装的 tsc（TypeScript Compiler）工具完成。

第1步：安装 TypeScript 编译器

确保系统中已安装 Node.js。打开终端（命令行工具），执行以下任一命令进行全局安装：

• 使用 npm：

npm install -g typescript

• 使用 yarn：

yarn global add typescript

注意：在 macOS 或 Linux 系统中，若遇到权限拒绝错误，请在命令前添加 sudo 获取管理员权限，例如：sudo npm install -g typescript。

第2步：验证安装

安装完成后，在终端输入以下命令检查版本号，确认安装成功：

tsc -v

若输出类似 Version x.x.x 的信息，则表明环境配置无误。

从 Hello World 看编译流程

让我们通过一个简单示例，理解 TypeScript 是如何工作并将代码转换为 JavaScript 的。

第3步：编写 TypeScript 代码

创建一个名为 hello.ts 的文件，内容如下：

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

在此代码中，: string 明确指定了 person 参数的类型为字符串。如果传入非字符串类型（如数字），TypeScript 编译器会立即报错。

第4步：执行编译命令

在终端中，进入该文件所在目录，运行编译命令：

tsc hello.ts

编译成功后，同级目录下会生成一个对应的 hello.js 文件。

第5步：对比生成的 JavaScript 代码

打开新生成的 hello.js，内容如下：

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

可以看出，所有的类型标注（如 : string）已被移除。这是因为 TypeScript 的类型系统是静态类型检查，仅在编译期间生效，用于代码检查和辅助开发；生成的 JavaScript 文件不包含任何类型信息，可直接在任何支持 ES3/ES5+ 的环境中运行。

TypeScript 核心类型概述

TypeScript 的类型系统非常丰富，主要可分为 JavaScript 原有的基础类型和 TS 新增的高级类型。

JS 原有基础类型

这些类型名称与 JavaScript 完全一致，写法规范：

• 原始类型：number（数字）、string（字符串）、boolean（布尔值）、null、undefined。
• 复杂类型：数组（Array）、对象（Object）、函数（Function）等。

TS 新增特性类型

为了更精确地描述数据结构，TS 引入了以下关键类型：

1. 联合类型 (Union Types)

使用 | 分隔，表示变量可以是多种类型之一。例如，某个参数既可能是字符串也可能是数字：

let id: string | number;

2. 接口 (Interfaces)

接口用于定义对象的形状（结构）。它非常灵活，通常首字母大写，部分规范建议加 I 前缀。接口约束对象必须包含指定的属性和方法：

interface User {
    name: string;
    age: number;
}

3. 元组 (Tuples)

元组是已知长度和类型的数组。普通数组可以任意长度且元素类型可能不严谨，而元组精确规定每个位置的类型。例如，长度为 2 的元组，第一个是字符串，第二个是数字：

let tuple: [string, number];
tuple = ['hello', 10]; // 正确
tuple = [10, 'hello']; // 错误

4. 枚举 (Enums)

用于定义命名常量，限定取值范围。例如定义一周的天数或颜色：

enum Color { Red, Green, Blue }
let c: Color = Color.Green;

5. 其他实用类型

• any：任意类型，关闭该变量的类型检查（需谨慎使用）。
• void：常用于函数返回值，表示无返回值。
• 字面量类型：如 let dir: 'left' | 'right'，限制值只能是特定字符。

高级特性：类型别名与泛型

类型别名 (Type Aliases)

使用 type 关键字为类型创建别名，可用于简化复杂的联合类型或函数签名：

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

泛型 (Generics)

泛型允许在定义函数、接口或类时不预先指定具体类型，而在使用时再指定。这使得代码具有更高的复用性：

// 基本泛型应用
let list1: Array<number> = [1, 2, 3];

// 自定义泛型函数
function makeTuple<T, Y>(x: T, y: Y): [T, Y] {
    return [x, y];
}

const v1 = makeTuple(1, 'one');   // 推断为 [number, string]
const v2 = makeTuple(true, 1);    // 推断为 [boolean, number]

泛型 T 和 Y 是占位符，调用时编译器会根据传入的参数自动推断具体类型，既保证了安全性，又保留了灵活性。

总结

TypeScript 通过引入静态类型检查，显著提升了代码的可读性和健壮性。掌握 tsc 编译流程，理解基础类型、接口、联合类型及泛型的核心用法，是成为高效 TS 开发者的必经之路。随着项目复杂度的增加，合理的类型设计将成为维护代码的重要基石。

以上就是 TypeScript 基础使用教程的详细内容，更多关于 TypeScript 进阶技巧与最佳实践的资料请关注本站其它相关文章！