在打字稿中，我将如何输入这个“撰写”功能

Question

I'm in the process of converting my Javascript library that composes styled-components to Typescript (what I've done so far is located on the typescript branch), but I'm having a hard time typing this compose function (well, some of the other composable functions as well, but for now...):

Basic usage:

const ComposedStyledComponent = compose.t(fn, fn, fn, ...etc)`
  s
`

Breakdown:

compose takes 3 args:
t(ag) = single HTML Element as property of compose or passed as ("string")
f(unctions) = composable functions (withProps(...), withStyles(...), ...etc)  -- see below for full list
s(tyles) = 
   either template literal CSS Properties:
  ` background: ${props => props.primary ? "blue" : "red" }; ` 
   
   or can be an object of CSS Properties: 
   { background: ${props => props.primary ? "blue" : "red" };

What I currently have:

import styled, { css } from "styled-components";
import domElements from "../domElements"; // ["a", "abbr", "address", "area", ...etc] 
import { ComponentType } from "../types";

// this needs to be restricted to single usage of ANY of these composable functions: 
// setDisplayName, withAttributes, withDefaultProps, withProps, withPropTypes,  withStyles
type Functions = any[]; 

const extend = (...f: Functions) =>
  f.reduce(
    (a, b) => (...args) => a(b(...args)),
    arg => arg
  );

// can be string: compose.div | compose("div) 
// or  
// it can be a React styled-component: compose(Button)
type Tag = string | ComponentType<any>;

type Interpolation =
  | ((props: Object) => Interpolation)
  | string
  | ComponentType<any>
  | Interpolation[];

type Styles = string[] | Object | ((props: Object) => Interpolation); 

const compose = (t: Tag) => (...f: Functions) => (...s: Styles[]) =>
  extend(...f)(styled(t)` // t is invalid here (see below)
    ${() => css(...s)}; // s is invalid (Expected at least 1 arguments, but got 0 or more.)
  `);

// assigns DOM elements to compose (compose.a, compose.abbr, ...etc)
domElements.forEach((element: string) => {
  // this is complaining about string indexes (see below)
  compose[element] = compose(element);
});

export { compose };

Tag is invalid:

 No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'Tag' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'string' is not assignable to type 'AnyStyledComponent'.
  Overload 2 of 2, '(component: "symbol" | "object" | ComponentClass<any, any> | FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 165 more ... | "view"): ThemedStyledFunction<...>', gave the following error.

domElement.forEach is invalid:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '(t: Tag) => (...f: Functions) => (...s: Styles[]) => any'.
  No index signature with a parameter of type 'string' was found on type '(t: Tag) => (...f: Functions) => (...s: Styles[]) => any'.

For reference, here are the styled-components types .

Any help would be greatly appreciated.

Answer 1

I'm in the process of converting my Javascript library that composes styled-components to Typescript (what I've done so far is located on the typescript branch), but I'm having a hard time typing this compose function (well, some of the other composable functions as well, but for now...):

Basic usage:

const ComposedStyledComponent = compose.t(fn, fn, fn, ...etc)`
  s
`

Breakdown:

compose takes 3 args:
t(ag) = single HTML Element as property of compose or passed as ("string")
f(unctions) = composable functions (withProps(...), withStyles(...), ...etc)  -- see below for full list
s(tyles) = 
   either template literal CSS Properties:
  ` background: ${props => props.primary ? "blue" : "red" }; ` 
   
   or can be an object of CSS Properties: 
   { background: ${props => props.primary ? "blue" : "red" };

What I currently have:

import styled, { css } from "styled-components";
import domElements from "../domElements"; // ["a", "abbr", "address", "area", ...etc] 
import { ComponentType } from "../types";

// this needs to be restricted to single usage of ANY of these composable functions: 
// setDisplayName, withAttributes, withDefaultProps, withProps, withPropTypes,  withStyles
type Functions = any[]; 

const extend = (...f: Functions) =>
  f.reduce(
    (a, b) => (...args) => a(b(...args)),
    arg => arg
  );

// can be string: compose.div | compose("div) 
// or  
// it can be a React styled-component: compose(Button)
type Tag = string | ComponentType<any>;

type Interpolation =
  | ((props: Object) => Interpolation)
  | string
  | ComponentType<any>
  | Interpolation[];

type Styles = string[] | Object | ((props: Object) => Interpolation); 

const compose = (t: Tag) => (...f: Functions) => (...s: Styles[]) =>
  extend(...f)(styled(t)` // t is invalid here (see below)
    ${() => css(...s)}; // s is invalid (Expected at least 1 arguments, but got 0 or more.)
  `);

// assigns DOM elements to compose (compose.a, compose.abbr, ...etc)
domElements.forEach((element: string) => {
  // this is complaining about string indexes (see below)
  compose[element] = compose(element);
});

export { compose };

Tag is invalid:

 No overload matches this call.
  Overload 1 of 2, '(component: AnyStyledComponent): ThemedStyledFunction<any, any, any, any>', gave the following error.
    Argument of type 'Tag' is not assignable to parameter of type 'AnyStyledComponent'.
      Type 'string' is not assignable to type 'AnyStyledComponent'.
  Overload 2 of 2, '(component: "symbol" | "object" | ComponentClass<any, any> | FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | ... 165 more ... | "view"): ThemedStyledFunction<...>', gave the following error.

domElement.forEach is invalid:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '(t: Tag) => (...f: Functions) => (...s: Styles[]) => any'.
  No index signature with a parameter of type 'string' was found on type '(t: Tag) => (...f: Functions) => (...s: Styles[]) => any'.

For reference, here are the styled-components types .

Any help would be greatly appreciated.