第6天 #100DaysOfCode — TypeScript简介

Source: Dev.to

什么是 TypeScript？

TypeScript 是 Microsoft 创建的 JavaScript 的带类型超集。它在普通 JavaScript 之上加入了静态类型检查，这意味着你可以在代码运行之前就捕获错误。

• 编译为普通的 JavaScript
• 帮助防止运行时错误
• 通过 IntelliSense、自动提示和编译时反馈提升开发者体验

如果说 JavaScript 是柔软的黏土，TypeScript 就是同样的黏土——但有严格的“家长”在旁边监督，确保你不会做出怪物般的作品。

为什么在已有 JavaScript 的情况下还要使用 TypeScript？

JavaScript 很棒——但它很宽容，就像“随便吧，想怎么写就怎么写”。拼写错误、错误的数据结构、缺失的属性以及不正确的函数参数往往只能在 运行时，甚至是生产环境中才会显现。

TypeScript 通过以下方式提供帮助：

• 在开发阶段捕获错误
• 让代码更易于文档化和维护
• 提供更好的工具支持（自动完成、提示、重构安全）
• 帮助大型团队在不混乱的情况下扩展代码库

简而言之：TypeScript 能防止 bug 并提升生产力。

TypeScript 基础

1. 为变量添加注解

let username: string = "John";
let age: number = 25;
let isLoggedIn: boolean = true;

2. 为数组标注类型

let scores: number[] = [80, 90, 100];
let fruits: string[] = ["apple", "banana", "mango"];

或使用泛型：

let ids: Array = [1, 2, 3];

3. 为对象标注类型

let user: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

4. 联合类型

let status: "success" | "error" | "loading";
status = "success";

或：

let id: number | string;
id = 101;
id = "ABC123";

5. 函数类型

function greet(name: string): string {
  return `Hello, ${name}!`;
}

箭头函数的写法相同：

const add = (a: number, b: number): number => {
  return a + b;
};

6. Type 与 Interface（基础）

type 与 interface 都用于描述对象的形状，但它们有关键区别：

• interface → 可扩展，适合描述对象结构
• type → 更灵活（可以组合联合、原始类型、元组等）

使用 type：

type Car = {
  brand: string;
  year: number;
};

let myCar: Car = { brand: "Toyota", year: 2022 };

使用 interface：

interface Person {
  name: string;
  age: number;
}

const employee: Person = { name: "Sara", age: 28 };

👉 使用 interface 来描述对象，使用 type 来描述联合类型——但两者都可以正常使用。

TypeScript 在 React 中的使用

1. 为 React Props 标注类型

type ButtonProps = {
  label: string;
  disabled?: boolean; // optional
};

const Button: React.FC = ({ label, disabled }) => {
  return {label};
};

• label 必须是字符串
• disabled 为可选属性，但若提供必须是布尔值

2. React 类型推断

TypeScript 能根据使用情况自动推断类型：

const counter = 0; // 推断为 number

const handleClick = () => {
  console.log("Clicked!");
}; // 推断为 () => void

React Hook 也会进行类型推断：

function Counter() {
  const [value, setValue] = React.useState(0); // value: number, setValue expects number

  return (
    <button onClick={() => setValue(value + 1)}>
      Count: {value}
    </button>
  );
}

只有在状态结构比较复杂时才需要手动指定类型。

最后感想

学习 TypeScript 起初可能会让人感到畏惧，但只要掌握了变量、类型、函数、数组、对象、联合以及 React Props 等基础，所有代码都会变得清晰且可预测。它的冗长看似会拖慢开发速度，实际上却在指引你、保护你，并帮助你构建可扩展、无 bug 的应用。

第 6 天正式完成 —— 继续前进到第 7 天！