TypeScript 快速上手指南（可直接复制粘贴到博客）
TypeScript 是微软开发的 JavaScript 超集，在 JS 基础上增加静态类型系统，能提前发现代码错误、提升代码可维护性，是大型前端项目的标配（Vue3、React 均推荐使用）。以下内容涵盖 TypeScript 核心语法、实战示例和工程化配置，可直接复制到博客，零基础也能快速上手。
一、快速上手：环境搭建（两种方式）
方式 1：在线体验（无需本地配置）
直接打开 TypeScript Playground，在线编写、编译 TS 代码，适合快速学习。
方式 2：本地环境（推荐实战）
bash
运行
1. 全局安装TypeScript
npm install -g typescript
2. 创建TS文件（如index.ts）
echo "let msg: string = 'Hello TypeScript';" > index.ts
3. 编译TS为JS（生成index.js）
tsc index.ts
4. 运行JS文件
node index.js
方式 3：HTML 中直接使用（CDN 版，适合演示）
html
预览
二、核心语法：静态类型（TS 精髓）
TypeScript 核心是「类型注解」，为变量 / 函数 / 对象指定类型，提前拦截类型错误，直接复制示例即可运行：
- 基础类型
typescript
运行
// 字符串
let username: string = "张三";
// 数字
let age: number = 20;
// 布尔
let isStudent: boolean = true;
// 空值（无返回值）
function sayHello(): void {
console.log("Hello TS");
}
// 任意类型（不推荐，失去TS类型校验意义）
let anyValue: any = "任意值";
anyValue = 123; // 不会报错
// 数组（两种写法）
let arr1: number[] = [1, 2, 3];
let arr2: Array = ["a", "b", "c"];
// 元组（固定长度+类型的数组）
let tuple: [string, number] = ["张三", 20];
// tuple = [20, "张三"]; // 报错：类型顺序不匹配
// 枚举（自定义常量集合）
enum Gender {
Male = 1,
Female = 2,
Unknown = 0
}
let userGender: Gender = Gender.Male;
console.log(userGender); // 输出1
// 空/未定义
let nullVal: null = null;
let undefinedVal: undefined = undefined;
- 函数类型（参数 + 返回值注解）
typescript
运行
// 基础函数类型
function add(a: number, b: number): number {
return a + b;
}
add(1, 2); // 正确
// add(1, "2"); // 报错：参数2不是数字
// 可选参数（加?）
function getUserInfo(name: string, age?: number): string {
return age ? ${name} - ${age}岁 : name;
}
getUserInfo("张三"); // 正确
getUserInfo("张三", 20); // 正确
// 默认参数
function greet(name: string = "游客"): void {
console.log(你好，${name});
}
// 剩余参数
function sum(...nums: number[]): number {
return nums.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3); // 输出6
// 函数类型别名
type MathFunc = (a: number, b: number) => number;
const multiply: MathFunc = (a, b) => a * b;
- 接口（Interface）：约束对象 / 类结构
typescript
运行
// 基础接口（约束对象）
interface User {
id: number;
name: string;
age?: number; // 可选属性
readonly gender: string; // 只读属性
}
// 使用接口
let user: User = {
id: 1,
name: "张三",
gender: "男"
};
// user.gender = "女"; // 报错：只读属性不可修改
// 接口继承
interface Student extends User {
className: string; // 新增属性
}
let student: Student = {
id: 2,
name: "李四",
gender: "男",
className: "前端1班"
};
// 函数接口
interface SearchFunc {
(keyword: string, page: number): boolean;
}
const search: SearchFunc = (keyword, page) => {
console.log(搜索：${keyword}，页码：${page});
return true;
};
- 类型别名（Type）：自定义类型
typescript
运行
// 基础类型别名
type ID = number | string; // 联合类型
let userId: ID = 1001;
userId = "user_1001"; // 正确
// 对象类型别名
type Product = {
id: ID;
name: string;
price: number;
status: "on_sale" | "off_sale"; // 字面量类型
};
let product: Product = {
id: "prod_001",
name: "TS教程",
price: 99,
status: "on_sale"
};
// 交叉类型（合并多个类型）
type Person = {
name: string;
age: number;
};
type Contact = {
phone: string;
email: string;
};
type UserProfile = Person & Contact; // 同时包含Person和Contact的属性
let profile: UserProfile = {
name: "王五",
age: 25,
phone: "13800138000",
email: "wangwu@example.com"
};
类（Class）：面向对象编程
typescript
运行
// 基础类
class Person {
// 类属性类型注解
name: string;
age: number;// 构造函数
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}// 方法
sayHello(): void {
console.log(我是${this.name}，今年${this.age}岁);
}
}
// 实例化
const person = new Person("张三", 20);
person.sayHello();
// 类的访问修饰符
class Employee extends Person {
private salary: number; // 私有属性（仅类内部可访问）
protected department: string; // 受保护属性（类内部+子类可访问）
public id: number; // 公共属性（默认）
constructor(name: string, age: number, salary: number, department: string, id: number) {
super(name, age); // 调用父类构造函数
this.salary = salary;
this.department = department;
this.id = id;
}
getSalary(): number {
return this.salary; // 私有属性内部可访问
}
}
const emp = new Employee("李四", 25, 10000, "研发部", 1001);
// console.log(emp.salary); // 报错：私有属性不可外部访问
console.log(emp.getSalary()); // 正确：通过方法访问
- 泛型（Generic）：复用类型逻辑
泛型是 TS 高级特性，解决「类型不固定」的复用问题，核心是「类型参数化」：
typescript
运行
// 基础泛型函数（复用数组反转逻辑）
function reverse(arr: T[]): T[] {
return arr.reverse();
}
// 数字数组
reverse([1, 2, 3]); // 输出[3,2,1]
// 字符串数组
reverse(["a", "b", "c"]); // 输出["c","b","a"]
// 泛型接口
interface Result {
code: number;
data: T;
msg: string;
}
// 接口复用：不同数据类型的返回结果
type UserResult = Result;
type ProductResult = Result;
// 泛型类
class Cache {
private data: T[] = [];
add(item: T): void {
this.data.push(item);
}
get(index: number): T {
return this.data[index];
}
}
// 缓存数字
const numCache = new Cache();
numCache.add(1);
// 缓存用户
const userCache = new Cache();
userCache.add({ id: 1, name: "张三", gender: "男" });
三、实战示例：完整 TypeScript 代码
直接复制以下代码到 index.ts，编译运行即可体验 TS 核心特性：
typescript
运行
// 1. 定义接口
interface User {
id: number | string;
name: string;
age?: number;
hobbies: string[];
}
// 2. 定义泛型函数
function formatUser(user: T): string {
const ageStr = user.age ? ，年龄${user.age}岁 : "";
const hobbiesStr = user.hobbies.length > 0 ? ，爱好：${user.hobbies.join("、")} : "";
return 用户ID：${user.id}，姓名：${user.name}${ageStr}${hobbiesStr};
}
// 3. 定义类
class UserService {
private users: User[] = [];
// 添加用户
addUser(user: User): void {
this.users.push(user);
}
// 获取用户
getUserById(id: number | string): User | undefined {
return this.users.find(user => user.id === id);
}
// 格式化所有用户
formatAllUsers(): string[] {
return this.users.map(user => formatUser(user));
}
}
// 4. 业务逻辑
const userService = new UserService();
// 添加用户
userService.addUser({
id: 1,
name: "张三",
age: 20,
hobbies: ["编程", "阅读"]
});
userService.addUser({
id: "2",
name: "李四",
hobbies: ["运动"]
});
// 获取并格式化用户
const user1 = userService.getUserById(1);
if (user1) {
console.log(formatUser(user1));
}
// 格式化所有用户
console.log("所有用户：", userService.formatAllUsers());
编译运行：
bash
运行
编译TS为JS
tsc index.ts
运行JS
node index.js
输出结果：
plaintext
用户ID：1，姓名：张三，年龄20岁，爱好：编程、阅读
所有用户： [
'用户ID：1，姓名：张三，年龄20岁，爱好：编程、阅读',
'用户ID：2，姓名：李四，爱好：运动'
]
四、TS 工程化配置（tsconfig.json）
大型项目需通过 tsconfig.json 配置编译规则，直接复制以下配置到项目根目录：
json
{
"compilerOptions": {
"target": "ES6", // 编译目标JS版本
"module": "ESNext", // 模块系统
"outDir": "./dist", // 编译输出目录
"rootDir": "./src", // 源码目录
"strict": true, // 开启严格模式（推荐）
"esModuleInterop": true, // 兼容CommonJS/ES模块
"skipLibCheck": true, // 跳过库文件类型检查
"forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
"resolveJsonModule": true, // 支持导入JSON文件
"sourceMap": true // 生成sourceMap（方便调试）
},
"include": ["src/*/"], // 包含的文件
"exclude": ["node_modules", "dist"] // 排除的文件
}
五、TypeScript 核心优势与避坑指南
- 核心优势
静态类型校验：编码阶段发现错误，减少线上 BUG；
代码提示完善：编辑器（VSCode）自动补全、类型提示，提升开发效率；
代码可维护性：类型注解即文档，团队协作更清晰；
兼容 JS 生态：所有 JS 代码可直接作为 TS 代码运行，支持渐进式迁移。 - 常见坑点
any 类型滥用：过度使用 any 会失去 TS 类型校验的意义，尽量用具体类型 / 泛型替代；
类型断言滥用：as 断言仅欺骗编译器，不会改变运行时类型，需谨慎使用；
typescript
运行
// 不推荐：强制断言可能导致运行时错误
let num: any = "123";
let num2 = num as number;
接口 vs 类型别名：
接口（interface）：适合扩展（继承）、约束对象 / 类；
类型别名（type）：适合联合类型、交叉类型、基础类型复用；
泛型过度复杂：简单场景无需泛型，避免过度设计。 - 与框架结合
Vue3：默认支持 TS，组件 / 组合式 API 可直接添加类型注解；
React：通过 @types/react 提供类型支持，函数组件 / 类组件均可使用 TS；
Node.js：通过 @types/node 提供内置模块类型定义。
以上内容可直接复制到博客编辑器（开启代码块高亮），替换示例中的业务逻辑，即可快速掌握 TypeScript 核心用法。TS 是前端进阶的必备技能，掌握静态类型思维，能显著提升大型项目的开发效率和可维护性。
