从零开始学习 TypeScript：独立开发者的类型安全指南

为什么独立开发者需要 TypeScript？

在没有团队的情况下，类型系统就是你的"自文档化"保障。它能帮你：

• 减少运行时错误
• 提高代码可维护性
• 获得更好的 IDE 支持
• 便于重构

基础类型入门

// 基本类型
const name: string = "Solo Developer";
const age: number = 30;
const isActive: boolean = true;

// 数组
const skills: string[] = ["React", "TypeScript", "Node.js"];

// 对象
interface Project {
  id: string;
  name: string;
  description?: string; // 可选属性
  tags: string[];
}

高级类型技巧

Union Types

type Status = "active" | "inactive" | "archived";

type Project = {
  status: Status;
};

Generics

function createArray<T>(items: T[]): T[] {
  return [...items];
}

const numbers = createArray<number>([1, 2, 3]);
const strings = createArray<string>(["a", "b", "c"]);

YouTube 视频教程

观看下面的视频，了解更详细的 TypeScript 实践：

实用工具类型

// Partial - 所有属性变为可选
interface User {
  name: string;
  email: string;
}
type PartialUser = Partial<User>;

// Pick - 选取部分属性
type UserName = Pick<User, "name">;

// Omit - 排除部分属性
type UserWithoutEmail = Omit<User, "email">;

// Record - 键值对类型
const config: Record<string, string> = {
  API_URL: "https://api.example.com",
  VERSION: "1.0.0"
};

在 React 中使用 TypeScript

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: "primary" | "secondary";
}

export function Button({ 
  children, 
  onClick, 
  variant = "primary" 
}: ButtonProps) {
  return (
    <button 
      onClick={onClick}
      className={`btn btn-${variant}`}
    >
      {children}
    </button>
  );
}

配置建议

tsconfig.json 推荐配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  }
}

结语

TypeScript 的学习曲线虽然陡峭，但一旦掌握，它会显著提升你的开发效率。对于独立开发者来说，这种投入是值得的。

---

推荐阅读：官方文档 https://www.typescriptlang.org/docs/