Injecting TypeScript Into JavaScript Projects

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

Agenda

  1. The Why - End Religious Wars

0. The What - TS in Existing JS Projects

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All

0. The What - TypeScript in Existing JS Projects

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point

0. The What - TypeScript in Existing JS Projects

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point
  4. The How - Methods of Injection

0. The What - TypeScript in Existing JS Projects

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point
  4. The How - Methods of Injection

JavaScript & TypeScript

  • A show of hands please

Friends?  Enemies?  Frenemies?

  • Have you tried TypeScript?
  • Have you used it in production?
  • Negative Experience?
  • Positive Experience?

JavaScript & TypeScript

Friends?  Enemies?  Frenemies?

  • If you know TS, you know JS
  • If you know JS, you know TS

you're just a little rusty

JavaScript & TypeScript

Friends?  Enemies?  Frenemies?

You wrote some badass JS

...walks into a bar

at the back, sits:

It's strong, but...

... not a Jedi yet

JavaScript & TypeScript

Friends?  Enemies?  Frenemies?

  • TS is like a toolkit for JS
  • A superset - guardian or champion
  • It's a story of coexistence - not separation - THEY SHOULD BE USED TOGETHER

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point
  4. The How - Methods of Injection

Who is TS Good For?

  • Customers:
    • Type Safety - Better Code in Production
    • But the customer doesn't care!

More importantly:

  • Team
    • TS - Automatic Boost In Documentation
    • Code Design
    • API

How Can TS help improve existing JS Code?

Who is TS Good For?

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

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point
  4. The How - Methods of Injection

Entry Point

Which modules should be converted first?

Comp 1

Comp 2

Comp 3

Shared Comp

Utility Module

NPM Lib

Entry Point

Which modules should be converted first?

Entry Point

Which modules should be converted first?

Account #

Routing #

Name

ValidatedLabeledInput

maybeShowError

npm  - validations

Entry Point

Which modules should be converted first?

Comp 1

Comp 2

Comp 3

Shared Comp

Utility Module

NPM Lib

  • Start at the deep-end of the dependency graph
  • Has Clients or reused module

PHASE 1

PHASE 2

MAYBE 3

  • MAYBE 3 because it doesn't have clients
  • JS & TS can coexist, remember?
  • What about the NPM lib?
  • They have TS, don't worry
  • Easier convert the next phase

Agenda

  1. The Why - End Religious Wars
  2. The Who - ...And Justice For All
  3. The Where - Pick your Entry Point
  4. The How - Methods of Injection

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*
npm i --save-dev @types/react @types/react-dom

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*
  2. Maintain definition files
    • Write *.js files, and *.d.ts files
    • No compilation or transpilation
    • But still, your IDE knows

Methods of Injection

2. Maintaining Definition Files

Methods of Injection

2. Maintaining Definition Files

Methods of Injection

2. Maintaining Definition Files

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*
  2. Maintain definition files
    • Write *.js files, and *.d.ts files
    • No compilation or transpilation
    • But still, your IDE knows
  3. Babel TypeScript Preset
    • Write *.ts files
    • Let Babel transpile
    • ... but not compile - only remove TS syntax

Methods of Injection

3. Babel TypeScript Preset

  • First we need to add TypeScript to the project
npm i --save-dev typescript
./node_modules/.bin/tsc --init
  • Create the tsconfig.json file

Methods of Injection

3. Babel TypeScript Preset

The tsconfig.json file

Methods of Injection

3. Babel TypeScript Preset

  • Compilation configurations
  • Ecmascript Target
  • Which files to include
  • Which files to exclude
  • How to deal with existing JS
  • Experimental TypeScript features, e.g. decorators

What does the tsconfig.json file do?

Methods of Injection

3. Babel TypeScript Preset

  • First we need to add TypeScript to the project
npm i --save-dev typescript
./node_modules/.bin/tsc --init
  • Create the tsconfig.json file
  • Now, you officially have a TypeScript project
  • Create utils.ts and write some TypeScript :)
  • Make sure you've deleted utils.js and utils.d.ts

Methods of Injection

3. Babel TypeScript Preset

Methods of Injection

3. Babel TypeScript Preset

Will it compile?

Methods of Injection

3. Babel TypeScript Preset

  • Ok, we need to tell webpack to recognize .ts files

How about now?

Methods of Injection

3. Babel TypeScript Preset

  • Ok, we need a loader for TypeScript

Methods of Injection

3. Babel TypeScript Preset

npm i --save-dev @babel/preset-typescript

How about now?!

Methods of Injection

3. Babel TypeScript Preset

Methods of Injection

3. Babel TypeScript Preset

  • NICE! But are we actually getting any TypeScript help?
  • Let's trigger an error...
const validation = number(false);

What if I do:

Methods of Injection

3. Babel TypeScript Preset

Methods of Injection

3. Babel TypeScript Preset

  • YES
  • Because @babel/preset-typescript does not compile
  • It only removes the TS syntax
  • run tsc --watch and watch the output
  • or...

If you want strict type security you can

Methods of Injection

How to actually start using it

  1. ALWAYS INSTALL @types/*
  2. Maintain definition files
    • Write *.js files, and *.d.ts files
    • No compilation or transpilation
    • But still, your IDE knows
  3. Babel TypeScript Preset
    • Write *.ts files
    • Let Babel transpile
    • ... but not compile - only remove TS syntax
  4. TypeScript Compiler (tsc)
    • Write *.ts files
    • The real deal

Methods of Injection

4. TypeScript Compiler

  • Easy, most of the work was done during step 3
  • Currently:

Methods of Injection

4. TypeScript Compiler

  • We need to relieve babel of its duties

Methods of Injection

4. TypeScript Compiler

npm i --save-dev awesome-typescript-loader
  • Let another loader run tsc inside the webpack process

Methods of Injection

4. TypeScript Compiler

Methods of Injection

4. TypeScript Compiler

Do we have type security now?

Methods of Injection

Recap

  1. ALWAYS INSTALL @types/*
  2. Maintain definition files
    • Write *.js files, and *.d.ts files
    • No compilation or transpilation
    • But still, your IDE knows
  3. Babel TypeScript Preset
    • Write *.ts files
    • Let Babel transpile
    • ... but not compile - only remove TS syntax
  4. TypeScript Compiler (tsc)
    • Write *.ts files
    • The real deal

Agenda

  1. End Religious Wars - the why
  2. ...And Justice For All - the who
  3. Pick your Entry Point - the where
  4. Methods of Injection - the how

Thank you!

Injecting TypeScript Into JavaScript Projects

By cannahum

Injecting TypeScript Into JavaScript Projects

You've decided to use TypeScript. Great! But how do you start?..

  • 440