首页 > 解决方案 > ImmutableJS 列表类型未在 React 中定义

问题描述

我收到打字稿错误:

'List' refers to a value, but is being used as a type here.

但是 immutable.d.ts 确实有导出接口 List 类型。所以我不确定发生了什么。

这是我试图从中引用的文件:

import * as React from 'react';
import {IProduct} from "./Product";
const { List } = require('immutable');

interface GantryFootProps {
    orders: List<IOrder>;
}

export interface IOrder {
    product: IProduct
    quantity: number;
}

export const GantryFoot: React.FunctionComponent<GantryFootProps> = (props) => {
    return (<div>
        <h2>Gantry Foot</h2>
    </div>)
}

我的 tsconfig

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es2015",
    "jsx": "react",
    "allowJs": true,
    "lib": ["es2015", "dom"]
  },
  "exclude": [
    "node_modules"
  ]
}

和我的 webpack.config

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader','sass-loader'],
            }
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    externals: {
        "react": 'React'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [new MiniCssExtractPlugin({
        filename: 'main.css',
        chunkFilename: '[name].css'
    })]
};

关于错误原因的任何其他线索将不胜感激。谢谢!

标签: javascriptreactjstypescriptimmutable.js

解决方案


假设您正在运行 TypeScript 3.8+,您可以使用import type { List } from "immutable"Playground),

对于较低的 TypeScript 版本,您可以使用import { List } from "immutable"( Playground ) 并让 webpack 从您的块中删除不可变的。

文档import type


推荐阅读