面试题：TypeScript实现CSS - in - JS类型安全方案的优化与拓展

设计思路

建立统一的类型定义文件：创建一个共享的TypeScript类型定义文件（如types.ts），用于定义项目中通用的CSS - in - JS相关类型。这样不同团队成员在开发组件时都基于相同的类型基础，减少类型冲突的可能性。例如，定义一个通用的样式对象类型：

export type CSSStyles = {
    [key: string]: string | number | CSSStyles;
};

组件类型隔离：每个团队负责的组件都应有自己独立的类型定义，避免不同组件间类型的相互干扰。例如，对于一个按钮组件Button.tsx，可以有如下类型定义：

import { CSSStyles } from './types';

export type ButtonProps = {
    text: string;
    style?: CSSStyles;
    onClick?: () => void;
};

使用命名空间或模块：利用TypeScript的命名空间（namespace）或模块（import/export）来组织类型。模块更推荐用于现代项目，通过将相关类型和代码封装在模块中，提高代码的可维护性和可扩展性。例如，将所有与表单相关的组件类型放在formTypes.ts模块中：

// formTypes.ts
export type InputProps = {
    value: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    style?: CSSStyles;
};

export type FormProps = {
    children: React.ReactNode;
    onSubmit: (data: any) => void;
    style?: CSSStyles;
};

类型检查与验证：在开发过程中，借助TypeScript的严格类型检查机制，确保组件的使用符合定义的类型。在组件的入口（如函数参数或React组件的props）处进行严格的类型验证。例如，对于上述按钮组件：

import React from'react';
import { ButtonProps } from './Button.types';

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

export default Button;

文档化类型：对定义的类型添加JSDoc注释，详细说明类型的用途、属性含义等。这有助于其他团队成员理解和使用这些类型，特别是在大型项目中，提高代码的可维护性。例如：

/**
 * Represents the properties for the Button component.
 * @property text - The text to be displayed on the button.
 * @property style - Optional custom CSS styles for the button.
 * @property onClick - Optional callback function to be executed when the button is clicked.
 */
export type ButtonProps = {
    text: string;
    style?: CSSStyles;
    onClick?: () => void;
};

技术手段

使用工具库：
- Styled - Components：如果项目使用Styled - Components进行CSS - in - JS开发，它本身对TypeScript有良好的支持。可以通过类型声明文件来定义样式组件的属性类型。例如：

import styled from'styled - components';
import { CSSStyles } from './types';

interface CardProps {
    style?: CSSStyles;
}

const Card = styled.div<CardProps>`
    background - color: white;
    border: 1px solid gray;
    ${({ style }) => style && typeof style === 'object' && Object.entries(style).map(([key, value]) => `${key}: ${value};`).join(' ')}
`;

export default Card;

- **Emotion**：同样是常用的CSS - in - JS库，也支持TypeScript。可以通过自定义类型来增强类型安全。例如：

import { css, SerializedStyles } from '@emotion/react';
import { CSSStyles } from './types';

type BoxProps = {
    style?: CSSStyles;
};

const boxStyles = ({ style }: BoxProps): SerializedStyles => css`
    padding: 10px;
    ${style && typeof style === 'object' && Object.entries(style).map(([key, value]) => `${key}: ${value};`).join(' ')}
`;

export const Box = ({ style }: BoxProps) => <div css={boxStyles({ style })} />;

类型别名与接口：合理使用类型别名（type）和接口（interface）。一般来说，类型别名更灵活，可用于基本类型、联合类型等的定义；接口则更适合用于对象类型的定义，并且支持合并声明。例如：

// 类型别名
type FontWeight = 'normal' | 'bold' | 'lighter';

// 接口
interface TextStyle {
    color: string;
    fontSize: string;
    fontWeight?: FontWeight;
}

泛型：在需要复用组件逻辑且保持类型安全的情况下，使用泛型。例如，创建一个通用的列表组件，其项的类型可以通过泛型指定：

import React from'react';

type ListProps<T> = {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
    style?: CSSStyles;
};

const List = <T>({ items, renderItem, style }: ListProps<T>) => {
    return (
        <ul style={style}>
            {items.map((item) => (
                <li key={JSON.stringify(item)}>{renderItem(item)}</li>
            ))}
        </ul>
    );
};

export default List;

星途面试题库

面试题：TypeScript实现CSS - in - JS类型安全方案的优化与拓展

知识考点

面试题答案

设计思路

技术手段