TypeScript中是否存在可继承的CSS接口？求解决方案

你完全不用手动逐个声明CSS属性，TypeScript生态里有几种现成的方案可以直接用，下面给你详细说明：

1. 使用TypeScript内置的CSSStyleDeclaration接口 #

如果你是在浏览器环境下开发，TypeScript默认包含的DOM类型定义（lib.dom.d.ts）里就有CSSStyleDeclaration接口，它对应了DOM元素的style对象类型，包含了所有标准CSS属性（注意属性是驼峰命名，比如zIndex而不是"z-index"）。

直接继承它的示例：

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

不过要注意，CSSStyleDeclaration除了CSS属性外，还包含了一些方法（比如getPropertyValue、setProperty），如果你的接口只需要纯属性的话，这个方案可能会带一些多余的成员。

2. 更推荐：使用csstype包的Properties接口 #

如果想要更纯粹的CSS属性类型，同时支持驼峰和短横线两种命名方式（比如backgroundColor和background-color都能被类型检查识别），可以使用csstype这个专门的类型包，它提供了非常全面且准确的CSS类型定义。

步骤如下：

• 首先安装包：

npm install csstype --save-dev
# 或者用yarn
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;
}

这个方案的优势在于：类型纯粹（只有CSS属性）、支持两种命名风格、覆盖所有CSS规范属性，完全不用再手动添加新的CSS属性。

3. React项目专属：React.CSSProperties #

如果你的项目是React项目，React已经内置了CSSProperties类型（本质上也是基于类似的CSS类型实现），可以直接继承它：

import type { CSSProperties } from 'react';

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

这样就能完美结合React的CSS类型规范，同时扩展你自己的组件属性。

内容的提问来源于stack exchange，提问作者Petr Marek