React Native Expo Launch disregards typescript errors

While using Expo with Typescript, I've noticed that when I run the app with expo start or potentially build it, TypeScript errors are being ignored.

Although Visual Studio Code still flags these errors, I can still reload the App and run it on my phone in Expo Go, which may lead to runtime errors.

Is there a way to alter this behavior so that compilation errors trigger an error when attempting to reload/run/build the app?

This is how my tsconfig file looks:

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

(I tried adding noEmitOnError but it didn't seem to change the behavior in either direction)

Answer №1

I was not too pleased with the response I received from the expo team when they said it would be unwise to check something like this.

In my opinion, a build should fail at the very least when a name cannot be found TS2304 or cannot be found but is similar TS2552, which could lead to a runtime error.

Here is a workaround:

! 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 directory (effectively to find these types 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 start with yarn run check:tsc

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

I hope this information proves helpful to someone.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with loading Angular 9 application on Internet Explorer 11

Having trouble with my app not loading in IE 11 after adding ngx-treeview. Encountering the error (SCRIPT1002: Syntax error), Script Error Error point in vendor.js Unsure how to resolve this issue. Works fine in chrome and firefox, but in IE11 all I se ...

Using NextJS to execute a Typescript script on the server

I am working on a NextJS/Typescript project where I need to implement a CLI script for processing files on the server. However, I am facing difficulties in getting the script to run successfully. Here is an example of the script src/cli.ts: console.log(" ...

How to display the Tab Bar within a React Native component class when there are no active tabs

When the application launches, there is an initial screen with 5 tabs displayed. However, none of the tabs are currently selected. The screen and the tabs have their own unique user interfaces. ...

Using TypeScript to Add Items to a Sorted Set in Redis

When attempting to insert a value into a sorted set in Redis using TypeScript with code like client.ZADD('test', 10, 'test'), an error is thrown Error: Argument of type '["test", 10, "test"]' is not assigna ...

Blazing Paths with an Isomorphic Application Using Inferno and TypeScript

I am currently working on building an isomorphic application using Express and Inferno. Strangely, I have not come across any similar projects online. In my attempt to create one myself by following a guide on Razzle, specifically related to Inferno, I enc ...

Tips for binding to a single input box within an ngFor loop

Can anyone lend a hand with some code? I'm working on a straightforward table using ngFor, but I'm facing an issue with input binding. The problem is that all the input fields generated by ngFor display the same value when typing. How can I preve ...

Enhancing search capabilities in Angular 8.1.2 by filtering nested objects

I am in need of a filter logic similar to the one used in the example posted on this older post, but tailored for a more recent version of Angular. The filtering example provided in the older post seems to fit my requirements perfectly, especially with ne ...

Angular template error: Potential is present but not defined

Encountering an issue with my Angular application's template file (dashboard.component.html). The error message reads "Object is possibly 'undefined'." Here's the portion of the template that seems to be causing the problem: <div> ...

Encountered a problem while trying to install 'create-react-native-app' via npm

Encountering a problem during the installation process of the create-react-native-app application. npm install -g create-react-native-app npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND npm ERR! network request to https://registry.npmjs.org/create-react ...

How can I get the class name of the drop destination with react-dnd?

Imagine having this component that serves as a drop target module. import { useDrop } from 'react-dnd'; import './css/DraggableGameSlot.css'; type DraggableGameSlotProps = { className: string, text: string } function Draggable ...

Struggling to locate the app icon when building with React Native for iOS

I set up react-native from the official website following these steps. (I installed node.js and openJDK separately) System Information Operating System: Mac OSX Mojave 10.14.6 XCode Version: 11.0 (11A420a) node(nvm) Version: 10.15 react Version: 16.9.0 ...

Creating Child Components in Vue Using Typescript

After using Vue for some time, I decided to transition to implementing Typescript. However, I've encountered an issue where accessing the child's methods through the parent's refs is causing problems. Parent Code: <template> <re ...

What is the proper way to compare enum values using the greater than operator?

Here is an example enum: enum Status { inactive = -1, active = 0, pending = 1, processing = 2, completed = 3, } I am trying to compare values using the greater than operator in a condition. However, the current comparison always results in false ...

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

Issue with saving date values accurately in Nestjs/Prisma

After logging the response body before saving it to the database, I noticed that the shape is correct. Here's what it looks like: //console.log response body CreateOpenHourDto { day: 'WEDNESDAY', startTime: 1663858800000, endTime: 16638786 ...

Substitute this.bindMethod for function component

I have a class component that is structured like this: interface MyProps { addingCoord: any resetCoords: any } interface MyState { x: any y: any } class DrawerOld extends React.Component<MyProps, MyState> { width: number height: number ...

An error occurred while defining props due to a parsing issue with the prop type. The unexpected token was encountered. Perhaps you meant to use `{`}` or `}`?

const dataProps = defineProps({ selectedData: <Record<string, string>> }); Under the closing bracket, there is a red line indicating: Error: Unexpected token. Consider using {'}'} or &rbrace; instead?eslint Expression expecte ...

While using Angular CLI on GitLab CI, an error occurred indicating that the custom rule directory "codelyzer" could not be

ng lint is throwing an error on Gitlab CI stating: An unhandled exception occurred: Failed to load /builds/trade-up/trade-up/common/projects/trade-up-common/tslint.json: Could not find custom rule directory: codelyzer. The strange thing is that ng lint ru ...

The 'split' property is not found on the 'Int32Array' type

ERROR located in src/app/account/phone-login/phone-login.component.ts(288,53): error TS2339: Property 'split' is not a valid property for type 'string | Int32Array'. Property 'split' cannot be found on type 'Int32Array& ...

Angular form retains the previous value when saving

I encountered an issue with my form component where it displays previous values instead of updated ones during a save operation. The strange part is that if I close the form and reopen it, the new values are then shown correctly. It seems like the problem ...