ReactNative - "expo start" works with tsx file which is not conforming typescript grammar

Viewed 234

I've just started reactive native. I created a project with "expo init" with "blank (TypeScript)" option selected.

Created a component called GoalItem.tsx as below,

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

const GoalItem = props => (
  <View>
    <Text>{props.title}</Text>
  </View>
)

export default GoalItem

It's just a javascript code in tsx file. When typed tsc in the terminal, I get errors related to typescript grammar which is expected.

When I typed expo start, it just works well without any warnings nor errors.

Questions: How do we make expo start to check typescript grammar first?

This is my tsconfig.json file

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}
1 Answers

I've also been wondering about this. The only hacky solution i've found is to change the script to manually compile typescript first and then run expo. I don't believe it works with every refresh of the code but at least you have the reassurance that if you restart "start" then you get typescript compilation.

In package.json this is what i've changed

"scripts": {
    "start": "yarn tsc && expo start" <-- change is here
    [...]
}

This will also read a valid tsconfig.json if present.

Keep in mind you need to execute the "start" script for this to work e.g. "yarn start" and not just "expo start".

Related