TypeScript中是否存在可继承的CSS接口？欲扩展自定义接口

安全阿岳

2026-5-11

如何在TypeScript中继承现成的CSS属性接口

嘿，你完全不用手动逐个定义CSS属性！TypeScript生态里已经有现成的解决方案了，下面给你详细说说：

1. 使用通用的`csstype`包中的`Properties`接口

这是最通用的方案，适用于任何TypeScript项目（不管是不是React）：

首先，如果你还没安装csstype，先通过npm/yarn安装：

npm install csstype --save-dev
# 或者
yarn add csstype --dev

然后你就可以在接口中直接继承它了：

import type { Properties } from 'csstype';

export interface IComponentProperties extends Properties {
  title: string;
  text?: string;
  resizable?: boolean;
  connectToParent?: string | HTMLElement;
  replaceParentContent?: boolean;
}

这个Properties接口包含了所有标准CSS属性，支持驼峰式（比如zIndex）和短横线式（比如"z-index"）的属性命名，TypeScript会自动做类型检查。而且它还支持泛型，比如你想允许数字值（比如width: 100），可以写成Properties<string | number>。

2. React项目直接用`React.CSSProperties`

如果你是在React项目中，@types/react包已经内置了CSSProperties接口，不用额外安装依赖：

import type { CSSProperties } from 'react';

export interface IComponentProperties extends CSSProperties {
  title: string;
  text?: string;
  resizable?: boolean;
  connectToParent?: string | HTMLElement;
  replaceParentContent?: boolean;
}

这个接口和csstype的Properties功能一致，专门适配React的样式场景。