Ошибка синтаксического анализа: ожидается '>' после переименования файла в 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 угловые скобки используются для элементов, но в машинописном тексте они используются для утверждений типа. Поэтому при попытке синтаксического анализа файла, который использует и то, и другое, нет четкого способа определить, что есть что, во всех случаях. Элементы JSX. Это можно сделать по расширению файла. В файле .tsx вы можете использовать элементы JSX, и парсер никогда не будет ошибочно думать, что это утверждения типа. Следствием этого является то, что вы не можете последовательно использовать утверждения угловых скобок в файле .tsx, поэтому вместо этого вы должны использовать утверждения as.