基础入门
TypeScript 简介与环境
了解 TypeScript 是什么、为什么需要它，配置第一个 TS 项目
TypeScript 简介与环境
TypeScript 是 JavaScript 的超集，由微软开发。它添加了静态类型系统，让你在编码阶段就能发现错误。
学完本章你将： 了解 TS 是什么、为什么用它、配置第一个 TS 项目。
为什么需要 TypeScript
typescript
// JavaScript —— 运行时才报错
function add(a, b) {
return a + b;
}
add(1, "2"); // "12" —— 不是你想要的结果！
// TypeScript —— 编译时就报错
function add(a: number, b: number): number {
return a + b;
}
// add(1, "2"); // ❌ 编译错误！TypeScript 的核心优势：
| 优势 | 说明 |
|---|---|
| 🔍 静态检查 | 编码时发现类型错误，减少 bug |
| 📖 智能提示 | 更好的 IDE 自动补全和文档 |
| 🛠️ 重构安全 | 重命名、改签名时自动更新所有引用 |
| 📘 自文档化 | 类型即文档，代码即说明 |
环境搭建
bash
# 全局安装
npm install -g typescript
# 验证版本
tsc --version
# 初始化项目
mkdir my-ts-project && cd my-ts-project
tsc --init第一个 TypeScript 程序
typescript
// hello.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message = greet("TypeScript");
console.log(message);
// 编译
// $ tsc hello.ts
// $ node hello.jstsconfig.json 快速配置
json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"strict": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src"]
}TS 与 JS 的关系
所有合法的 JavaScript 都是合法的 TypeScript。TS 只是在 JS 基础上添加了类型标注，编译后输出纯 JS。
typescript
// .ts 文件
const name: string = "Alice";
// 编译后 → .js 文件
const name = "Alice";