好的！以下是一份详细的 TypeScript 教程博客，包含代码示例、解释、图表和表情，帮助读者轻松上手并深入理解 TypeScript 的核心概念。🎉
TypeScript 是 JavaScript 的超集，添加了静态类型系统
目录 📚
1. 什么是 TypeScript？
TypeScript 是 JavaScript 的超集，由 Microsoft 开发，通过添加静态类型系统和高级语法特性，让代码更健壮、易维护。最终会被编译成纯 JavaScript。
// 简单示例：类型注解 function greet(name: string): string { return `Hello, ${name}! 👋`; } console.log(greet("Alice")); // 输出: Hello, Alice! 👋
2. 为什么使用 TypeScript？
- 🛡️ 类型安全：编译时捕捉错误，减少运行时崩溃。
- 🧩 代码智能提示：IDE 支持更强大的自动补全。
- 🔍 可读性：显式类型注解让代码意图更清晰。
- ⚡ 渐进式：可逐步迁移现有 JavaScript 项目。
TypeScript 编译流程包含类型检查
3. 安装与配置
安装
npm install -g typescript
初始化项目
tsc --init # 生成 tsconfig.json
示例 tsconfig.json
{ "compilerOptions": { "target": "ES6", "module": "CommonJS", "strict": true, "outDir": "./dist" } }
编译命令
命令行编译
每写一次ts文件，开发人员每次都要编译一次ts文件
# tsc +ts文件名 # 例如：需要编译index.ts文件(后缀可省略) tsc index
左边为：编译生成的js文件
自动化编译
修改或新增ts文件后，会自动更新或生成js文件
操作步骤：
执行命令：tsc --init 后会生成tsconfig.json文件
命令：tsc --watch
作用：监视当前整个目录的文件
命令：tsc --watch index.ts
作用：监视index.ts文件
tsc --watch #监视当前整个目录的文件 tsc --watch index.ts # 监视index.ts文件
4. 基础类型与语法
基本类型声明注解
Ts继承了Js的所有对象
Ts中相较于Js多加了6个新类型：
any
unknown
never
void
tuple
enum
let isDone: boolean = false; let count: number = 42; let message: string = "TypeScript Rocks! 🎉"; // 数组与元组 let numbers: number[] = [1, 2, 3]; let tuple: [string, number] = ["Alice", 30]; // 类型推断（无需显式注解），根据数据推断类型 let inferredString = "Hello"; // 类型为 string
1. any
any ： 任意类型，想存什么存什么
不建议使用
let a :any a=10 a="abc" a=false console.log(a) // 或 let b b = 10 b="abc" b=true console.log(b)
注意点：any会穿透某一个数据的类型
let a :any a=10 let userName :string userName = a console.log(userName) console.log(typeof userName)
2. unknown
解释：未知的，不知道定义的数据到底会成什么类型
是一个类型安全的any
let a :unknown a=99 a="abc" console.log(a)
注意点：使用unknown时，需要使用其他类型的方法时，需要判断或者断言
let userName :unknown userName="张三" // 方法一 if(typeof userName=="string"){ console.log(userName.length) } // 方法二 ：断言1 let a:string a=userName as string console.log(a.length) // 方法三:断言2 let b :string b=<string>a console.log(b.length)
3. never
解释：从不
作用：
几乎不用never区直接限制变量，没有意义，不建议使用
never时ts主动推断出来的
never可以用于限制的函数值
- 没加never
function demo(){ } console.log(demo())
- 加never
function demo():never{ } console.log(demo())
4. void
解释：空
作用：
限制函数返回值 【函数返回值为空，调用者也不应依赖其返回值进行任何操作】
注意：undined是void可以接受的一种空
5. Object
结论：无论是object和Object，在实际开发中用的相对较少，因为范围太大了。
例如：object除了原始类型，其他类型都可以给它赋值。
扩展：原始类型：number/boolean/string/null/undefined
例如：Object 可以调用到Object方法的类型：
如：toString（）方法
总结：Object除了null和undefined其他的都可以存。
函数类型
// 参数和返回值类型 function add(a: number, b: number): number { return a + b; } // 可选参数与默认值 function logMessage(message: string, prefix?: string = "INFO"): void { console.log(`[${prefix}] ${message}`); }
5. 高级类型与工具
联合类型与交叉类型
type ID = string | number; let userId: ID = "ABC123"; interface Person { name: string; } interface Employee { id: number; } type EmployeePerson = Person & Employee; // 合并类型
泛型
function identity<T>(arg: T): T { return arg; } identity<string>("Hello"); // 显式指定类型 identity(42); // 类型推断为 number
实用工具类型
interface User { name: string; age: number; email?: string; } type PartialUser = Partial<User>; // 所有属性变为可选 type ReadonlyUser = Readonly<User>; // 所有属性只读
6. 面向对象编程
类与继承
class Animal { constructor(public name: string) {} // 自动分配属性 move(distance: number = 0) { console.log(`${this.name} moved ${distance}m. 🏃`); } } class Dog extends Animal { bark() { console.log("Woof! 🐶"); } } const dog = new Dog("Buddy"); dog.bark(); // Woof! 🐶 dog.move(10); // Buddy moved 10m. 🏃
接口与实现
interface Shape { area(): number; } class Circle implements Shape { constructor(private radius: number) {} area() { return Math.PI * this.radius ** 2; } }
7. 最佳实践
- ✅ 启用严格模式：在
tsconfig.json中设置"strict": true。 - 🔄 逐步迁移：将
.js文件重命名为.ts并逐步修复类型错误。 - 🛠️ 使用类型别名和接口：优先用
interface描述对象结构，用type处理复杂类型逻辑。 - ⚠️ 避免
any类型：除非必要，尽量用明确的类型注解。
总结 🎯
TypeScript 通过静态类型和现代语法，显著提升了 JavaScript 的可维护性和开发体验。从基础类型到高级泛型，再到面向对象设计，逐步掌握这些概念将让你写出更健壮的代码！
动手练习：尝试将你的 JavaScript 项目迁移到 TypeScript，并解决遇到的所有类型错误！ 💻
有任何问题或想深入讨论？欢迎在评论区留言！ 💬👇
