2025年从零开始学TypeScript:实战指南

面向初学者的在线Python训练器

轻松学习Python,无需理论负担。在浏览器中直接解决带自动检查的实践任务,无需安装任何东西。

开始课程

引言:为什么要在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:



                
                

博客

书籍推荐