// JavaScript的弱类型问题let value = "hello";value = 123;  // 允许，但可能导致运行时错误value.toUpperCase();  // 运行时错误：数字没有toUpperCase方法// TypeScript的解决方案let name: string = "Alice";let age: number = 30;let isActive: boolean = true;let scores: number[] = [95, 87, 92];let person: { name: string; age: number } = { name: "Bob", age: 25 };// 类型推断：TypeScript很聪明let message = "Hello";  // 推断为stringlet count = 42;         // 推断为numberlet items = [1, 2, 3];  // 推断为number[]// 编译时错误检查name = 123;  // 错误：不能将number赋值给stringage = "30";  // 错误：不能将string赋值给number

// 联合类型：变量可以是多种类型之一let id: string | number;id = "ABC123";  // OKid = 123456;    // OKid = true;      // 错误：boolean不在联合类型中// 字面量类型：精确到具体值let direction: "north" | "south" | "east" | "west";direction = "north";  // OKdirection = "up";     // 错误：只能是指定值之一let statusCode: 200 | 404 | 500;statusCode = 200;  // OKstatusCode = 400;  // 错误：只能是指定值之一// 实际应用：React组件propsinterface ButtonProps {
  type: "submit" | "button" | "reset";
  size: "small" | "medium" | "large";
  variant: "primary" | "secondary" | "danger";}// 智能类型收缩function process(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());  // 这里value是string类型
  } else {
    console.log(value.toFixed(2));     // 这里value是number类型
  }}

// 接口：定义对象的形状interface User {
  readonly id: string;        // 只读属性
  name: string;
  age?: number;               // 可选属性
  email: string;
  [key: string]: any;         // 索引签名}// 使用接口const user: User = {
  id: "1",
  name: "Alice",
  email: "alice@example.com"};user.id = "2";  // 错误：id是只读属性// 接口扩展interface Employee extends User {
  employeeId: string;
  department: string;
  salary: number;}// 类型别名：更灵活的类型定义type ID = string | number;type Point = {
  x: number;
  y: number;};// 交叉类型type AdminUser = User & {
  permissions: string[];
  isSuperAdmin: boolean;};// 条件类型（高级）type IsString<T> = T extends string ? true : false;type Result = IsString<"hello">;  // truetype Result2 = IsString<123>;     // false

// 泛型函数function identity<T>(arg: T): T {
  return arg;}// 使用let output1 = identity<string>("hello");  // 显式指定类型let output2 = identity(42);               // 类型推断：number// 泛型约束interface HasLength {
  length: number;}function logLength<T extends HasLength>(arg: T): void {
  console.log(arg.length);}logLength("hello");    // OKlogLength([1, 2, 3]);  // OKlogLength(42);         // 错误：数字没有length属性// 泛型接口interface Repository<T> {
  findById(id: string): Promise<T | null>;
  save(entity: T): Promise<T>;
  delete(id: string): Promise<void>;}// 使用class UserRepository implements Repository<User> {
  async findById(id: string): Promise<User | null> {
    // 实现...
  }
  // 其他方法...}// 泛型类class Stack<T> {
  private items: T[] = [];
  
  push(item: T): void {
    this.items.push(item);
  }
  
  pop(): T | undefined {
    return this.items.pop();
  }
  
  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }}// 使用const numberStack = new Stack<number>();numberStack.push(1);numberStack.push(2);const num = numberStack.pop();  // num是number类型const stringStack = new Stack<string>();stringStack.push("hello");const str = stringStack.pop();  // str是string类型

// 映射类型：基于现有类型创建新类型type Readonly<T> = {
  readonly [P in keyof T]: T[P];};type Partial<T> = {
  [P in keyof T]?: T[P];};type Pick<T, K extends keyof T> = {
  [P in K]: T[P];};type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;// 使用interface User {
  id: string;
  name: string;
  email: string;
  age: number;}type ReadonlyUser = Readonly<User>;// 等价于：// {//   readonly id: string;//   readonly name: string;//   readonly email: string;//   readonly age: number;// }type UserWithoutAge = Omit<User, 'age'>;// 等价于：// {//   id: string;//   name: string;//   email: string;// }type UserNameAndEmail = Pick<User, 'name' | 'email'>;// 等价于：// {//   name: string;//   email: string;// }// 条件类型与infer关键字type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;function getUser(): User {
  return { id: '1', name: 'Alice', email: 'alice@example.com', age: 30 };}type UserReturnType = ReturnType<typeof getUser>;  // User// 模板字面量类型type EventName = `on${Capitalize<string>}`;type MouseEvent = `on${'Click' | 'MouseMove' | 'MouseDown' | 'MouseUp'}`;// "onClick" | "onMouseMove" | "onMouseDown" | "onMouseUp"type PropGetter<T, K extends string> = `get${Capitalize<K>}`;type UserGetters = PropGetter<User, 'name' | 'email'>;// "getName" | "getEmail"

