TypeScript 完全入门指南

• 什么是 TypeScript？
• 基础类型
• 数组和元组
• 联合类型
• 函数
• 接口
• 类
• 泛型
• 实际应用
• 学习建议
• 常见问题

什么是 TypeScript？

TypeScript 就像 JavaScript 的"升级版"，给 JavaScript 加上了很多好用的功能：

• ✅ 类型检查：像老师一样帮你检查代码错误
• ✅ 更好用的代码提示：写代码时自动告诉你有哪些选项
• ✅ 更适合大项目：多人合作写代码更轻松

1. 最基础的类型（就像教小朋友认字）

// 数字类型（只能放数字）
let age: number = 10;
age = "10岁"; // ❌ 会报错！

// 文字类型（只能放文字）
let name: string = "小明";
name = true; // ❌ 会报错！

// 对错类型（只能true/false）
let isStudent: boolean = true;
isStudent = "是"; // ❌ 会报错！

// 万能类型（什么都能放，但不推荐用）
let anything: any = 123;
anything = "随便放"; // ✅ 不会报错

2. 数组和元组（就像装东西的盒子）

// 数字盒子（只能装数字）
let numbers: number[] = [1, 2, 3];
numbers.push("4"); // ❌ 不能放文字

// 文字盒子（只能装文字）
let names: Array<string> = ["小红", "小刚"];

// 固定位置的盒子（元组）
let person: [string, number] = ["小明", 10];
person = [10, "小明"]; // ❌ 位置不能错！

3. 可以选不同类型的变量（像多功能的瑞士军刀）

let id: string | number = "ABC123";
id = 123; // ✅ 可以换成数字
id = true; // ❌ 不能是其他类型

// 给类型取个外号（方便记忆）
type 用户ID = string | number;
let 我的ID: 用户ID = "XYZ789";

4. 函数（像做菜的食谱）

// 普通函数
function 加法(a: number, b: number): number {
  return a + b;
}
加法(1, 2); // ✅ 返回3
加法("1", 2); // ❌ 不能加文字

// 箭头函数
const 打招呼 = (名字: string): string => {
  return `你好, ${名字}!`;
};

// 可选参数
function log(message: string, prefix?: string) {
  console.log(prefix ? `${prefix}: ${message}` : message)
}

5. 接口（像填表格的模板）

// 定义一个用户表格
interface 用户 {
  id: number;      // 必须填
  名字: string;     // 必须填
  邮箱?: string;    // 可填可不填（带问号）
}

// 按照模板填写
const 小明: 用户 = {
  id: 1,
  名字: "小明"
  // 可以不写邮箱
};

6. 类（像制造玩具的模具）

class 人 {
  // 构造函数（制造时需要的材料）
  constructor(public 名字: string, private 年龄: number) {}
  
  // 方法（这个玩具能做什么）
  打招呼() {
    return `我是${this.名字}`;
  }
}

const 小红 = new 人("小红", 12);
console.log(小红.打招呼()); // "我是小红"
console.log(小红.年龄);    // ❌ 不能直接看私有属性

7. 泛型（像万能模具）

// 简单的泛型函数
function identity<T>(arg: T): T {
  return arg
}

// 使用
let output = identity<string>("hello")

// 泛型接口
interface ApiResponse<T> {
  code: number
  data: T
  message: string
}

// 使用
const userResponse: ApiResponse<User> = {
  code: 200,
  data: { id: 1, name: "王五" },
  message: "success"
}

// 一个可以复制任何形状的模具
function 复制<T>(东西: T): T {
  return 东西;
}

const 数字 = 复制<number>(10); // 现在模具只能复制数字
const 文字 = 复制<string>("hello"); // 现在模具只能复制文字

8. 实际应用例子

网页开发（React + TypeScript）

interface 按钮属性 {
  文字: string;
  颜色?: string;
  点击?: () => void;
}

const 我的按钮: React.FC<按钮属性> = ({ 文字, 颜色 = "blue", 点击 }) => (
  <button style={{ color }} onClick={点击}>
    {文字}
  </button>
);

后端开发（Node.js + TypeScript）

import express from "express";
const 应用 = express();

应用.get("/", (请求, 响应) => {
  response.send("欢迎来到TypeScript世界！");
});

应用.listen(3000, () => {
  console.log("服务器启动了");
});

学习建议

1. 学习路径：

   • 基础类型 → 函数和接口 → 类 → 泛型
   • 先写简单代码，再逐步增加复杂度

2. 练习方法：

   • 将现有 JavaScript 项目迁移到 TypeScript
   • 使用 VSCode 获得更好的类型提示

3. 资源推荐：

   • TypeScript 官方文档
   • TypeScript Playground（在线练习）

常见问题

🤔 TypeScript 会影响运行性能吗？

不会！TypeScript 只在编译时进行类型检查，运行时仍然是普通 JavaScript。

🛠 如何开始使用？

1. 安装：npm install -g typescript
2. 初始化项目：tsc --init
3. 编写 .ts 文件
4. 编译：tsc

🔧 遇到类型错误怎么办？

1. 仔细阅读错误信息
2. 使用类型断言（谨慎）

 let value: any = "hello"
 let length: number = (value as string).length

3. 检查类型定义是否正确