машинописный текст не улавливает несоответствие типов (реагировать на TSX)

Новичок в TypeScript и React здесь. Почему TypeScript не кричит на меня из-за того, что тип ввода constructor(foo: string) не соответствует {foo: string}? (Примечание: один из них — строка, другой — объект.)

TypeScript с радостью скомпилирует это, и, конечно же, полученный код взорвется. Я попытался включить все параметры, которые может предложить tsconfig.json. Я использую машинопись 2.5.3.

Есть ли способ, например, конфигурация машинописного текста, изменение кода или что-то еще, чтобы укрепить код, чтобы избежать этого? Любые идеи приветствуются, моя цель - написать стабильный код.

импортировать * как React из 'реагировать'; импортировать * как ReactDOM из 'react-dom';

class App extends React.Component<{ foo: string }, { foo: string }> {
    // expects string
    constructor(foo: string) {
        super();
        this.state = {
            foo: foo
        }
    }
    render() {
        return <div>{this.state.foo}</div>
    }
}

// Passes object { foo: string }
ReactDOM.render(<App foo="foo" />, document.getElementById('root'))

EDIT: упрощенный вопрос


reactjs typescript react-tsx
person zupa    schedule 10.10.2017    source источник
comment
Вы ведь понимаете, что это не машинопись?   -  person Amit    schedule 10.10.2017
comment
@ Амит, теперь, когда ты сказал, да, но я не знал, когда спрашивал. Спасибо. Итак, есть идеи для правильного рабочего процесса перехода JSX -> TS -> JS?   -  person zupa    schedule 10.10.2017
comment
Нет, лично я не люблю реагировать именно по этой причине. Я нахожу этот синтаксис неудобным и отвлекающим.   -  person Amit    schedule 10.10.2017
comment
@Amit, я ищу что-нибудь стабильное, поэтому ваше предложение отказаться от TSX на самом деле является улучшением, спасибо! Лично я бы предпочел сохранить его, если есть способ.   -  person zupa    schedule 11.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вы получите нужные вам жалобы на компилятор, если не забудете передать props в super(). Это всего лишь часть расширения React.Component, и должно выполняться всегда.

введите здесь описание изображения

person Mike Patrick    schedule 15.10.2017
comment
Я хотел дать вам награду, но, видимо, я могу сделать это только через 23 часа. Документирование здесь, чтобы избежать дальнейших ответов. - person zupa; 15.10.2017

arrow_upward
0
arrow_downward

Ваша забота:

// WRONG, to work, it should be:
//   constructor(props Props) {
constructor(foo: string, bar: string) {
  super();
}

недопустимо, потому что вы всегда можете наследовать класс и предоставить свой собственный конструктор:

class A {
  constructor(a: number) { }
}

class B extends A {
  // ALLOWED
  constructor(b: string) {
    super(123)
  }
}
person basarat    schedule 10.10.2017
comment
Спасибо за ответ. На самом деле, это не моя проблема. Дело в том, что тип конструктора не соответствует типу вызова ReactDOM.render(<App foo="foo" bar="bar" />, root), который передает один объект, а не 2 строки. - person zupa; 11.10.2017