Question

我正在为我的项目使用typescript，并使用i18next进行内部化。

typescript：v2.1.4

i18next：v2.3.4

@ types / i18next：v2.3.35

在我的档案中：

import * as i18next from 'i18next';

i18next.init({
    lng: 'en',
    resources: {
        en: {
            translation: {
                "key": "hello world"
            }
        }
    }
}, (err, t) => {
    // initialized and ready to go!
    const hw = i18next.t('key'); // hw = 'hello world'
});

然而，在浏览器中它说：

Uncaught TypeError: i18next.init is not a function

如果我记录i18next对象，它看起来像：

并在控制台中

i18n.default.init

效果很好。

如果像文件一样导入

import i18next from 'i18next';

视觉工作室代码中的

会抱怨：

我的.tsconfig

{
    "compileOnSave": true,
    "compilerOptions": {
        "removeComments": false,
        "baseUrl": "./src",
        "target": "es6",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "jsx": "preserve",
        "lib": [
            "es2017",
            "dom"
        ],
        "typeRoots": [
            "./node_modules/@types"
        ],
        "types": [
            "node",
            "poly2tri",
            "three",
            "i18next"
        ]
    }
}

我的webpack.config.js太长了，无法阅读。

我想知道与文件有关的内容：http://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-class-d-ts.html

/*~ Note that ES6 modules cannot directly export class objects.
 *~ This file should be imported using the CommonJS-style:
 *~   import x = require('someLibrary');
 *~
 *~ Refer to the documentation to understand common
 *~ workarounds for this limitation of ES6 modules.
 */

Answer 1

您遇到的问题与

有关

https://github.com/Microsoft/TypeScript/issues/7398

https://github.com/Microsoft/TypeScript/issues/8687

https://github.com/systemjs/systemjs/issues/1587

TypeScript和Babel / NodeJS中的模块分辨率语法不同。

在Babel / NodeJS（最新草案）中，使用以下语法导入CommonJS模块：

import i18n from 'i18next'

即。 CommonJS模块移动到ES6模块的default导出。

但是，TypeScript不遵循此路线：

import * as i18n from 'i18next'

因此，当tsc编译为es6时，此导入语句保持不变。因此巴贝尔做错了。

请在上述问题中提高自己的声音，以获得团队的更多关注。

这个问题应该是一个P1并尽快解决。

目前，一种解决方案是将代码编译为es5到tsc。

Answer 2

TL; DR

在i18next版本17.0.0+中，您必须通过以下方式导入它：

import { default as i18n } from 'i18next';

在tsconfig.js中设置"esModuleInterop": true以使其与jest一起使用。

tsconfig.js中有其他模块选项（不确定是否需要所有这些选项才能使它起作用）

"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"module": "es6",
"moduleResolution": "node",
"target": "es6",

说明

In v17.0.0 i18next changed how the module is exported：

删除主文件中的命名导出-避免混合导出时出现问题，从而在commonjs场景（node.js）中更好地使用-没有奇怪的const i18next = require（'i18next'）。default;

影响您无法再从“ i18next”导入{changeLanguage}； changeLanguage（'de'）;您将必须从“ i18next”导入i18next； i18next.changeLanguage（'de'）;

未捕获的TypeError：i18next.init不是函数

2 个答案:

TL; DR

说明