⤆ Go Back

Typescript for Noobs [Part 1]

Recently I have been working on javascript and to be more specific ReactJS. Latetly Typescripte was on my redar for a while. So in this post we will see basic of Typescript that I wish I knew when I started working on Typescript and React.

Typescript and React hand in hand..

React is a javascript framework created by Facebook, which uses component based development, and it's doing a damm goo job in it. It basically uses virtual DOM instead of regular DOM to manipulate the tree of website.

Typescript essentially is a strict, typed language unlike javascript. Typescript was created and maintained by Microsoft. Typescript compiles code to readable, standard bases javascript code. The important thing about typescript is that it allows to add static types to javascript code and doing so helps us to catch the error way earlier and helps in debugging process.

So in this post I am assuming that you have basic idea of what is react.

Setting up typescript can be pain in the a**, but thankfully create-react-app has a template that does that heavy work for us.

1npx create-react-app my-app-name --template typescript

Next we will setup the linters for typescript because who doesn't want cleaner and standard code. In this, I'll be using the legend ESLint and Prettier combo.

1npm install --save-dev eslint@6.8.x @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react prettier eslint-config-prettier eslint-plugin-prettier --dev

Next we will create basic configuration file for eslint. In the root of the project create a file named .eslintrc.js and add the following code.

1module.exports = {
2 parser: '@typescript-eslint/parser', // Specifies the ESLint parser
3 parserOptions: {
4 ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
5 sourceType: 'module', // Allows for the use of imports
6 ecmaFeatures: {
7 jsx: true, // Allows for the parsing of JSX
8 },
9 },
10 settings: {
11 react: {
12 version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
13 },
14 },
15 extends: [
16 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
17 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
18 'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
19 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
20 ],
21 rules: {
22 // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23 // e.g. "@typescript-eslint/explicit-function-return-type": "off",
24 },
25}

We also need to configure Prettier just like we did eslint. Create a file .prettierc.js in the root directory of the project and paste the below code.

1module.exports = {
2 semi: true,
3 trailingComma: 'all',
4 singleQuote: true,
5 printWidth: 120,
6 tabWidth: 4,
7}

Finally to tie up all the knots, all the following line to your package.json.

1"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"

This way all we have to do is run npm run lint and all the linting will be done for us. You can setup your VSCode to lint your code every time you save you file.

If you are working in a group project and suppose there is one member who does not believe inm Legend (ESLint & Prettier), then you can setup Github action to lint you code every you push your code. All you hace to do is, create a file in .github/workflows with name - linters.yml. Add following code in that file.

1name: Linters
2
3on: pull_request
4
5env:
6 FORCE_COLOR: 1
7
8jobs:
9 eslint:
10 name: ESLint
11 runs-on: ubuntu-18.04
12 steps:
13 - uses: actions/checkout@v2
14 - uses: actions/setup-node@v1
15 with:
16 node-version: '12.x'
17 - name: Setup ESLint
18 run: |
19 npm install --save-dev eslint@6.8.x @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
20 [ -f .eslintrc.js ]
21 - name: ESLint Report
22 run: npx eslint .

Whenever someone in you team create a PR or push the code, then the whole codebase will be checked with ESLint and Prettier.

Since we are settingup every then let us setup tailwindcss too. Tailwind is greate for developing frontend.

Depending on what you need there are two options, the basic one for development, and on for production, because you don't want to send the full tailwindcss to production. To setup tailwind, I use this greate acticle by Dave Ceddia.

This is Part 1 of two part series. In next part we will se basic of how to code in Typescript w.r.t React.