时间戳

首页 > 解决方案 > 在 Typescript 中编写简单的测试会导致类型断言错误

reactjs - 在 Typescript 中编写简单的测试会导致类型断言错误

问题描述

使用 typescript 定义测试输出Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.错误。

./app.test.ts

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div); // here the error is produced
});

组件应该如何在 Typescript 中定义？

来自 CRA Facebook 页面的示例代码

编辑：@rzelek 接受的答案指出了正确的方向。

正如JSX 手册中所定义的，编译器选项定义了解释 JSX 的方式。在我使用的情况下"jsx": "react"，这意味着需要使用React.createElement()方法来创建组件（参见 JSX 手册中的表格）：

最终结果：./app.test.ts

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const app = React.createElement(App);
  const div = document.createElement('div');
  ReactDOM.render(app, div);
});

标签： reactjstypescriptreact-dom

解决方案

包含的打字稿文件JSX应具有*.tsx扩展名而不是.ts.

你可以在这里看到类似的问题：https ://github.com/palantir/tslint-react/issues/141

此外，您tsconfig.json应该有适当的配置。对于我的 CRA 应用程序，这是：

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
  }
}

https://www.typescriptlang.org/docs/handbook/jsx.html

您看到的错误很可能来自 tslint，而不是 Typescript 本身。你可以在这里看到一条规则：https ://palantir.github.io/tslint/rules/no-angle-bracket-type-assertion/ 。CRA 的基本 tslint 配置应该类似于以下内容：

{
  "extends": ["tslint:latest", "tslint-react"],
  "rules": {
    // override tslint-react rules here
    "jsx-wrap-multiline": false
  }
}

作为一个好的起点，您可以尝试添加"no-angle-bracket-type-assertion": false规则tslint.json并查看错误是否消失。

PS。tslint 通常会指出错误的来源，例如： ERROR: app/components/Root/index.ts[6, 7]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.

推荐阅读