The Mattermost team wants to proactively improve the quality, security, and stability of the code, and one way to do this is by introducing the usage of type checking. Thus, we have decided to introduce Typescript in our codebase as it’s a mature and feature-rich approach.
As a first step, we have migrated the mattermost-redux library to use Typescript, and are now in the process of migrating the web app to use Typescript.
This campaign will help with the migration by converting files written in Javascript to type-safe files written in Typescript.
By completing this campaign, we’re looking to:
If you’re interested in contributing, please join the Typescript Migration channel on community.mattermost.com. You can also check out the Contributors channel, where there are several posts mentioning tickets related to this campaign, each containing the hashtag #typescriptmigration
. You can work on migrating an individual module to Typescript by claiming a ticket that matches this GitHub issue search.
There are a few steps involved with migrating a file to use Typescript. Some of them may not apply to every file and they may change slightly based on the file you’re working on. In general, you can follow these steps as a checklist for work that needs to be done on each file.
props
needs to be converted to a new type. You can use the component’s propTypes
as a template for what props
a given component can expect. This conversion to Typescript includes maintaining whether a given prop
is required or not. An optional property in Typescript is noted by including a question mark at the end of the property’s name.state
also needs to be defined using a type. The initial state
assignment and any call to setState
will be indicators of what values are present in the component’s state.props
and state
(if any) have been converted, you can define the component as class MyComponent extends React.PureComponent<Props, State>
. You can omit the State
portion if the component does not have its own state
.any
type except in test files. The components themselves should be as well-defined as possible.make check-types
command.You can see example pull requests here: