Type checks not working in a create-react-app typescript project

Question

I have created a new react project using the command npx create-react-app my-app --template typescript. Then introduced some type errors but yarn build is not catching those.

The changes i made are

Create a new file test.tsx under the src directory with following contents

type Props = {
  message: string
}

export function getValue(props: Props): string {
  return props.message1
}

Call the above function from index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {getValue} from "./test"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

console.log(getValue({message: "test"}))

Run yarn build, its not throwing any typescript errors

Github repo - https://github.com/kanagarajkm/my-app-ts

Any help here is really appreciated. Thanks.

@RobertoZvjerković this was a mistake while typing. The actual file name is test.tsx. you can check it here github.com/kanagarajkm/my-app-ts/blob/main/src/test.tsx — Kanagaraj M
– Kanagaraj M, Commented Jun 29, 2021 at 7:29

aleksxor · Accepted Answer · 2021-06-29 09:13:51Z

6

Create-react-app's typescript template uses typescript for typecheking only. You can see typescript errors in your IDE (if it supports typescript language server) while developing application. Or running tsc directly from command line.

build script uses babel-loader with preset-typescript for transpiling only. It means if typescript code is syntactically correct (but can fail type checking) it will be transpiled into .js files regardles of any typescript errors.

If you want to build your bundle only after it successfully typechecks you may modify package.json build command for react-scripts build to run after tsc finished without errors:

...
    "scripts": {
        ...
        "build": "tsc && react-scripts build",
        ...
    },
...

answered Jun 29, 2021 at 9:13

aleksxor

8,5001 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Type checks not working in a create-react-app typescript project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related