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