在 Typescript 中编写简单测试会给出类型断言错误

Question

使用打字稿定义测试输出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 中应该如何定义组件？

Example code from CRA Facebook page

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

如 JSX handbook 中所定义，编译器选项定义了 JSX 的解释方式。在我的例子中使用了 "jsx": "react" 所以这意味着需要使用方法 React.createElement() 来创建一个组件（参见 JSX 中的 table手册）：

最终结果：./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);
});

Answer 1

包含 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.

Answer 2

您的 <App> 组件是如何定义的？

假设这些是组件属性和状态接口（我通常在每个组件的文件开头定义它们）：

interface Props {
   //... some props
}
interface State {
   //... some state
}

一个class组件可以这样定义

class MyComponent extends React.Component<Props, State> { ... }

函数组件可以这样定义

const MyComponent: React.FC<Props> = ...

您可能需要查看 react-redux-typescript-guide

此外，

在 Typescript 中编写简单测试会给出类型断言错误

Writing simple test in Typescript gives type assertion error

reactjs

typescript

react-dom