// 类装饰器function LogClass(constructor: Function) {
  console.log(`类 ${constructor.name} 被调用`);}// 方法装饰器function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    console.log(`调用方法: ${propertyKey}`, args);
    const result = originalMethod.apply(this, args);
    console.log(`方法结果: ${result}`);
    return result;
  };
  
  return descriptor;}// 属性装饰器function DefaultValue(value: any) {
  return function(target: any, propertyKey: string) {
    target[propertyKey] = value;
  };}// 参数装饰器function Validate(target: any, propertyKey: string, parameterIndex: number) {
  console.log(`验证参数 ${parameterIndex} 在方法 ${propertyKey} 中`);}// 使用装饰器@LogClassclass Calculator {
  @DefaultValue(0)
  private result: number;
  
  @LogMethod
  add(@Validate x: number, @Validate y: number): number {
    return x + y;
  }}// Angular中的装饰器实践@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'})export class UserComponent {
  @Input() user: User;
  @Output() userSelected = new EventEmitter<User>();
  
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.userSelected.emit(this.user);
  }}

import React, { useState, useEffect, FC } from 'react';// 定义props类型interface UserCardProps {
  user: User;
  onSelect?: (user: User) => void;
  isSelected?: boolean;
  size?: 'small' | 'medium' | 'large';}// 函数组件const UserCard: FC<UserCardProps> = ({ 
  user, 
  onSelect, 
  isSelected = false,
  size = 'medium'}) => {
  const [isHovered, setIsHovered] = useState<boolean>(false);
  
  // 事件处理函数有明确的类型
  const handleClick = (): void => {
    onSelect?.(user);
  };
  
  // 计算样式
  const sizeClasses: Record<UserCardProps['size'], string> = {
    small: 'text-sm p-2',
    medium: 'text-base p-4',
    large: 'text-lg p-6'
  };
  
  return (
    <div
      className={`user-card ${sizeClasses[size]} ${isSelected ? 'selected' : ''}`}
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <img 
        src={user.avatar} 
        alt={user.name}
        className="avatar"
      />
      <div className="user-info">
        <h3 className="user-name">{user.name}</h3>
        <p className="user-email">{user.email}</p>
        {isHovered && <span className="tooltip">点击查看详情</span>}
      </div>
    </div>
  );};// 自定义Hook的类型安全function useFetch<T>(url: string): {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => void;} {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);
  
  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP错误: ${response.status}`);
      }
      const result: T = await response.json();
      setData(result);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err : new Error('未知错误'));
    } finally {
      setLoading(false);
    }
  }, [url]);
  
  useEffect(() => {
    fetchData();
  }, [fetchData]);
  
  return { data, loading, error, refetch: fetchData };}// 使用自定义Hookconst UserList: FC = () => {
  const { data: users, loading, error } = useFetch<User[]>('/api/users');
  
  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误: {error.message}</div>;
  
  return (
    <div className="user-list">
      {users?.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );};

import express, { Request, Response, NextFunction } from 'express';import { z } from 'zod';  // 运行时验证库// 定义数据模型interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;}// 使用Zod进行运行时验证const productSchema = z.object({
  name: z.string().min(1).max(100),
  price: z.number().positive(),
  category: z.string().min(1),
  inStock: z.boolean().default(true)});// 自定义请求类型interface CreateProductRequest extends Request {
  body: z.infer<typeof productSchema>;}// 错误处理中间件class AppError extends Error {
  constructor(
    public message: string,
    public statusCode: number = 500,
    public isOperational: boolean = true
  ) {
    super(message);
    this.name = this.constructor.name;
    Error.captureStackTrace(this, this.constructor);
  }}// 类型安全的服务层class ProductService {
  private products: Map<string, Product> = new Map();
  
  create(productData: z.infer<typeof productSchema>): Product {
    const id = Date.now().toString();
    const product: Product = {
      id,
      ...productData    };
    this.products.set(id, product);
    return product;
  }
  
  findById(id: string): Product | undefined {
    return this.products.get(id);
  }
  
  findAll(): Product[] {
    return Array.from(this.products.values());
  }
  
  update(id: string, updates: Partial<Product>): Product | null {
    const product = this.products.get(id);
    if (!product) return null;
    
    const updatedProduct = { ...product, ...updates };
    this.products.set(id, updatedProduct);
    return updatedProduct;
  }}// 控制器class ProductController {
  constructor(private productService: ProductService) {}
  
  createProduct = async (req: CreateProductRequest, res: Response, next: NextFunction): Promise<void> => {
    try {
      // 运行时验证
      const validatedData = productSchema.parse(req.body);
      
      const product = this.productService.create(validatedData);
      
      res.status(201).json({
        status: 'success',
        data: { product }
      });
    } catch (error) {
      if (error instanceof z.ZodError) {
        return next(new AppError('验证失败', 400));
      }
      next(error);
    }
  };
  
  getProduct = async (req: Request, res: Response, next: NextFunction): Promise<void> => {
    try {
      const { id } = req.params;
      const product = this.productService.findById(id);
      
      if (!product) {
        return next(new AppError('产品不存在', 404));
      }
      
      res.status(200).json({
        status: 'success',
        data: { product }
      });
    } catch (error) {
      next(error);
    }
  };}// 创建Express应用const app = express();app.use(express.json());const productService = new ProductService();const productController = new ProductController(productService);// 定义路由app.post('/api/products', productController.createProduct);app.get('/api/products/:id', productController.getProduct);// 全局错误处理app.use((err: Error | AppError, req: Request, res: Response, next: NextFunction) => {
  const statusCode = err instanceof AppError ? err.statusCode : 500;
  const message = err.message || '服务器内部错误';
  
  res.status(statusCode).json({
    status: 'error',
    message,
    // 只在开发环境显示堆栈跟踪
    ...(process.env.NODE_ENV === 'development' && { stack: err.stack })
  });});// 启动服务器const PORT = process.env.PORT || 3000;app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);});

{
  "compilerOptions": {
    /* 基本选项 */
    "target": "ES2022",                      // 编译目标版本
    "module": "ESNext",                      // 模块系统
    "lib": ["ES2022", "DOM", "DOM.Iterable"], // 包含的库文件
    "jsx": "react-jsx",                      // JSX支持
    
    /* 模块解析 */
    "moduleResolution": "node",              // 模块解析策略
    "baseUrl": "./",                         // 基础路径
    "paths": {                               // 路径别名
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },
    
    /* 严格类型检查 */
    "strict": true,                          // 启用所有严格检查
    "noImplicitAny": true,                   // 禁止隐式any
    "strictNullChecks": true,                // 严格null检查
    "strictFunctionTypes": true,             // 严格函数类型检查
    "strictBindCallApply": true,             // 严格bind/call/apply检查
    "strictPropertyInitialization": true,    // 严格属性初始化检查
    "noImplicitThis": true,                  // 禁止隐式this
    "alwaysStrict": true,                    // 总是使用严格模式
    
    /* 额外检查 */
    "noUnusedLocals": true,                  // 检查未使用的局部变量
    "noUnusedParameters": true,              // 检查未使用的参数
    "noImplicitReturns": true,               // 检查函数隐式返回
    "noFallthroughCasesInSwitch": true,      // 检查switch穿透
    
    /* 模块输出 */
    "declaration": true,                     // 生成.d.ts声明文件
    "declarationMap": true,                  // 生成声明文件的sourcemap
    "sourceMap": true,                       // 生成sourcemap
    "outDir": "./dist",                      // 输出目录
    
    /* 互操作性 */
    "esModuleInterop": true,                 // 改进ES模块互操作
    "allowSyntheticDefaultImports": true,    // 允许合成默认导入
    
    /* 实验性特性 */
    "experimentalDecorators": true,          // 启用装饰器
    "emitDecoratorMetadata": true,           // 发出装饰器元数据
    
    /* 高级选项 */
    "skipLibCheck": true,                    // 跳过库文件检查
    "forceConsistentCasingInFileNames": true, // 强制文件名大小写一致
    "resolveJsonModule": true,               // 允许导入JSON
    "isolatedModules": true                  // 确保每个文件可以被独立编译
  },
  "include": ["src/**/*"],                   // 包含的文件
  "exclude": ["node_modules", "dist", "**/*.test.ts"], // 排除的文件
  "references": [                            // 项目引用
    { "path": "./tsconfig.node.json" }       // Node.js配置文件
  ]}

// webpack.config.tsimport path from 'path';import { Configuration } from 'webpack';import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';const config: Configuration = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            transpileOnly: true  // 加快编译速度
          }
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: path.resolve(__dirname, 'tsconfig.json'),
        diagnosticOptions: {
          semantic: true,
          syntactic: true
        }
      }
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    hot: true,
    open: true,
    port: 3000
  }};export default config;

// vitest + TypeScript配置import { defineConfig } from 'vitest/config';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
    coverage: {
      provider: 'istanbul',
      reporter: ['text', 'json', 'html']
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }});// 测试示例import { describe, it, expect, vi } from 'vitest';import { render, screen, fireEvent } from '@testing-library/react';import { UserCard } from './UserCard';describe('UserCard', () => {
  const mockUser: User = {
    id: '1',
    name: 'Alice',
    email: 'alice@example.com',
    age: 30
  };
  
  it('应该正确渲染用户信息', () => {
    render(<UserCard user={mockUser} />);
    
    expect(screen.getByText('Alice')).toBeInTheDocument();
    expect(screen.getByText('alice@example.com')).toBeInTheDocument();
  });
  
  it('点击时应该调用onSelect回调', () => {
    const handleSelect = vi.fn();
    
    render(<UserCard user={mockUser} onSelect={handleSelect} />);
    
    fireEvent.click(screen.getByRole('button'));
    
    expect(handleSelect).toHaveBeenCalledTimes(1);
    expect(handleSelect).toHaveBeenCalledWith(mockUser);
  });});

// 1. 优先使用interface而不是type// 除非需要联合类型、元组或映射类型// 2. 使用准确的类型，而不是any// 不好function process(data: any): any {
  // ...}// 好function process<T>(data: T): T {
  // ...}// 3. 使用类型守卫和类型断言interface Cat {
  type: 'cat';
  meow(): void;}interface Dog {
  type: 'dog';
  bark(): void;}type Animal = Cat | Dog;function handleAnimal(animal: Animal) {
  // 使用类型守卫
  if (animal.type === 'cat') {
    animal.meow();  // TypeScript知道这是Cat
  } else {
    animal.bark();  // TypeScript知道这是Dog
  }}// 4. 使用索引签名处理动态属性interface DynamicObject {
  [key: string]: string | number;}// 5. 使用泛型约束而不是any[]function getFirstElement<T>(arr: T[]): T | undefined {
  return arr[0];}

src/
├── types/                    # 全局类型定义
│   ├── index.ts             # 类型导出文件
│   ├── api.ts               # API相关类型
│   └── components.ts        # 组件相关类型
├── utils/                   # 工具函数
│   ├── validation.ts        # 验证函数
│   └── formatters.ts        # 格式化函数
├── hooks/                   # 自定义Hook
│   ├── useFetch.ts          # 数据获取Hook
│   └── useLocalStorage.ts   # 本地存储Hook
├── components/              # 组件
│   ├── common/              # 通用组件
│   └── features/            # 功能组件
├── services/                # 服务层
│   ├── api.ts               # API客户端
│   └── cache.ts             # 缓存服务
├── store/                   # 状态管理
│   ├── slices/              # Redux slices或zustand stores
│   └── index.ts             # store配置
└── index.tsx                # 应用入口

// 1. 使用项目引用拆分大型项目// tsconfig.json{
  "references": [
    { "path": "./packages/core" },
    { "path": "./packages/ui" },
    { "path": "./packages/utils" }
  ]}// 2. 使用incremental编译{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./dist/.tsbuildinfo"
  }}// 3. 跳过库文件检查{
  "compilerOptions": {
    "skipLibCheck": true
  }}// 4. 使用--watch模式开发"scripts": {
  "dev": "tsc --watch"}// 5. 使用swc或esbuild加快编译// vite.config.tsimport { defineConfig } from 'vite';import react from '@vitejs/plugin-react';export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-transform-runtime']
      }
    })
  ],
  esbuild: {
    loader: 'tsx',
    include: /src\/.*\.[tj]sx?$/,
    exclude: []
  }});

// TypeScript编译为JavaScript，没有运行时开销// 但类型设计会影响运行时性能// 1. 避免过多的联合类型检查// 不好function process(value: string | number | boolean | object) {
  if (typeof value === 'string') {
    // ...
  } else if (typeof value === 'number') {
    // ...
  }
  // 太多的类型检查}// 好：使用策略模式interface Processor<T> {
  process(value: T): void;}// 2. 使用const断言避免不必要的类型推断// 不好：string[]const colors = ['red', 'green', 'blue'];// 好：readonly ['red', 'green', 'blue']const colors = ['red', 'green', 'blue'] as const;// 3. 避免过度使用枚举（会增加运行时代码）// 考虑使用常量对象const Colors = {
  Red: 'red',
  Green: 'green',
  Blue: 'blue'} as const;type Color = typeof Colors[keyof typeof Colors];

// 1. 装饰器标准化// 目前还是实验性特性declare decorator @logged(target: Function, context: DecoratorContext): void;// 2. 更好的函数类型推断function createObject<T extends object>(
  keys: (keyof T)[],
  values: T[keyof T][]): T {
  // 更好的类型推断}// 3. 模板字面量类型的改进type CSSValue<T extends string> = `${number}${T}`;type Pixels = CSSValue<'px'>;type Percentage = CSSValue<'%'>;type Length = Pixels | Percentage;// 4. 满足运算符（satisfies operator）的改进const config = {
  port: 3000,
  host: 'localhost'} satisfies {
  port: number;
  host: string;};

// 1. 第三方库的类型定义质量不一// 解决方案：使用DefinitelyTyped贡献类型定义// @types/react, @types/node等// 2. 类型兼容性问题interface Animal {
  name: string;}interface Dog extends Animal {
  breed: string;}// 结构类型系统的"怪癖"const animal: Animal = { name: 'Buddy' };const dog: Dog = { name: 'Max', breed: 'Labrador' };const animals: Animal[] = [animal, dog];  // 允许：Dog是Animal的子类型// 3. 学习曲线// 从JavaScript迁移需要时间适应类型系统

// Airbnb：从Flow迁移到TypeScript// 结果：开发效率提升38%，Bug减少15%// Microsoft：VSCode、Azure Portal// 完全使用TypeScript开发，代码质量显著提高// Slack：桌面应用重写// 使用Electron + TypeScript，崩溃率下降50%// Asana：前端架构现代化// 代码维护成本降低40%// Notion：复杂编辑器应用// TypeScript帮助管理复杂的业务逻辑

// Vue 3：完全用TypeScript重写// 提供更好的类型支持和开发体验// Deno：原生TypeScript运行时// 无需编译，直接运行TypeScript// NestJS：企业级Node.js框架// 依赖注入、模块化、完全类型安全// Prisma：下一代ORM// 数据库查询的类型安全

const typescriptROI = {
  // 短期成本
  learningCurve: "2-4周适应期",
  initialSetup: "额外的配置和构建步骤",
  typeDefinitions: "需要为第三方库添加类型",
  
  // 长期收益
  bugReduction: "减少运行时错误40-60%",
  developerProductivity: "提高开发速度25-35%",
  codeMaintainability: "新开发者上手时间减少50%",
  refactoringSafety: "大规模重构成功率提升70%",
  documentation: "类型即文档，减少文档维护",
  
  // 团队效益
  onboarding: "新成员贡献代码速度提升60%",
  collaboration: "接口定义明确，减少沟通成本",
  codeReview: "类型检查提前发现问题"};

type TypeScriptSuitability = {
  // 强烈推荐
  enterpriseApplications: "大型企业级应用",
  longTermProjects: "需要长期维护的项目",
  teamCollaboration: "团队协作开发",
  complexBusinessLogic: "复杂的业务逻辑",
  apiClients: "API客户端库",
  
  // 可以考虑
  smallPrototypes: "快速原型（可能过度工程化）",
  simpleScripts: "简单的脚本任务",
  
  // 不推荐
  tinyUtilities: "微小的工具脚本",
  oneTimeScripts: "一次性脚本",
  legacyCodebases: "庞大的遗留代码库（迁移成本高）"};