nextjs项目中如何使用ts-transformer-keys？

Question

我想从接口获取键作为字符串数组，以便我可以迭代 them.Over Whosebug 我发现我需要使用一个库 'ts-transformer-keys'。由于在 nextjs 项目中我们同时拥有 webpack 和 typescript 所以我添加了 webpack 的配置和 tsconfig.json 提到的 ttypescript 和下面提到的 webpack link.

https://github.com/iqraabdulrauf/ts-transformer-keys/blob/master/README.md

问题是项目没有使用两个加载器 i.s 'ts-loader' 和 'awesome-typescript-loader' 进行编译。它没有获取 nextjs 中 pages 文件夹下的 _document.tsx 文件项目。

Answer 1

观看ts-patch , ts-transformer-keys

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "plugins": [
      { "transform": "ts-transformer-keys/transformer" }
    ]
  },
  // ...
}

UPD 如果 upper 不起作用，请设置 next.config.js:

const keysTransformer = require('ts-transformer-keys/transformer').default;
const enumerateTransformer = require('ts-transformer-enumerate/transformer').default;
const isTransformer = require('typescript-is/lib/transform-inline/transformer').default;

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = (phase, { defaultConfig }) => {

    const config = {
        webpack: (config, options) => {
            config.module.rules.push({
                test: /\.ts$/,
                loader: 'ts-loader', // or 'next-babel-loader'
                options: {
                    // make sure not to set `transpileOnly: true` here, otherwise it will not work
                    getCustomTransformers: program => ({
                        before: [
                            keysTransformer(program),
                            enumerateTransformer(program),
                            isTransformer(program)
                        ]
                    })
                }
            });

            return config
        },
    };
    if (phase === PHASE_DEVELOPMENT_SERVER) {
         // ...
    }

    return Object.assign (config, {
        // constants to process.env.
    });
};

如果没有安装，请安装 ts-loader。您也可以使用 next-babel-loader.

nextjs项目中如何使用ts-transformer-keys？

How to use ts-transformer-keys in nextjs project?

typescript

webpack

typescript-typings

next.js