"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"; // Stringconst num = 1;
const str = "hi";
const fn = (param) => trueWhy TS?
- Safty
- DX
- Wide support
- Career
- Automation
The price of freedom

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.

- perfect type
- wide type
- unknown
- any
- as
- // @ts-expect-error
- // @ts-ignore
- 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





"Migrating to TypeScript" as Boss Emam
By Ahmed Hassanein
"Migrating to TypeScript" as Boss Emam
- 771