Can (Jon) Nahum
Senior Web Applications Engineer @ Intuit
YGLF - April, 2019
Hi, I'm Jon!
Investment Analyst
Brandeis University
2012-2014
Web Engineer
Fortis Labs
2016-2017
Web App Engineer
Intuit
2017-current
0. The What - TS in Existing JS Projects
0. The What - TypeScript in Existing JS Projects
0. The What - TypeScript in Existing JS Projects
0. The What - TypeScript in Existing JS Projects
Friends? Enemies? Frenemies?
Friends? Enemies? Frenemies?
you're just a little rusty
Friends? Enemies? Frenemies?
You wrote some badass JS
...walks into a bar
at the back, sits:
It's strong, but...
... not a Jedi yet
Friends? Enemies? Frenemies?
More importantly:
How Can TS help improve existing JS Code?
How Can TS help improve existing JS Code?
function submitBankPayment({ bankDetails, invoiceDetails, config, opts }) {
const isValidBank(firstParam);
// ...
}
// To Do...
function isValidBank(bankDetails) {
}
Always think of the new guy...
Which modules should be converted first?
Comp 1
Comp 2
Comp 3
Shared Comp
Utility Module
NPM Lib
Which modules should be converted first?
Which modules should be converted first?
Account #
Routing #
Name
ValidatedLabeledInput
maybeShowError
npm - validations
Which modules should be converted first?
Comp 1
Comp 2
Comp 3
Shared Comp
Utility Module
NPM Lib
PHASE 1
PHASE 2
MAYBE 3
How to actually start using it
How to actually start using it
npm i --save-dev @types/react @types/react-dom
How to actually start using it
How to actually start using it
2. Maintaining Definition Files
2. Maintaining Definition Files
2. Maintaining Definition Files
How to actually start using it
3. Babel TypeScript Preset
npm i --save-dev typescript
./node_modules/.bin/tsc --init
3. Babel TypeScript Preset
The tsconfig.json file
3. Babel TypeScript Preset
What does the tsconfig.json file do?
3. Babel TypeScript Preset
npm i --save-dev typescript
./node_modules/.bin/tsc --init
3. Babel TypeScript Preset
3. Babel TypeScript Preset
Will it compile?
3. Babel TypeScript Preset
How about now?
3. Babel TypeScript Preset
3. Babel TypeScript Preset
npm i --save-dev @babel/preset-typescript
How about now?!
3. Babel TypeScript Preset
3. Babel TypeScript Preset
const validation = number(false);
What if I do:
3. Babel TypeScript Preset
3. Babel TypeScript Preset
If you want strict type security you can
How to actually start using it
4. TypeScript Compiler
4. TypeScript Compiler
4. TypeScript Compiler
npm i --save-dev awesome-typescript-loader
4. TypeScript Compiler
4. TypeScript Compiler
Do we have type security now?
Recap