How to set up Type Script with React (.tsx) using babel 7 via settings in webpack 4 config?

Question

typescript

How to set up Type Script with React (.tsx) using babel 7 via settings in webpack 4 config?
I use the following babel settings in webpack config:

module.exports = () => ({
  module: {
    rules: [
      {
        test: /\.j|tsx?$/,
        loader: 'babel-loader',
        exclude: /\/node_modules\//,
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            ["@babel/preset-typescript", {
              "isTSX": true,
              "allExtensions": true
            }]
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties'
          ],
        }
      }
    ]
  }
});

The code of the test.tsx file itself does not give errors in concholi, everything is clean:

import React, { PureComponent } from 'react';
import './test.pcss';

interface Props {
  name: boolean
}

export default class Test extends PureComponent<Props> {
  render() {
    const { name } = this.props;
    return (
      <div className="test">
        <span>{name}</span>
      </div>
    )
  }
}

Initialization of the name prop in the Test component:

import ReactDOM from 'react-dom';
import React from 'react';
import Test from './tmp';

document.addEventListener('DOMContentLoaded', ()=> {
  ReactDOM.render(
    <Test name={12312312}/>,
    test
  );
});

Please help guys, it's hard to figure out why there are no errors, the data format is incorrect, it should be a string, and I'm passing a number

Answer 1

I'm no expert, but ts doesn't seem to need babel.
For ts, "ts-loader" or "awesome-typescript-loader" is used. There seems to be a short webpack config for React + ts in the doc.
I made my starting config for projects a couple of months ago, it's very simple and easy to scale, if you want you can use it https://github.com/Riveran/react-redux-ts-scss-boi...

Answer 2

Babel with the TypeScript preset does not perform checks, but only strips type annotations from the code.
For typechecking, you need to either run the TypeScript compiler (node_modules/.bin/tsc) on the project, or set up fork-ts-checker-webpack-plugin .