"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

___________

Typescript?

Types: strong vs. weak vs. fake

// Java
int myNum = 5;               // Integer (whole number)
float myFloatNum = 5.99f;    // Floating point number
char myLetter = 'D';         // Character
boolean myBool = true;       // Boolean
String myText = "Hello";     // String
const num = 1;
const str = "hi";
const fn = (param) => true

Why TS?

  • Safty 
  • DX 
  • Wide support 
  • Career
  • Automation

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."

Before migration

Onboard your team

  • Scale
  • Interest
  • Experience
  • Write / Share plan document
  • Give a talk!

Analyze the codebase

  • npm Commands (for dev, CI...)
  • npm packages
  • Artifacts created
  • Special file extensions
  • Bonus: find unused files eg. ts-prune

During migration

Baby steps

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

Where to start?

  • Components tree
  • 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
  • The 8 levels of TS types.
  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"
    }
  ]
}

🤖 vs. 👫

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

Questions?? 👀

Made with Slides.com