Bottom up approach to writing strongly-typed JavaScript
Senior Web Applications Engineer
Web Technology Enthusiast
Senior Web Applications Engineer
SBSEG - Counterpart Portal*
0. The What - TypeScript 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
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?
// Welcome to the team, New Guy. The engineer before you wrote this.
// We need to guard the passed params.
function aWellWrittenFunction({ firstParam, secondParam, config, opts }) {
const isValidParam(firstParam);
// Do stuff with params.
}
// To Do...
function isValidParam(p) {
}
Always think of the new guy...
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
npm i --save-dev @types/card-validator
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
Will it compile?
3. Babel TypeScript Preset
How about now?
3. Babel TypeScript Preset
npm i --save-dev @babel/preset-typescript
3. Babel TypeScript Preset
const validation = number(false);
What if I do:
3. Babel TypeScript Preset
const validation = number(false);
3. Babel TypeScript Preset
const validation = number(false);
If you want strict type security you can
How to actually start using it
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