Example of React Native + TypeScript with TSLint and Prettier
MIT License
Example of React Native + TypeScript with TSLint and Prettier
react-native
version is 0.51.0
react-native init ReactNativePractice
cd ReactNativePractice
react-native run-ios
(or run-android
)Almost the same as https://github.com/Microsoft/TypeScript-React-Native-Starter
cd ReactNativePractice
mkdir src
mv index.js src
mv App.js src
mv ./__tests__/ ./src/__tests__/
touch index.js
and write import './src/index';
into the index.js
Try to run react-native run-ios
(or run-android
)
yarn add --dev typescript
tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --module commonjs --jsx react
Append "include": ["./src/"]
into tsconfig.json
Replace import './src/index';
with import './lib/index';
in ReactNativePractice/index.js
Write the following code into package.json
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/",
"<rootDir>/lib/"
],
"cacheDirectory": ".jest/cache"
}
yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer
Change the file extensions of src/index.js
, src/App.js
and src/__tests__/App.js
from .js
to .tsx
Modify src/App.tsx
import React, {Component} from 'react';
with import * as React from 'react';
Component<{}>
with React.Component<object, object>
Modify src/__tests__/App.tsx
import React from 'react'
with import * as React from 'react';
import renderer from 'react-test-renderer';
with import * as renderer from 'react-test-renderer';
yarn add --dev jest-cli
Append the following code into scripts
in package.json
"build": "tsc",
"build:watch": "tsc --watch",
"test": "jest"
Try to run the scripts npm run build
npm run build:watch
npm run test
yarn add --dev --exact tslint prettier tslint-config-prettier
node_modules/.bin/tslint --init
Append tslint-config-prettier
into extends
in tslint.json
Append the following code into scripts
in package.json
"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
"format": "prettier --find-config-path --write 'src/**/*.tsx'"
Add .prettierrc
to project root with the following content
{
"singleQuote": true
}
Try to run the scripts npm run lint
npm run format
TSLint and Prettier are useful if you use Visual Studio Code.
react-native run-ios
npm run build:watch
R
for iOS, RR
for Android)