Unofficial React Native TypeScript

Uses react-native-cli instead of ExpoBuilding a React Native App using Expo and Typescript (Part 1) (May, 2018): A fairly complicated setup; additional folders, scripts, etc.Creating a Minimal Expo React Native Project with TypeScript and Jest (December, 2018): A fairly simple setup; seems too good to be trueNot finding the official Expo documentation on TypeScript, I thought to follow the simpler setup; making observations along the way.note: At some point, hopefully soon, I expect this article to be irrelevant as Expo will undoubtedly officially support TypeScript (with documentation).PrerequisitesWe start with an Expo project; documented in Quick Start — Getting Started — React Native.note: This article was written with the latest version of Expo; as of this writing 31.0.2.As the Expo initialization process appears to prefer Yarn over npm, we will use Yarn for our project.While not required, using a TypeScript aware editor such as the no-cost Visual Studio Code is extremely helpful; in this case it is also recommended to add the TSLint and Prettier -Code Formatter extensions.Also not required is any understanding of TypeScript, but one will not get far without it..Recommend another article that I wrote; TypeScript: The Hard(er) Parts: Part 1.Quick StartThe remaining sections of this article, goes through details on the what and whys for each of the configuration changes to support TypeScript with Expo.note: A working example is available for download.For a quick start, however, one can do the following:Start from an Expo project; validated on version 31.0.2Create src folder and copy App.js to src/App.tsxCreate App.tsInstall the dependencies:yarn add typescript -Dyarn add @types/reactyarn add @types/react-nativeyarn add @types/expoyarn add tslint -Dyarn add prettier -Dyarn add tslint-config-prettier -Dyarn add tslint-plugin-prettier -Dyarn add tslint-react -Dyarn add chokidar-cli -Dyarn add jest -Dyarn add @types/jest -Dyarn add ts-jest -Dyarn add jest-expo -Dyarn add react-test-renderer -Dyarn add @types/react-test-renderer -D5..Create tsconfig.json6..Create tslint.json7..Create .prettierrc8..Create jest.config.js9..Add new script entries to package.json:{ …."scripts": { …."ts": "tsc", "ts-watch": "tsc -w", "ts-lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'", "ts-lint-watch": "yarn ts-lint; chokidar 'src/**/*.{ts,tsx}' -c 'yarn ts-lint'", "test": "jest", "test-watch": "jest –watch" }, …}10..Create a sample test, e.g , src/App.test.tsxWith these changes in place, you can still run all the Expo commands, e.g.,yarn startWe can type check:yarn tsAppending -watch, e.g., yarn ts-watch, to this and any of the remaining commands continually executes the command on file changes.We can lint:yarn ts-lintLinting will report errors, e.g., src/App.tsx will have a couple of errors.We can test:yarn testThat is it, we can now continue our development using TypeScript.TranspilingWe need to transpile (convert) TypeScript to JavaScript before it can run in the React Native JavaScript engine.We begin by renaming App.js to App.tsx..Now, we simply use the normal Expo command to start the application:yarn startWhat?!?.????First, because TypeScript is a super-set of JavaScript and because the code is very simple, App.tsx is valid TypeScript.Second, Expo uses the library @babel/plugin-transform-typescript under the hood to transform TypeScript to JavaScript.Type CheckingIt turns out that our solution, while easy, does not actually enforce type checking.Does not type-check its input.. More details

Leave a Reply