CODEWITHSUNDEEP
typescriptreact-nativeexpo
Nathan
Nathan

Reputation: 78409

React Native Expo Start ignores typescript errors

I'm using Expo with Typescript, and when running with expo start (and potentially building), it ignores my TypeScript errors.

VS Code will still show an error, but I can reload the App and run it on my phone in Expo Go (potentially leading to runtime errors).

How can I change this behavior, so that compilation errors result in an error when I try to reload/run/build the app?

My tsconfig looks like this:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noEmitOnError": true
  },
  "extends": "expo/tsconfig.base"
}

(I added noEmitOnError to see if that helped, it doesn't seem to change the behavior either way)

Upvotes: 4

Views: 1424

Answers (1)

microsoftvamp
microsoftvamp

Reputation: 178

i didnt appreciate the response from the expo team saying it would be unwise to check something like this.

imo a build should fail at the very least when a name cannot be found TS2304 or cannot be found but is similar TS2552 which would cause a runtime error.

here is a way around this:

! npx tsc --noEmit | grep 'TS2552\|TS2304'
  • !: invert the exit code (because grep will return 0 if a match is found and 1 if not)
  • tsc --noEmit: builds without outputting to a dir (effectively to find these sorts of build errors)
  • |: pipe the output from the noEmit build to the next command
  • grep 'TS2552\|TS2304': look for the TS error 2552 or 2304

(you can add any other rules to look for with \|<rule>, the \| is a way of escaping the or in grep)

you can add this to your package scripts so it can be used to prefix other commands like local / deployment etc using && or the pre<scriptname> syntax. if it exits 0 then && will continue to the next script, if it exits 1 then it will stop and fail early, the same is true for the prescript.

example scripts / usage:

(note the double \\ escape for json)

with short circuit

"scripts": {
  "check:tsc": "! tsc --noEmit | grep 'TS2552\\|TS2304'",
  "ios": "yarn run check:tsc && npx expo run:ios",
  ...
}

with prescript

running yarn run ios will now begin with yarn run check:tsc

"scripts": {
  "check:tsc": "! tsc --noEmit | grep 'TS2552\\|TS2304'",
  "preios": "yarn run check:tsc",
  "ios": "npx expo run:ios",
  ...
}

hope this helps someone.

Upvotes: 4

Related Questions