"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
lifecomponents - 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.
- 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"
}
]
}
Questions?? 👀
Copy of "Migrating to TypeScript" as Boss
By Ahmed Hassanein
