TypeScript中JSX的使用小結(jié)

更新時(shí)間：2025年10月10日 09:59:00 作者：心隨雨下

本文主要介紹了TypeScript中JSX的使用小結(jié), 使用JSX可以獲得完整的類型檢查和智能提示,從而提升開發(fā)效率和代碼質(zhì)量,感興趣的可以了解一下

1. 配置 TypeScript 支持 JSX

在 tsconfig.json 中配置 JSX 相關(guān)選項(xiàng)：

{
  "compilerOptions": {
    "jsx": "react-jsx",        // React 17+ 新的 JSX 轉(zhuǎn)換
    // 或 "jsx": "react-jsxdev", // 開發(fā)模式
    // 或 "jsx": "preserve",     // 保留 JSX，由其他工具處理
    // 或 "jsx": "react",        // 傳統(tǒng)的 React JSX 轉(zhuǎn)換
    
    "jsxFactory": "React.createElement", // 自定義 JSX 工廠函數(shù)
    "jsxFragmentFactory": "React.Fragment" // 自定義 Fragment 工廠
  }
}

2. 基本 JSX 語法

2.1 元素類型

// 內(nèi)置 HTML 元素
const divElement: JSX.Element = <div>Hello</div>;

// 自定義組件（PascalCase）
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// 使用組件
const App: React.FC = () => {
  return (
    <div>
      <Button onClick={() => console.log('Clicked!')}>
        Click me
      </Button>
    </div>
  );
};

2.2 屬性類型

interface ImageProps {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  className?: string;
  style?: React.CSSProperties;
}

const Image: React.FC<ImageProps> = (props) => {
  return <img {...props} />;
};

// 使用
<Image 
  src="image.jpg" 
  alt="Description" 
  width={100}
  style={{ border: '1px solid red' }}
/>

3. 類型系統(tǒng)

3.1 核心類型

// JSX 元素類型
const element: JSX.Element = <div />;

// 組件返回類型
const Component: React.FC = (): JSX.Element => {
  return <div>Hello</div>;
};

// 子元素類型
interface ContainerProps {
  children: React.ReactNode; // 最寬松的子元素類型
}

// 更具體的子元素類型
interface StrictContainerProps {
  children: React.ReactElement | React.ReactElement[];
}

// 沒有子元素
interface NoChildrenProps {
  children?: never;
}

3.2 事件處理

interface FormProps {
  onSubmit: (data: FormData) => void;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const Form: React.FC<FormProps> = ({ onSubmit, onChange }) => {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        onChange={onChange}
        name="username"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

4. 高級(jí)模式

4.1 條件渲染

interface UserInfoProps {
  user: { name: string; email: string } | null;
  isLoading: boolean;
}

const UserInfo: React.FC<UserInfoProps> = ({ user, isLoading }) => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <div>No user found</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

4.2 列表渲染

interface TodoListProps {
  todos: Array<{
    id: number;
    text: string;
    completed: boolean;
  }>;
  onToggle: (id: number) => void;
}

const TodoList: React.FC<TodoListProps> = ({ todos, onToggle }) => {
  return (
    <ul>
      {todos.map(todo => (
        <li 
          key={todo.id}
          style={{ 
            textDecoration: todo.completed ? 'line-through' : 'none' 
          }}
          onClick={() => onToggle(todo.id)}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
};

4.3 插槽模式

interface CardProps {
  title: string;
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children: React.ReactNode;
}

const Card: React.FC<CardProps> = ({ title, header, footer, children }) => {
  return (
    <div className="card">
      {header && <div className="card-header">{header}</div>}
      <div className="card-body">
        <h3>{title}</h3>
        {children}
      </div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
};

// 使用
<Card 
  title="My Card" 
  header={<button>Close</button>}
  footer={<span>Footer content</span>}
>
  Main content here
</Card>

5. 泛型組件

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyExtractor: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyExtractor }: ListProps<T>): JSX.Element {
  return (
    <div>
      {items.map(item => (
        <div key={keyExtractor(item)}>
          {renderItem(item)}
        </div>
      ))}
    </div>
  );
}

// 使用泛型組件
interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

<List
  items={users}
  keyExtractor={user => user.id}
  renderItem={user => <span>{user.name}</span>}
/>

6. 上下文（Context）與類型

interface Theme {
  mode: 'light' | 'dark';
  colors: {
    primary: string;
    background: string;
  };
}

// 創(chuàng)建帶類型的 Context
const ThemeContext = React.createContext<Theme | undefined>(undefined);

interface ThemeProviderProps {
  theme: Theme;
  children: React.ReactNode;
}

const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定義 Hook 用于消費(fèi) Context
const useTheme = (): Theme => {
  const theme = React.useContext(ThemeContext);
  if (!theme) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return theme;
};

7. 高階組件（HOC）

// 注入 props 的高階組件
interface WithLoadingProps {
  isLoading: boolean;
}

function withLoading<P extends object>(
  Component: React.ComponentType<P>
): React.FC<P & WithLoadingProps> {
  return ({ isLoading, ...props }: P & WithLoadingProps) => {
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <Component {...props as P} />;
  };
}

// 使用
interface UserProfileProps {
  user: { name: string };
}

const UserProfile: React.FC<UserProfileProps> = ({ user }) => {
  return <div>{user.name}</div>;
};

const UserProfileWithLoading = withLoading(UserProfile);

8. 最佳實(shí)踐

8.1 組件定義方式

// 1. Function Component with React.FC
const Component1: React.FC<Props> = (props) => { /* ... */ };

// 2. 直接定義函數(shù)（推薦，更靈活）
function Component2(props: Props): JSX.Element { /* ... */ }

// 3. 使用 PropsWithChildren（如果需要 children）
type Component3Props = React.PropsWithChildren<{
  title: string;
}>;

const Component3: React.FC<Component3Props> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

8.2 事件處理類型

// 正確的類型定義
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  event.preventDefault();
  // 處理點(diǎn)擊
};

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  console.log(event.target.value);
};

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  // 處理提交
};

8.3 樣式類型

// CSS Properties 類型安全
const styles: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'white', // 自動(dòng)補(bǔ)全和類型檢查
};

// 使用
<div style={styles}>Content</div>

這些是 TypeScript 中 JSX 的核心概念和最佳實(shí)踐。通過類型系統(tǒng)的支持，可以在開發(fā)過程中獲得更好的代碼提示、錯(cuò)誤檢測和重構(gòu)能力。

到此這篇關(guān)于TypeScript中JSX的使用小結(jié)的文章就介紹到這了,更多相關(guān)TypeScript JSX使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: