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

Typescript — WHY?

There are a lot of strong sentiments and feelings around typescript that go in both directions. The die-hard fans swear by the fact that thanks to typescript, their code is now less buggy, more stable, easier to reason about and easier to extend, share or collaborate on. On the other side of the ring, we have those who deem typescript a nuisance, something that creates a lot of unnecessary overhead and in some cases even duplication while not actually fixing any issues at runtime.

  • 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?

Starting a new project could not be easier. As in earlier projects, we will again start with Expo and we will stay in the managed workflow to keep things nice and easy.

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

Typescript — Additional Setup

Of course, you might want to customise your own project a bit more. The basic setup is nice and all but maybe we can import a few sensible presets, add a few more rules to our linting and throw in an editor config file.

Linting and Prettier

To get started with linting, we’ll need to install both eslint and a bunch of smart presets that we’re gonna use for development.
We will also be using Prettier to automatically fix the easier formatting stuff so that we do not need to adjust all indentations and semicolons in copied code snippets from the web.

eslint

We are going to use the Airbnb ESLint setup and there are multiple necessary packages. Fortunately, eslint-config-airbnb exists and makes things easy. You only need to run:

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

To work with Typescript, we need to install the libraries that will enable us to lint Typescript code as well.

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

prettier linting

The installation of Prettier is similarly easy to that of Typescript. We need a config and a plugin.

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

When you now finally run the linter scripts, you will find 2 things.
Running npm run lint will show you a long list of minor issues. This is not because the basic template has errors but our custom set of rules has diverging paradigms (like my preference to not use semicolons, to enforce trailing comma and to use an indentation of 4).

Conclusion

We’ve started a new project with a typescript template, added linting and eslint typescript support and adjusted our rules as we seemed fit. We also included Prettier’s auto fixing ability and reached the goal of today’s journey.

Some words about me:

If you want to see more of my work and progress, feel free to check out my other articles. I’m also currently working on a new series about building more complex and scalable apps using React/Redux, where I’ll go into details about how and why I do stuff the way I do as well as some articles on my experience in building games for web and mobile with React.

--

--

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 🎟