"Migrating to TypeScript" as Boss

🇪🇬 Made in Egypt
🤓 11 years of console.log('whyyyyyy!!!!')
👨🏻‍💻 Frontend Lead @ Curalie
     ~1000 files, ~11 developers, ~4 months
ahmed.rocks

___________

Types: strong vs. weak vs. fake

The price of freedom

Misconceptions about TS

"Yeah it's cool, but we are busy now"

Misconceptions about TS

"It's not worth the effort"

Misconceptions about TS

"I tried flow before, never again!"

Misconceptions about TS

"I don’t need a tool to tell me what to do."

🤖 vs. 👫

  • Feelings 
  • Opinionated 
  • Experience 
  • Working hours 
  • Speed 
  • One word: Consistency 

Before migration

Analyze the codebase

  • Bootstrapped?
  • npm Commands (for dev, CI...)
  • npm packages
  • Coding style
  • Artifacts created
  • Special file extensions
  • Find unused files eg. ts-prune

Onboard your team

  • Scale
  • Interest
  • Experience
  • Share the plan document
  • Give a talk!

During migration

Baby steps

  • The first PR
  • Solo vs. team work
  • Creating tickets
  • Onboarding task
  • Quality vs. Time
  • Track progress

Where to start?

  • The tree of life components
  • Phase 1: Convert all js files
  • Phase 2: Enable strict flags
Phase 1 Phase 2
allow js ✅ ❌
allow any/unknown ✅ ❌
refactoring logic ❌ ✅
​strict mode ​❌ ​✅

Button.js

App.js

LoginForm.js

1

2

3

Typescript tips

  • Putting X in Y.
  • Fake it till you make it.
  • Learn, don't cheat!
  • Jsdoc comments are awesome
  • 8 shades of TS.
  1. perfect type
  2. wide type
  3. unknown
  4. any
  5. as 
  6. // @ts-expect-error
  7. // @ts-ignore
  8. wrong type!

Eslint ❤️

  • TS younger brother.
  • Typescript support
  • Explore
  • Errors vs. Warnings
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    // javascript rules
    'prettier/prettier': 'error',
  },
  settings: {
    'import/resolver': 'typescript',
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx', '.json'],
    react: {
      version: 'detect',
    },
  },
  overrides: [
    {
      files: ['src/**/*.ts', 'src/**/*.tsx'],
      rules: {
        // typescript rules
        'curalie/type-default-props': 'error',
      },
      parserOptions: {
        project: 'tsconfig.json',
      },
    },
  ],
};

Airtight automation 🔒

  • Editor
  • Git hooks
  • CI
Editor/Hooks CI
Fast ✅ ❌
Free ✅ ❌
Dependable ❌ ✅ 
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
  },
}

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ],
    "*": [
      "prettier --ignore-unknown --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
}

Even more automation 😛

  • Abstract syntax trees are 🤯
  • Code generators:
    • ​openapi / swagger
    • jscodeshift
    • json schema
  • VScode tasks
  • Custom eslint rules
{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "command": "npm run migrate -- \"${file}\"",
      "problemMatcher": [],
      "label": "Migrate file to TS",
      "detail": "Runs the npm migrate script"
    }
  ]
}

Questions?? 👀

Made with Slides.com