Typescript 和 CSS 模块类型

Question

我不想对 CSS 模块使用愚蠢的 mock，而是使用真正的类型，所以我使用 webpack 插件typings-for-css-modules-loader

对于简单的 css

.foo { color: red; }
.bar { color: green; }

可以生成example.css.d.ts声明

export interface ILocals {
  'foo': string;
  'bar': string;
}
export interface IExampleCss {
  locals: ILocals;
  'foo': string;
  'bar': string;
}

declare const styles: IExampleCss

export default styles;

所以在我的代码中我可以像这样使用它

import css from './example.css';

const { locals } = css;

<div className={locals.foo}>Red</div>
<div className={css.bar}>Green</div>

而且 VSCode 知道 locals.foo 和 css.bar 成员

我尝试编写一个函数，它能够在 typescript 中获取任何 css 定义作为输入参数

interface IStringHash {
    [key: string]: string;
}
interface ICSSLocals {
    locals: IStringHash;
    [key: string]: string | IStringHash;
}

interface ISomeInterface {
    renderComponent: (css: ICSSLocals): React.ReactNode
}

const myFunction = (css: IExampleCss) => {
    return (
        <div key="1" className={css.locals.foo}>Red</div>
        <div key="2" className={css.bar}>Green</div>
    )
}

const MyRenderer: ISomeInterface = {
    renderComponent: myFunction
                     ^^^^^^^^^^
};

我得到错误：

[ts] Type 'IExampleCss' is not assignable to type 'ICSSLocals'. Type 'IExampleCss' is not assignable to type 'ICSSLocals'. Types of property 'locals' are incompatible. Type 'ILocals' is not assignable to type 'IStringHash'. Index signature is missing in type 'ILocals'.

怎么了？

我在typescript playground写了一个相关的示例

// Declaration with generics
interface IStringHash {
    [key: string]: string;
}
interface ICSSModule {
    locals: IStringHash;
    [key: string]: string | IStringHash;
}

interface returnObject {
    a: string,
    b: string
}

interface ISomeInterface {
    renderComponent: (css: ICSSModule) => returnObject
}

// usage with certain realisation
export interface ILocals {
  'foo': string;
  'bar': string;
}
export interface IExampleCss {
  locals: ILocals;
  'foo': string;
  'bar': string;
}

const myFunction = (css: IExampleCss): returnObject => {
    return {
        a: css.locals.foo,
        b: css.bar
    }
}

const MyRenderer: ISomeInterface = {
    renderComponent: myFunction
      ^^^^^^^
};

这是错误：

[ts] Type '(css: IExampleCss) => returnObject' is not assignable to type '(css: ICSSModule) => returnObject'. Types of parameters 'css' and 'css' are incompatible. Type 'ICSSModule' is not assignable to type 'IExampleCss'. Property ''foo'' is missing in type 'ICSSModule'. (property) ISomeInterface.renderComponent: (css: ICSSModule) => returnObject

Answer 1

好的做法是只需要你需要的界面而不是更多。所以看起来bar 不应该在ILocals 和foo 不应该在IExampleCss

export interface ILocals {
  'foo': string;   
//  'bar': string; <--
}
export interface IExampleCss {
  locals: ILocals;
  // 'foo': string; <--
  'bar': string;
}

const myFunction = (css: IExampleCss): returnObject => {
    return {
        a: css.locals.foo,
        b: css.bar
    }
}

旁注：对于简单的情况，您不必声明返回类型——它会被推断出来。而如果需要函数返回值的类型，可以使用ReturnType<myFunction>。