SERIES: React Native (Step by Step) — Working with Typescript and Linting

Typescript — WHY?

  • I am working with typescript in my 9 to 5 job on a regular basis
  • I like the additional information, my IDE can draw from strongly typed code
  • Many of my reusable code bits will at some point be put into separated repositories and distributed via NPM

Typescript — HOW?

npm install -g expo-cli
expo init yourProjectName
npm start
Expo Web Interface

Typescript — Additional Setup

Linting and Prettier

eslint

npx install-peerdeps --dev eslint-config-airbnb
  • eslint@7.2.0
  • eslint-config-airbnb@18.2.1
  • eslint-plugin-react@7.22.0
  • eslint-plugin-import@2.22.1
  • eslint-plugin-react-hooks@4.0.0
  • eslint-plugin-jsx-a11y@6.4.1

linting typescript

npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

prettier linting

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  • “extends” => our presets of rules
  • “parser” => points at our typescript parser
  • “parserOptions” => as the name implies
  • “plugins” => some plugins for our convenience
  • “rules” => this is where we add our own rules and overwrite presets from the “extends” section that we disagree with

Wrapping Up

Conclusion

Some words about me:

--

--

--

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Nothing is impossible with SquadXClub Make people rich and?

Writing koa/nuxt applications

Implement useOrderedFieldArray Hook for forms using React Hook Form

axios source code walkthrough

axios instance object

Build Custom Object Detection Web Application Using TensorFlow.js

JavaScript spread operator: To infinity and beyond!

How and Why I Removed IE11 Support From Our Product

React + Webpack 4 + Babel 7 setup from Scratch

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Konrad Abe

Konrad Abe

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

More from Medium

Introduction to React Native Reanimated

Use of Higher Order Component (Hoc) in React

How to fetch 3 chain-endpoint using React Query & Axios

Paginating Firestore with Realtime Updates in React