300TypeScript基础知识

主要学习react中ts的使用和概念

---

第一阶段：Ts基础

TypeScript 的核心思想是：给变量穿上约束的衣服。

1. 原始类型、数组、元组

let name: string = "Gemini";
let age: number = 25;
let isAI: boolean = true;

// 数组的两种写法
let skills: string[] = ['React', 'TS'];
let scores: Array<number> = [90, 85];

// 元组 (Tuple)：固定长度和类型的数组
let user: [number, string] = [1, 'Admin'];

2. 函数的定义

//普通函数定义
function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

// 定义函数类型
type GreetFn = (name: string) => string;

const sayHello: GreetFn = (n) => `Hello, ${n}`;

3. 接口 (Interface) vs 类型别名 (Type)

• Interface: 侧重于描述对象的结构，支持继承（extends）和声明合并。

• Type: 更灵活，可以定义基本类型、联合类型、元组等。

interface LabelledValue {
  label: string;
  num?:number;
}

这是最常用的功能，用于定义对象的结构。

特性	Interface	Type
核心用途	定义对象的形状	定义任何类型（联合、元组等）
扩展方式	使用 extends 关键字	使用 & (交叉类型)
重复定义	会自动合并（Declaration Merging）	不允许重复定义

建议 ：定义公共 API 或组件 Props 时优先使用 interface；定义复杂逻辑、联合类型时使用 type。

---

4. 联合类型与字面量

// 联合类型：变量可以是多种类型之一
let status: "loading" | "success" | "error";
let currentStatus: Status = "loading"; // 只能是这三个字符串之一

// 类型守卫 (Type Guard)
function printId(id: number | string) {
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // 此时 TS 知道 id 是 string
  } else {
    console.log(id.toFixed()); // 此时 TS 知道 id 是 number
  }
}

---

5. 泛型 Generics

泛型是 TS 最强大的地方，它允许你在定义时不指定具体类型，而在使用时动态决定。

// 这里的 T 就像是一个变量占位符
function identity<T>(arg: T): T {
  return arg;
}

const res1 = identity<string>("hello"); // T 被确定为 string
const res2 = identity<number>(100);     // T 被确定为 number

---

第二阶段：React中应用

---

第一部分：TypeScript 语言核心

1. 类型系统的等级制度

在 TS 中，类型是有层级的。理解这一点能帮你解决 90% 的类型兼容性问题。

• Top Types (顶级类型) : any 和 unknown。

• any: 彻底放弃检查，是代码中的"黑洞"。

• unknown: 虽也是万能类型，但在使用前必须进行类型检查（类型收窄）。

• Bottom Type (底层类型) : never。表示永远不会出现的值。常用于穷举检查。

2. Interface 与 Type 的深度对峙

在 React 项目中，两者的界限日益模糊，但底层逻辑不同：

• Interface (面向对象) : 描述"形状"。它支持声明合并（Declaration Merging）。如果你定义了两个同名的 Interface，TS 会自动把它们合二为一。这在扩展第三方库的类型时非常有用。
• Type (函数式/代数) : 描述"别名"。它更强大，可以使用联合（|）、交叉（&）、位运算等。Type 不能被重新打开添加属性。

---

第二部分：工程化配置

tsconfig.json 决定了你的代码如何被"审判"。以下是生产环境中最关键的三个配置：

配置项	作用	为什么重要
strict: true	开启所有严格模式	防止 null 导致的运行时崩溃，禁用隐式 any。
noImplicitAny	禁止隐式 any	强制你思考每个变量的来源，是项目质量的底线。
paths	路径别名	将 ../../../../components 简化为 @/components，解耦目录结构。

---

第三部分：React + TS 实战兵法

1. 组件 Props 的"三板斧"

在定义组件 Props 时，利用 TS 的特性可以极大提升开发体验。

interface GreetProps {
  name: string;
  // 1. 可选属性
  priority?: number; 
  // 2. 字面量联合类型：限制范围
  theme: 'dark' | 'light'; 
  // 3. 复杂对象：引用其他接口
  metadata: Record<string, unknown>; 
}

// 推荐写法：使用普通函数解构 Props
export const Greet = ({ name, theme = 'light' }: GreetProps) => {
  return <div className={theme}>Hello {name}</div>;
};

2. Hooks 的高阶标注

Hooks 是 React 的核心，其类型标注主要依靠泛型。

• useState:

// 显式指定联合类型，处理"空状态"
const [user, setUser] = useState<User | null>(null);

• useRef :
  有两个场景：

1. DOM 引用 : const inputRef = useRef<HTMLInputElement>(null);（注意初始化为 null）。
2. 变量保存 : const timerRef = useRef<number>();。

3. 事件系统的"精确打击"

不要直接使用 any 处理事件。React 提供了一整套事件类型，命名规则通常是 React.[事件名]Event<HTML元素类型>。

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value); // 这里 e.target 会被精准推断为 HTMLInputElement
};

---

第四部分：类型进阶

1. 工具类型 (Utility Types) 的降维打击

TS 内置的工具类型其实就是类型函数。

• Partial<T>: 把所有 Props 变可选。
• Omit<T, 'id'> : 复制 T 的所有属性，但剔除 id。
• Pick<T, 'title' | 'desc'>: 只从 T 中挑选部分属性。

2. 泛型组件 (Generic Components)

当你需要组件支持多种类型的数据流时（如自定义下拉框、表格）：

interface SelectProps<T> {
  options: T[];
  onSelect: (value: T) => void;
}

// 在函数名前使用 <T,> 开启泛型
export const Select = <T,>({ options, onSelect }: SelectProps<T>) => {
  return (
    <ul>
      {options.map((opt, i) => (
        <li key={i} onClick={() => onSelect(opt)}>选择</li>
      ))}
    </ul>
  );
};

// 使用时，TS 会根据传入的 options 自动推断 T
<Select options={[1, 2, 3]} onSelect={(val) => console.log(val + 1)} />

---