分析错误:'>'将文件重命名为ts后应为

Question

帮助。我检查每一个代码已经很长时间了，但我不明白这里出了什么问题。

import React from 'react'
import css from './FormsControls.module.css'
import commonCss from '../styles.module.css'
import { Field } from 'redux-form'
import cn from 'classnames'
const FormControl = ({ input, meta: { touched, error }, children, text, mainClass, noerror }) => {
const hasError = touched && error
return (
<div className={cn(css.formControl, mainClass)}>
<label htmlFor={input.name}>{text}</label>
{children}
{!noerror && hasError && <div className={css.error}>{error}</div>}
</div>
)
}

这个问题是在将文件从js重命名为ts后出现的，正如你所看到的，这不是由于类型造成的

Answer 1

简而言之：如果您想将JSX和Typescript结合起来，您需要使用.tsx，而不是.ts。

JSX和Typescript都是独立开发的javascript的扩展。因此，它们的语法有一些冲突，特别是与尖括号的含义冲突。在JSX中，尖括号用于元素，但在typescript中，它们用于类型断言。因此，当试图解析一个同时使用两者的文件时，并没有一个明确的方法来判断在所有情况下什么是什么。

为了解决这个问题，typescript允许您指定应该假设尖括号是JSX元素。执行此操作的方法是使用文件扩展名。在.tsx文件中，您可以使用JSX元素，解析器永远不会错误地认为它们是类型断言。这样做的结果是，不能在.tsx文件中一致地使用尖括号断言，因此应该使用as断言。