TypeScript 入门学习笔记：从零开始掌握核心概念

TypeScript 入门学习笔记：从零开始掌握核心概念

这篇笔记是我系统学习 TypeScript（以下简称 TS）后整理的内容，重点放在 TS 本身的核心概念、用法和最佳实践上，帮助所有想学习 TS 的人快速入门。

---

一、先搞懂：TS 到底是什么？

简单来说，TS 是 JavaScript（以下简称 JS）的 "超集"------ 它在 JS 的基础上，加了一套编译期静态类型检查系统。

核心特点

1. 静态类型检查：写代码时，TS 会帮你检查变量、函数参数、返回值的类型是否匹配，有问题直接标红，不用等到运行时才发现 bug。
2. 编译运行：TS 代码不能直接在浏览器 / Node.js 里跑，需要先编译成纯 JS 代码，再运行。
3. 完全兼容 JS：任何合法的 JS 代码，都是合法的 TS 代码，你可以逐步把 JS 项目迁移到 TS。

---

二、TS 基础类型：给变量 "贴标签"

TS 的核心优势就是 "类型安全"，而基础类型就是最基础的 "标签"。

1. 常用基础类型

TS 类型	说明	用法示例
number	所有数字（整数、浮点数都算）	let age: number = 18;
string	字符串	let name: string = "张三";
boolean	布尔值（只有true/false）	let isStudent: boolean = true;
void	无返回值（用于函数）	function log(): void { console.log("hello"); }
数组类型	同类型元素的集合	let scores: number[] = [90, 85, 95];
元组类型	固定长度、固定每个位置类型的数组	let user: [string, number] = ["张三", 18];

2. 两个关键概念

类型注解

就是给变量 / 函数 "贴标签" 的语法：: 类型。

// 给变量贴标签
let a: number = 10;
// 给函数参数和返回值贴标签
function add(a: number, b: number): number {
    return a + b;
}

类型别名 type

给复杂的类型起个简短的别名，简化代码。

// 给对象类型起别名
type User = {
    name: string;
    age: number;
};
// 使用别名
const user: User = { name: "张三", age: 18 };

---

三、函数类型：明确 "输入" 和 "输出"

TS 的函数，核心就是明确 "参数是什么类型"、"返回值是什么类型"。

1. 基本写法

// 明确参数类型、返回值类型
function add(a: number, b: number): number {
    return a + b;
}

2. 可选参数（TS 的便利特性）

给参数加个?，就可以标记为 "可选"，可传可不传。

// age是可选参数，不传也不会报错
function sayHi(name: string, age?: number): void {
    console.log(`你好，我是${name}`);
    if (age) console.log(`今年${age}岁`);
}

sayHi("张三"); // 正常运行
sayHi("李四", 20); // 正常运行

---

四、对象类型与接口：定义 "数据结构"

TS 里用type或interface来定义对象的结构，就像给数据画了一张 "图纸"。

1. 用 type 定义对象类型

type Student = {
    // 必选属性
    name: string;
    age: number;
    // 可选属性，加?标记
    score?: number;
};

const student: Student = { name: "张三", age: 18 };

2. 用 interface 定义接口

interface和type很像，但它更适合定义 "行为规范"，还支持继承。

// 定义一个"能说话"的接口
interface Speakable {
    sayHi(): void;
}

// 定义Student接口，继承Speakable
interface Student extends Speakable {
    name: string;
    age: number;
}

// 实现Student接口的对象，必须有name、age、sayHi
const student: Student = {
    name: "张三",
    age: 18,
    sayHi() { console.log("你好"); }
};

---

五、枚举 enum：给常量 "起名字"

TS 的enum用来定义一组固定的常量，让代码更可读。

1. 基本用法

// 默认从0开始递增：Up=0, Down=1, Left=2, Right=3
enum Direction { Up, Down, Left, Right }

// 也可以手动赋值，后续自动递增
enum Direction { Up=10, Down, Left, Right } // Down=11, Left=12, Right=13

2. 进阶用法：位掩码

用 2 的幂给枚举赋值，可以方便地做位运算，组合多个状态。

enum Permission {
    Read = 2,
    Write = 4,
    Delete = 8
}

// 组合权限：读+写
const p = Permission.Read | Permission.Write;
// 检查是否有写权限
const canWrite = (p & Permission.Write) !== 0; // true

---

六、class 类：封装 "数据" 和 "行为"

TS 的class是面向对象编程的核心，用来封装 "属性" 和 "方法"。

1. 基本写法

class Point {
    // 成员属性
    x: number;
    y: number;

    // 构造函数：new的时候自动执行，用来初始化属性
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    // 实例方法：给对象提供行为，手动调用才执行
    scale(n: number): void {
        this.x *= n;
        this.y *= n;
    }
}

// 创建实例
const p = new Point(4, 8);
// 调用方法
p.scale(5);
console.log(p); // { x: 20, y: 40 }

2. 关键概念拆解

• constructor 构造函数 ：只有在new创建对象时自动执行且仅执行一次，专门用来初始化属性。
• 实例方法：给创建好的对象提供行为，必须手动调用，可反复调用。
• this：自动绑定到当前实例，指向调用方法的那个对象。

3. 访问修饰符

TS 提供了 3 个访问修饰符，原生控制成员的访问权限：

• public（默认）：哪里都能访问
• protected：只有当前类和它的子类能访问
• private：只有当前类内部能访问

还有readonly只读修饰符，初始化之后就不能修改。

---

七、其他核心概念

1. 类型推论

TS 会自动推断变量的类型，不用每次都写类型注解。

// TS自动推断a是number类型
let a = 10;
// TS自动推断add的返回值是number类型
function add(a: number, b: number) {
    return a + b;
}

2. 类型断言

对应 "强制类型转换"，用来告诉 TS "我比你更清楚这个变量的类型"。

let str: any = "123";
// 断言str是number类型
let num = str as number;

注意：非必要不要用类型断言，避免类型错误。

3. any 类型

any类型的变量可以赋值为任何值，TS 不会做任何类型检查。

注意 ：尽量不要用any，用了就等于放弃了 TS 的类型安全，回到了原生 JS。

---

八、学习总结与建议

1. 拥抱类型安全，不要怕写类型注解

   写类型注解虽然多敲了几个字，但它会帮你在写代码时就揪出 bug，大大减少运行时的错误，让代码更健壮、更易维护。

2. 逐步迁移，从简单开始

   如果你有现有的 JS 项目，可以先给几个核心文件加上 TS 类型，逐步迁移；如果是新项目，直接用 TS 写，上手会更快。

3. 多用工具，提升效率

   用 VS Code 写 TS，它的类型提示、自动补全功能非常强大，能帮你少写很多代码，少犯很多错误。

4. 多写多练，在实践中巩固

   学习 TS 最好的方法就是多写代码，把学到的概念用到实际项目中，在实践中巩固和理解。

---

以上就是我系统学习 TS 后的整理笔记，重点放在 TS 本身的概念和用法上，希望能帮到所有想学习 TS 的人快速入门。