引言:为什么要在2025年学习TypeScript?
前端开发的世界日新月异,但有一点始终不变——TypeScript 继续巩固其作为大型项目事实标准的地位。在2025年,它已不仅仅是“JavaScript的超集”,而是一个完整的工具,帮助您编写更可靠、可预测且可扩展的代码。无论您是初学者开发者,还是从纯JavaScript转型,本指南将带您完成从安装到编写有意义代码的第一步。
在本文中,我们将探讨实际方面:如何配置环境、掌握基本类型、了解接口和泛型。您将发现TypeScript并不会使开发复杂化,反而能为您节省数小时的调试时间。
1. 2025年TypeScript的安装与配置
第一步是安装TypeScript编译器。在2025年,最便捷的方式是使用Node.js和包管理器npm(或yarn)。请确保已安装Node.js 20+版本。
# 全局安装TypeScriptnpm install -g typescript
# 检查版本tsc --version现在,为项目创建一个文件夹并初始化它:
mkdir my-first-tscd my-first-tsnpm init -y接下来,创建配置文件tsconfig.json。这是任何TypeScript项目的核心,您可以在其中指定编译选项。
tsc --init执行命令后,会出现一个包含众多选项的文件。开始时,保留默认设置即可。关键是确保strict: true参数已启用(默认已启用)。这将迫使您编写更高质量的代码。
2025年的项目结构通常包含src(源代码)和dist(编译后的文件)文件夹。创建它们:
mkdir src dist并在tsconfig.json中添加:
{ "compilerOptions": { "outDir": "./dist", "rootDir": "./src", "strict": true, "target": "ES2022", "module": "ESNext" }, "include": ["src/**/*"]}现在,创建第一个文件src/index.ts并编写简单代码:
// src/index.tsfunction greet(name: string): string { return `你好,${name}!欢迎来到TypeScript。`;}
const userName: string = "阿列克谢";console.log(greet(userName));使用tsc命令编译它。在dist文件夹中会出现index.js。通过Node.js运行它:node dist/index.js。您将看到问候语。恭喜,您已经编写了第一个TypeScript程序!
2. 类型基础:静态类型化的实践
TypeScript的主要优势在于其类型系统。在2025年,它变得更加灵活。让我们看看您每天都会用到的基本类型。
基本类型
这些包括string、number、boolean、null、undefined、symbol和bigint。如果类型显而易见,TypeScript会自动推断:
let age: number = 25; // 显式指定let name = "玛丽亚"; // TypeScript会推断为stringlet isActive = true; // 推断为boolean数组和元组
TypeScript中的数组可以是同类型的,也可以是不同类型的(元组)。
// 数字数组let scores: number[] = [10, 20, 30];
// 另一种写法let scores2: Array<number> = [10, 20, 30];
// 元组(固定长度和类型)let person: [string, number] = ["伊万", 30];any和unknown类型
避免使用any——它会关闭类型检查。如果类型未知,请改用unknown:
博客
书籍推荐
推荐阅读