"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

"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?? 👀

Copy of "Migrating to TypeScript" as Boss

By Ahmed Hassanein

Made with Slides.com

Copy of "Migrating to TypeScript" as Boss

  • 295

More from Ahmed Hassanein