ImmutableJS 列表类型未在 React 中定义答案

【问题标题】：ImmutableJS List type not defined in ReactImmutableJS 列表类型未在 React 中定义
【发布时间】：2020-11-23 18:19:54
【问题描述】：

我收到 Typescript 错误：

'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>)
}

我的配置文件

{
  "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'
    })]
};

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

【问题讨论】：

您的文件扩展名是.tsx 吗？
@AkashDathan 是的，没错

标签： javascript reactjs typescript immutable.js

【解决方案1】：

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

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

Documentation for import type

【讨论】：

在这种情况下，我得到“找不到模块不可变”。