TypeScript：元素隐式具有“任何”类型，因为类型 typeof css 文件没有索引签名答案

【问题标题】：TypeScript: Element implicitly has an 'any' type because type typeof css file has no index signatureTypeScript：元素隐式具有“任何”类型，因为类型 typeof css 文件没有索引签名
【发布时间】：2018-03-13 09:08:37
【问题描述】：

我正在将 React 应用程序转换为使用 Typescript。我收到以下错误：

ERROR in [at-loader] ./src/components/Services/Services.tsx:34:29
    TS7017: Element implicitly has an 'any' type because type 'typeof "/Users/path/to/project/src/components/Services/Services.css"' has no index signature.

Webpack 配置

    const path = require("path");

module.exports = {
    context: path.join(__dirname, "src"),
    entry: ["./index.js"],
    output: {
        path: path.join(__dirname, "www"),
        filename: "bundle.js"
    },
    devtool: "sourcemap", // has to be removed in production
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"],
        modules: [path.join(__dirname, "node_modules")]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            {
                test: /\.(jsx?)$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "typings-for-css-modules-loader",
                        options: {
                            modules: true,
                            localIdentName: "[name]__[local]___[hash:base64:5]"
                            // namedExport: true
                        }
                    },
                    "postcss-loader"
                ]
            },
            {
                test: /\.(jpeg|jpg|png|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "images/"
                        }
                    }
                ]
            }
        ]
    }
};

这是我的 tsconfig：

{
    "compilerOptions": {
        "outDir": "./www/", 
        "sourceMap": true,
        "noImplicitAny": true,
        "alwaysStrict": true,
        "strictNullChecks": true, 
        "module": "es6", 
        "moduleResolution": "node",
        "jsx": "react", 
        "target": "es5",
        "allowJs": true,
        "allowSyntheticDefaultImports": true
    },
    "include": ["./src/**/*"]
}

这是 Services.tsx 文件：

import React from "react";
import ReactDOM from "react-dom";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import queryString from "query-string";

import * as styles from "./Services.css";
import globalStyles from "../../styles/global.css";
import SubHeader from "../common/SubHeader";

class Services extends React.Component<any, any> {
    constructor() {
        super();
    }

    render() {
        return (
            <div className={styles["services"]}>
                <SubHeader text={"MY SERVICES"} />
                <div className={styles["body"]}>
                    //loop over props and render
                </div>
            </div>
        );
    }
}

function mapStateToProps(state: any) {
    return {
        services: state.services,
        vehicles: state.vehicles
    };
}

export default connect(mapStateToProps)(Services);

这是 Services.css 文件：

.services {
    padding-top: 64px;
    .body {
        margin: 16px;
    }
}

这是由 typings-for-css-modules-loader 创建的 Services.css.d.ts 文件：

export interface IServicesCss {
  'services': string;
  'body': string;
}

export const locals: IServicesCss;

我正在使用 typescript: "^2.7.2" 和 typings-for-css-modules-loader: "^1.7.0"

我无法弄清楚错误的含义。我在网上搜索了所有关于索引签名相关的资源。由于我是 Typescript 的新手，因此无法弄清楚解决问题需要什么。

【问题讨论】：

如果您显示 Services.tsx 文件，其中标记了错误，这肯定会有所帮助。
同时共享 .css 文件。看起来你正在使用一些允许你将 CSS 编写为 Typescript 的模块。
@kshetline 添加了 tsx 文件。请看一看。
@Evert 添加了 css 和 css.d.ts 文件。请看一看。
import * as styles from "./Services.css"; 没有意义。

标签： reactjs typescript typescript-typings typescript2.0

【解决方案1】：

试试这个可能会有所帮助article for style loader

Typescript 无法加载 css 文件或找不到相同的声明，请尝试这些 webpack.config.js 在插件中添加样式加载器的更改可能会有所帮助，您的相关问题将得到解决

【讨论】：

我已经添加了。该加载程序是创建 Services.css.d.ts 的加载程序。但它没有帮助的问题。

【解决方案2】：

错误/警告即将到来，因为 namedExport 未设置为 true。（我把它注释掉了）

注意：即使使用 namedExport: false，代码也会运行。但是创建的 .css.d.ts 文件将具有以下结构：

export interface IServiceDetailCardCss {
  'service-detail-card': string;
  'left-col': string;
  'amount': string;
  'symbol': string;
}

export const locals: IServiceDetailCardCss;

但是，如果你设置 namedExport: true，每个类名都将是一个单独的命名导出，像这样：

export const serviceDetailCard: string;
export const leftCol: string;
export const amount: string;
export const symbol: string;

..您将能够像在 JSX 中引用 styles.serviceDetailCard 一样引用它们。

注意：如果你启用了namedExport: true，你还应该将它与camelCase: true结合起来，将some-classname类型的类名转换为someClassname。

【讨论】：