时间戳

首页 > 解决方案 > 如何在 TypeScript 中编辑全局类型？

typescript - 如何在 TypeScript 中编辑全局类型？

问题描述

window.getComputedStyle返回一个 type 的值CSSStyleDeclaration，它具有驼峰格式的 CSS 属性键。

但是，在 Chrome、Firefox 和 Safari 上都进行了测试，它以驼峰式和连字符分隔格式返回键值，并且我使用连字符分隔格式引用键：

const div = document.querySelector('div#test');
const computedStyles = window.getComputedStyle(div);

console.log(
  'marginTop:', computedStyles.marginTop,
  'margin-top:', computedStyles['margin-top']
);
div#test {
  width: 100px;
  height: 100px;
  background-color: aqua;
  margin-top: 50px;
}
<div id='test'></div>

这导致我在尝试获取引用键的值时需要使用很多丑陋的东西as unknown as ...（如上面示例中的第二种情况），因此我决定在CSSStyleDeclaration. 我只是不知道该怎么做。

只是为了说清楚：问题是 on CSSStyleDeclaration（的返回类型window.getComputedStyle）margin-topas 属性不存在，但返回值实际上有它。

值得一提的是我不想创建新的自定义类型。基本上我只想扩展一个已经存在的类型，所以CSSStyleDeclaration本地会有键已经存在，加上我自己的（margin-top基于示例）。

标签： typescript

解决方案

解决方案是简单地重新声明.d.ts文件中的类型。它保留原始属性，并添加新属性。根据示例，它看起来像这样：

declare interface CSSStyleDeclaration {
  'margin-top': string;
}

推荐阅读