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

- 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





Questions?? π
"Migrating to TypeScript" as Boss Emam
By Ahmed Hassanein
"Migrating to TypeScript" as Boss Emam
- 303