面试题：TypeScript实现CSS - in - JS类型安全方案中的类型推导

定义卡片组件的props类型：
- 首先，我们定义卡片组件接受的props类型。假设卡片有一个isActive属性来表示是否处于激活状态，以及一个textColor属性来指定文本颜色。
```
type CardProps = {
  isActive: boolean;
  textColor: string;
};
```
使用styled - components（以styled - components库为例）结合TypeScript推导样式类型：
- 安装styled - components库，如果还未安装：npm install styled - components @types/styled - components。
- 导入相关模块并定义卡片样式。
```
import styled, { css } from'styled - components';

const Card = styled.div<CardProps>`
  background - color: white;
  border: 1px solid gray;
  border - radius: 4px;
  padding: 16px;
  cursor: pointer;

  ${({ isActive }) =>
    isActive &&
    css`
      background - color: lightblue;
    `}

  &:hover {
    background - color: lightgray;
  }

  color: ${({ textColor }) => textColor};
`;
```
- 在上述代码中：
  - 我们使用styled.div<CardProps>来表明这个样式化的div组件接受CardProps类型的props。
  - 通过({ isActive }) => isActive && css这种语法，根据isActive属性动态地添加激活状态的样式。这里css函数是styled - components提供的用于编写CSS代码块的工具。
  - &:hover部分定义了鼠标悬停时的样式，这是常规的CSS伪类写法。
  - color: ${({ textColor }) => textColor}根据传入的textColor属性设置文本颜色。
在组件中使用：
```
import React from'react';

const App: React.FC = () => {
  return (
    <Card isActive={true} textColor="blue">
      This is a card.
    </Card>
  );
};

export default App;
```
- 在App组件中，我们将isActive设为true，textColor设为blue，并将内容放入Card组件中。由于TypeScript的类型推导，当我们传入不符合CardProps类型的props时，会在编译时收到类型错误提示，从而确保了类型安全。

这样，通过上述步骤，在复杂的CSS - in - JS场景中，基于组件的props自动推导样式类型，保证了类型安全。

星途面试题库

面试题：TypeScript实现CSS - in - JS类型安全方案中的类型推导

知识考点

面试题答案