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

Question

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

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

问题是项目没有被两个加载器编译为'ts-loader'和'awesome-typescript-loader'。它不会拾取nextjs项目中存在的pages文件夹下的_document.tsx文件。

标签： typescriptwebpacknext.jstypescript-typings

Answer 1

观看ts-patch , ts-transformer-keys

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

UPD 如果上限不起作用，请设置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.