Неизменяемый JS Тип списка не определен в React - PullRequest
Новая
       66

Неизменяемый JS Тип списка не определен в React

0 голосов
/ 03 августа 2020

Я получаю ошибку 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>)
}

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

Мы будем очень благодарны за любые другие подсказки относительно причины ошибки. Спасибо!

1 Ответ

0 голосов
/ 03 августа 2020

Предполагая, что вы используете TypeScript 3.8+, вы можете использовать import type { List } from "immutable" ( Playground ),

для более низких версий TypeScript, вы можете использовать import { List } from "immutable" ( Playground ) и попросите webpack удалить неизменяемый объект из вашего чанка.

Документация для import type

...