TypeScript

 

Why and how we adopted it at Slack

Hi, I'm Felix

www.felix.fun
@felixrieseberg
Senior Staff Engineer, Slack


Battlefield 1


Nvidia GeForce Experience


Adobe
Creative Suite


All the Electron Apps

Welcome to 2019

JavaScript isn’t just the most popular programming technology - Node.js is everywhere
 

JavaScript is used to build sophisticated applications.

 

😰

More JavaScript,
More Worries

  • Vanilla JavaScript requires source code study

  • JSDoc/ESDoc requires trust in your fellow developer

  • Both methods are inefficient, frustrating, and failure-prone

Handling Large Code Bases

📚

/**
 * @param {Object} options
 * @param {string} options.prop1
 * @param {number} options.prop2
 * @param {number} [options.prop3=42]
 *
 * @returns {number}
 */
function myMethod(options) {
  const { prop2, prop3 } = options

  return prop1 * (prop3 || 42)
}

Handling Large Code Bases

📚

More JavaScript,
More Worries

  • Vanilla JavaScript requires source code study

  • JSDoc/ESDoc requires trust in your fellow developer

  • Both methods are inefficient, frustrating, and failure-prone

TypeScript
To the Rescue

  • Superset of JavaScript

  • No modification of code at runtime

  • Excellent editor support

  • Excellent integration with the npm world

  • And of course… types.

Handling Large Code Bases

📚

Demo Time

Starting the TypeScript Compiler

Modern JavaScript is valid TypeScript. You can use the compiler without changing a single line of code.

 

Porting Slack's App

👷‍♂️

Slowly port files over

We have features to ship and bugs to fix - we slowly ported file by file.

 

You’ll quickly dislike working with files not ported over.

 

Porting Slack's App

👷‍♂️

Committing with confidence

TypeScript gives us a guarantee that the structural dependencies in the code are sound.

 

Porting Slack's App

👷‍♂️

It might look scary

Advanced use of TypeScript involves interfaces, type declarations, and enums.

 

Nothing new for a developer who’s seen Java, C#, or other typed languages, but possible scary to junior JavaScript devs.

 

Porting Slack's App

👷‍♂️

Porting Slack's App

👷‍♂️

declare type Promisify<T> = T extends Promise<any> ? T : Promise<T>;

type ProxiedObject<T> = {
  [P in keyof T]: T[P] extends (...args: infer Arguments) => infer R
    ? (...args: Arguments) => Promisify<R>
    : ProxiedObject<T[P]>
};

export { ProxiedObject };

Slack's most difficult lines of TypeScript

🏆

www.felix.fun

Thank you for your interest

Made with Slides.com