TypeScript快速入门：30分钟上手指南
开篇：TypeScript 是什么，为什么你需要它？
如果你是刚入门前端开发的初学者，可能听说过 JavaScript，它是网页开发中最基础、也是最核心的编程语言。但是你有没有遇到过这样的问题：
- 明明写得很认真，但代码运行出错却找不着原因；
- 合作开发时别人写的函数看不懂，不知道该传什么参数；
- 写了上千行代码后，突然改一个地方就全乱了。
这时候，就轮到我们的主角——TypeScript 登场了！
TypeScript = JavaScript + 类型系统
简单来说，TypeScript 是 JavaScript 的“加强版”，它在保留 JavaScript 全部功能的基础上，增加了一个叫“类型检查”的功能。这个功能就像是一台提前帮你查错的机器，在你写代码的时候就能告诉你哪里可能会出问题，而不是等程序跑起来才发现。
举个例子：
function sayHello(name) {
console.log("Hello, " + name);
}
sayHello(123); // 这里传了个数字，但函数本意是接收字符串
JavaScript 不会报错，但 TypeScript 能提前发现问题，提示你 name 应该是一个字符串而不是数字。
是不是很贴心？接下来我们就开始一步步学习 TypeScript，并动手做一个小项目练手。
环境准备：搭建你的第一个 TypeScript 开发环境
要写 TypeScript 代码，我们需要几个工具来运行和编译它。别担心，这些步骤其实很简单。
第一步：安装 Node.js 和 npm
✅ 安装包下载地址：https://nodejs.org/
推荐选择长期支持版（LTS）
安装完成后，在终端输入下面命令查看是否安装成功：
node -v # 查看 Node.js 版本
npm -v # 查看 npm 版本
如果都能显示版本号，说明安装成功啦！
第二步：创建项目文件夹
在你喜欢的地方新建一个文件夹，比如叫做 my-ts-project，然后进入该目录：
mkdir my-ts-project
cd my-ts-project
初始化 npm（用于管理依赖）：
npm init -y
第三步：安装 TypeScript 及编译器
运行以下命令安装 TypeScript：
npm install typescript --save-dev
接着安装 TypeScript 编译器（tsc），它可以将 .ts 文件转成浏览器能识别的 .js 文件：
npm install ts-node --save-dev
为了方便调试，我们也安装一个运行脚本的工具：
npm install nodemon --save-dev
第四步：配置 TypeScript
运行以下命令生成配置文件 tsconfig.json：
npx tsc --init
这会在当前目录下自动生成一个配置文件，你可以先不用管里面的内容。
第五步：添加启动脚本
打开 package.json 文件，在 "scripts" 中添加以下内容：
"start": "ts-node index.ts"
这样，你就可以用下面这条命令运行你的 TypeScript 文件了：
npm start
验证一下是否一切正常
在项目根目录下创建一个 index.ts 文件，内容如下：
console.log("Hello, TypeScript!");
然后运行命令：
npm start
如果终端输出了：
Hello, TypeScript!
恭喜！你的 TypeScript 开发环境已经搭建成功了 😄
核心概念：用通俗的语言讲明白 TypeScript 基础知识
现在我们开始讲解一些 TypeScript 的基本概念，每个知识点都会配一个简单的示例，确保你能轻松理解。
1. 类型注解：告诉 TypeScript 你要放什么进去
JavaScript 的变量可以存任何类型的值，比如数字、字符串、对象……但 TypeScript 更“严谨”一点，它希望你一开始就告诉它：“这个变量是用来干嘛的”。
示例：
let age: number = 25;
let name: string = "Tom";
let isStudent: boolean = true;
这里给变量加了类型注解（: number, : string, : boolean）。如果不这样做，TypeScript 也能自动推断出来，但显式标注更清晰。
✅ 小贴士：如果你试图把字符串赋给 age，TypeScript 就会报错提醒你。
2. 函数参数与返回值的类型声明
我们在定义函数时也可以加上类型信息。
示例：
function sum(a: number, b: number): number {
return a + b;
}
console.log(sum(3, 4)); // 正确
console.log(sum('3', 4)); // 报错：参数 'a' 不是 number 类型
3. 使用联合类型处理多种可能性
有时候一个变量可能是几种类型之一，比如可能是数字也可能是字符串。
这时我们可以用联合类型符号 | 来表示。
示例：
let score: number | string = 90;
score = "A"; // 也允许字符串
4. 数组的类型定义
数组也有类型之分。可以使用两种方式来标注数组类型：
元素类型[]Array<元素类型>
示例：
let names: string[] = ["Alice", "Bob"];
let numbers: Array<number> = [1, 2, 3];
5. 对象类型：明确结构
对象类型让你可以在定义对象的同时注明每个字段的类型。
示例：
let person: { name: string; age: number } = {
name: "Tom",
age: 20
};
如果缺少某个属性或类型不对，TypeScript 也会提醒你。
6. 类型别名（type）
为了避免重复写复杂的类型定义，可以使用 type 来为类型起个别名。
示例：
type Person = {
name: string;
age: number;
};
let user: Person = {
name: "Jerry",
age: 22
};
7. any 与 unknown：尽量避免使用
有些时候你会拿到不确定的数据类型，可以用 any 或 unknown。
但要注意的是：
any：相当于完全放弃类型检查（不推荐）unknown：虽然不确定类型，但在使用前必须进行类型判断（推荐做法）
新手上路常问的问题：
Q1：我能不能不写类型？
当然可以，但那就失去了 TypeScript 最大的优势。类型越明确，错误就越少。
Q2：我之前学过 JavaScript，是不是很多语法都一样？
是的，几乎一模一样。只是多了一些类型相关的语法。
实战项目：写一个简单的天气查询小程序
我们现在来实战写一个控制台版的“天气查询”程序，帮助我们练习如何使用 TypeScript。
第一步：需求分析
我们要实现的功能是：
- 用户输入城市名称
- 输出模拟的天气信息，例如：“上海今天的温度是 20°C。”
我们会用一个函数模拟获取天气数据的过程。
第二步：编写代码
打开 index.ts，写下如下代码：
// 模拟从 API 获取天气数据
function getWeather(city: string): { city: string; temperature: number } {
const weatherData = {
beijing: 18,
shanghai: 20,
guangzhou: 25
};
const temperature = weatherData[city.toLowerCase()];
if (!temperature) {
throw new Error(`找不到 ${city} 的天气信息`);
}
return {
city: city.charAt(0).toUpperCase() + city.slice(1),
temperature
};
}
// 主函数
function main() {
const city = process.argv[2]; // 从命令行读取参数
try {
const weather = getWeather(city);
console.log(`${weather.city} 今天的温度是 ${weather.temperature}°C`);
} catch (error) {
console.error(error.message);
}
}
main();
第三步：运行测试
在终端中输入：
npm start shanghai
输出结果应该是：
Shanghai 今天的温度是 20°C
试着输入一个不存在的城市，比如 moscow：
npm start moscow
会输出错误信息：
找不到 moscow 的天气信息
总结一下这个项目的亮点：
- 使用了函数参数和返回值类型定义
- 练习了对象和异常处理
- 利用了模块化的结构组织代码
这是一个小小的完整项目，适合新手巩固所学知识。
常见问题解答：TypeScript 新人总踩的坑
Q1：为什么说 TypeScript “类型安全”？
TypeScript 在编码阶段就做了一次类型检查，防止很多常见错误，比如把字符串当成数字用、调用不存在的方法等等。
Q2：TypeScript 编译出来的 JS 文件在哪？
默认情况下不会自动生成 .js 文件，除非你执行了 tsc index.ts。如果你想让它自动编译，可以在 tsconfig.json 里设置 "outDir"。
Q3：vscode 写 TypeScript 没有智能提示怎么办？
确认以下几点：
- 是否安装了 TypeScript 插件？
- 是否打开了
tsconfig.json？ - 是否保存为
.ts文件？
Q4：什么时候用 any，什么时候用 unknown？
尽量优先使用 unknown，因为：
any放弃所有类型检查，容易出错；unknown强制你在使用前做类型判断，更安全。
学习建议：接下来你可以怎么学？
学完这篇快速入门之后，你可以继续深入以下几个方向：
1. 类与面向对象编程（OOP）
掌握 class、继承、修饰符等知识，适合构建大型应用。
2. 泛型与高级类型
学会写更通用、可复用的组件和函数。
3. 配合 React/Vue 使用
TypeScript 已成为现代前端框架的标准搭配，比如 Vue3 和 React 官方都推荐使用 TS。
4. 使用第三方类型库（如 @types/xxx）
当使用非 TypeScript 写的库时，可通过类型定义文件获得类型提示。
结语：迈出你的第一步
虽然这是你第一次接触 TypeScript，但从现在开始，你已经掌握了它的基本用法，并能写出有类型检查的代码了。
别忘了，学习编程最重要的不是记住了多少语法，而是不断动手实践。试着去改写你之前写过的 JavaScript 项目，加上类型信息，你会越来越得心应手。
祝你学习愉快，未来成为一名优秀的开发者 🚀
评论 0