第四章：TypeScript + CSS-in-JS——类型安全的样式革命

当 CSS 遇上 JavaScript，一场关于“样式归属”的争论持续了十年：
是该让样式独立，还是融入组件？

CSS-in-JS（如 styled-components、emotion）给出了后者的答案：样式是组件的一部分，应与组件逻辑共存。而当 TypeScript 加持 CSS-in-JS，我们获得了一个前所未有的能力：类型安全的样式系统。

这不仅是语法糖，而是一次工程化升级——让样式错误在编译时暴露，而非运行时崩溃。

---

1. CSS-in-JS 的核心思想：组件即样式容器

传统 CSS 的痛点：

• 类名全局污染
• 命名冲突（.button, .btn, .ui-button）
• 删除样式时无法确定是否被引用

CSS-in-JS 的解决方案：

• 作用域隔离：每个样式组件拥有唯一哈希类名
• 动态样式：支持 props 驱动、主题切换
• 按需加载：样式随组件打包，无全局文件

// 使用 styled-components
import styled from 'styled-components';

const Button = styled.button`
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;

  background: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;

  &:hover {
    opacity: 0.9;
  }
`;

// 使用
<Button>默认按钮</Button>
<Button primary>主按钮</Button>

样式逻辑与组件逻辑在同一文件中，形成真正的“自包含组件”。

---

2. TypeScript 的加入：从任意值到类型安全

没有类型的 CSS-in-JS 仍有隐患：

<Button primary="maybe"> // 字符串？布尔？undefined？

TypeScript 让我们为 props 定义精确类型，杜绝非法传值。

方案一：styled-components + TypeScript

import styled, { CSSProp } from 'styled-components';

// 定义组件 Props 类型
interface ButtonProps {
  primary?: boolean;
  size?: 'small' | 'medium' | 'large';
  fullWidth?: boolean;
}

const Button = styled.button<ButtonProps>`
  padding: ${props => {
    switch (props.size) {
      case 'small': return '8px 16px';
      case 'large': return '16px 32px';
      default: return '12px 24px';
    }
  }};
  width: ${props => props.fullWidth ? '100%' : 'auto'};
  background: ${props => props.primary ? '#007bff' : '#6c757d'};
  color: white;
  border: none;
  border-radius: ${props => props.theme.radius};
  font-size: 1rem;
  cursor: pointer;

  &:hover {
    transform: translateY(-1px);
  }
`;

// 主题类型定义
export interface Theme {
  radius: string;
  colors: {
    primary: string;
    secondary: string;
  };
  space: number[];
}

// 在根组件中提供主题
import { ThemeProvider } from 'styled-components';

const theme: Theme = {
  radius: '8px',
  colors: { primary: '#007bff', secondary: '#6c757d' },
  space: [0, 4, 8, 16, 32]
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

类型安全体现：

• size 只能是 'small' | 'medium' | 'large'
• primary 为布尔值，传字符串会报错
• theme 结构被严格约束，避免运行时 undefined 错误

---

方案二：Emotion + TypeScript + Styled API

Emotion 提供与 styled-components 兼容的 API，同时支持更灵活的 css prop。

/** @jsxImportSource @emotion/react */
import { css, jsx } from '@emotion/react';

interface BadgeProps {
  variant: 'success' | 'error' | 'warning';
  outlined?: boolean;
}

const badgeStyles = (theme: Theme) => (props: BadgeProps) => css`
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.875rem;
  background: ${props.outlined 
    ? 'transparent' 
    : props.variant === 'success' ? theme.colors.success 
    : props.variant === 'error' ? theme.colors.error 
    : '#ffc107'
  };
  color: ${props.outlined ? theme.colors[props.variant] : 'white'};
  border: ${props.outlined ? `2px solid ${theme.colors[props.variant]}` : 'none'};
`;

const Badge: React.FC<BadgeProps> = ({ variant, outlined, children }) => (
  <span css={badgeStyles}>
    {children}
  </span>
);

Emotion 还支持 @emotion/styled，用法与 styled-components 几乎一致。

---

3. 类型安全带来的工程优势

优势	说明
编译时检查	错误的 variant="danger"（应为 "error"）在保存时即报错
自动补全	VSCode 显示 props 所有可用字段，提升开发效率
重构安全	重命名 primary 为 variant，所有调用处自动更新
文档即类型	组件 Props 类型即 API 文档，无需额外维护
主题一致性	主题对象结构统一，避免魔法值

---

4. 高级技巧：创建类型安全的样式工厂

封装常用样式模式，复用且类型安全：

// utils/typography.ts
import { css } from '@emotion/react';
import { Theme } from './theme';

export const headingStyles = (level: 1 | 2 | 3 | 4) => (theme: Theme) => css`
  font-size: ${theme.fontSizes[level]};
  font-weight: ${level === 1 ? 700 : 600};
  line-height: 1.2;
  margin: ${theme.space[3]} 0 ${theme.space[2]};
  color: ${theme.colors.text};
`;

// 使用
const H1 = styled.h1<{ theme: Theme }>((props) => 
  headingStyles(1)(props.theme)
);

---

5. 性能与权衡

优势：

• 样式与组件共存，提升可维护性
• 动态主题、RTL 支持极佳
• 类型安全减少 runtime 错误

挑战：

• 运行时开销：样式在首次渲染时计算，可能影响性能
• SSR 配置复杂：需正确注入 <style> 标签
• 调试类名：生成的哈希类名（如 css-123abc）不利于调试
• 包体积：引入 styled-components 约增加 12KB（gzipped）

优化建议：

• 生产环境使用 Babel 插件将 CSS 提取为静态类
• 启用 SSR 样式注入
• 对高频组件考虑使用原子化 CSS（如 Linaria）

---

结语：类型即契约，样式即代码

TypeScript + CSS-in-JS 代表了一种现代前端工程化思维：
将样式视为一等公民，用类型系统约束其行为。

它不适用于所有场景（如超大型静态网站），但对于复杂的、组件化的、团队协作的 React/Vue 应用，它是提升开发体验、保障样式质量的强有力工具。

当你在编辑器中看到 variant="success" 被高亮为合法值，而 variant="green" 被红线标记时——你就知道，样式，终于进入了工程化的时代。

下一章，我们将探索“CSS Houdini：直接操控 CSS 引擎的底层 API”。