如何區分字符串文字類型的聯合？

Question

我正在嘗試實現一個聲明性 API 用於編寫 CSS styles 使用 MDN3344CF685F39BEDZ styles 我的目標是將通用字符串值轉換為字符串文字類型，以便我以后可以使用它，從 json 元數據或動態代碼生成“const”文件。

const data = [
  { type: 'at-rule', value: '@media' },
  { type: 'css-property', value: 'color' }
]

const createPrefix = <P extends string>(prefix: P) => <A extends string>(it: A) => `${prefix}: ${it};` as `${P}: ${A}`

const color = createPrefix('color') // works

// usage
const blueText = color('blue')
// const blueText: 'color: blue;'

用法

理想情況下，我們會生成與CSSStyleRule的cssText屬性值類似（格式上）的字符串文字。

import * as s from './composers'

s.of('button-primary').color('blue').background('white')
// .button-primary { color: blue; background: white; }

我已經為此苦苦掙扎了整整一周。 可能我對 TypeScript 的理解非常糟糕，以至於我正在嘗試做一些無法撤消的事情，或者覺得這是一種不好的做法。 無論如何，這就是我正在嘗試做的事情：

type AtRule =
  | '@color-profile'
  | '@charset'
  | '@counter-style'
  | '@document'
  | '@font-face'
  | '@font-feature-values'
  | '@import'
  | '@property'
  | '@keyframes'
  | '@viewport'
  | '@media'
  | '@namespace'
  | '@page'
  | '@supports'

const createPrefix =
  <A extends AtRule>(a: A) =>
  <B extends string>(b: B) => {
    return `${a}: ${b};` as const
  }

function getComposer<T extends AtRule>(s: T) {
  const value: T = s
  return createPrefix(value)
}

const data = [{ value: '@charset' }, { value: '@document' }] as const

const prefixes = data.map(d => getComposer(d.value))

const something = prefixes[0]('blue')
console.log(something) // → '@charset: blue;'
// const something: "@charset: blue;" | "@document: blue;"

我錯過了什么？

Answer 1

我認為您需要 go 到 generics：

  const createPrefix = <A extends string>(a: A) => <B extends string>(b: B) => {
    return `${a}:${b}` as `${A}:${B}`
  }
  function getComposer<T extends Prop>(s: T) {
    switch (s.value) {
      case "background":
        return createPrefix<T['value']>(s.value)
      case "color":
        return createPrefix<T['value']>(s.value)
      default:
        return assertNever(s);
    }
  }