TypeScript at Slack

When Brendan Eich created the very first version of JavaScript for Netscape Navigator 2.0 in merely ten days, it’s likely that he did not expect how far the Slack Desktop App would take his invention: We use one JavaScript code base to build a multi-threaded desktop application, routinely interacting with native code, targeting Windows, macOS,…

Slack logo
Slack
•
Felix Rieseberg
•9 min read•intermediate•
--
•View Original
ChefGitJavaScriptNode.jsObjective-CReactTypeScript

Overview

The article discusses Slack's transition to TypeScript, highlighting the benefits of static type checking for managing large JavaScript codebases. It shares insights on implementation, challenges faced, and the positive impact on code stability and developer productivity.

What You'll Learn

1

How to implement static type checking in JavaScript projects using TypeScript

2

Why using TypeScript can improve code stability and reduce bugs

3

When to adopt TypeScript in existing JavaScript codebases for gradual integration

Prerequisites & Requirements

  • Familiarity with JavaScript and its asynchronous programming model
  • Basic understanding of TypeScript and its ecosystem(optional)

Key Questions Answered

How does TypeScript enhance the development process at Slack?
TypeScript enhances the development process at Slack by providing static type checking, which helps catch errors before code is committed. This leads to increased confidence in code stability and reduces the likelihood of bugs, especially in complex systems. The integration with editors also boosts productivity through context-aware suggestions.
What challenges did Slack face while migrating to TypeScript?
During the migration to TypeScript, Slack encountered challenges such as discovering numerous small bugs in the existing code and the initial learning curve for developers unfamiliar with TypeScript's syntax. However, the benefits of improved code quality and editor support outweighed these challenges.
What is the significance of TSLint in Slack's development workflow?
TSLint plays a crucial role in Slack's development workflow by enforcing coding standards and ensuring that all staged code adheres to linting rules before being committed. This practice helps maintain code readability and prevents implicit type declarations, thus enhancing overall code quality.

Key Statistics & Figures

Time taken to annotate JavaScript codebase
six months
Slack took approximately six months to annotate most of their JavaScript in the desktop app codebase with TypeScript.
TypeScript's ranking in the 2017 StackOverflow Developer Survey
third most-loved programming technology
In the 2017 StackOverflow Developer Survey, TypeScript was recognized as the third most-loved programming technology, indicating its growing popularity among developers.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Programming Language
Typescript
Used for static type checking and enhancing code quality in Slack's development process.
Documentation Tool
Jsdoc
Previously used for documenting function signatures before transitioning to TypeScript.

Key Actionable Insights

1
Adopting TypeScript can significantly improve code quality and developer confidence.
By implementing TypeScript, teams can catch errors early in the development process, reducing the number of bugs that reach production. This is particularly beneficial for large codebases where complex interactions are common.
2
Utilize TypeScript's editor integration to enhance productivity.
Using TypeScript with modern editors allows for context-aware autocompletion and error checking, which can streamline the development process and reduce the time spent searching for documentation.

Common Pitfalls

1
Developers may find TypeScript's syntax daunting initially, especially if they come from a JavaScript background.
This can lead to resistance in adopting TypeScript. To mitigate this, teams should introduce TypeScript features gradually, allowing developers to acclimate to the new syntax without overwhelming them.

Related Concepts

Static Type Checking
Gradual Typing
Editor Integration With Typescript