如何在 TypeScript 中获取参数类型的 fn({param})？

Question

我正在使用原始 emotion 包 npm i emotion 并遇到了这个问题。

如果我这样做

import { css } from 'emotion';

const test = css({
  boxSizing: 'border-box'
})

如果我将鼠标悬停在 boxSizing 上，VSCode 告诉我 boxSizing 类型是

"border-box" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "content-box" | BoxSizingProperty[] | undefined

现在，我想检索那些类型，结果是这个

type result = "border-box" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "content-box" | BoxSizingProperty[] | undefined

有没有我可以用来检索这些类型的实用方法？

如果我能做到

import { css } from 'emotion';

type result = someUtility<typeof css, 'boxSizing'>

是否可以在不安装任何新的 npm 包的情况下执行此操作？我知道情感使用 csstype 包在引擎盖下进行打字。

Answer 1

由于您不想安装其他软件包，您可以执行以下操作：

import { ObjectInterpolation } from 'emotion'

type BoxSizing = ObjectInterpolation<undefined>['boxSizing'] // type BoxSizing = "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "border-box" | "content-box" | BoxSizingProperty[] | undefined

您可能还会发现 Parameters generic type 很有用，尽管我认为它在这里不太适用，因为 Interpolation<T> 是多个项目的联合类型。这是如何在另一个函数中使用它的示例：

const example = (params: { boxSizing: 'border-box' }) => undefined

type BoxSizing = Parameters<typeof example>[0]['boxSizing']

如何在 TypeScript 中获取参数类型的 fn({param})？

How can I get fn({param}) of the param type in TypeScript?

javascript

emotion

core-motion

typescript