DPS909 — Release 0.4 — Week 2

Mattermost

This week I started to work on the ticket that required to migrate all files including the test files under component/post_markdown to typescript.

The first thing to do is to change the extension of the files from js to ts, jsx to tsx.

The difference between Javascript and Typescript is that in Typescript we need to specify the exact type of variables. If the types are not matching it generates errors.

When migrating code from javascript to typescript first we have to specify :

• types of properties
• types of parameters in the function declaration

For example:

//This is code before migration
export default class PostMarkdown extends React.PureComponent {
 static propTypes = {
 imageProps: PropTypes.object,
 isRHS: PropTypes.bool,
 message: PropTypes.string.isRequired,
 post: PropTypes.object, 
 channelId: PropTypes.string,
 channel: PropTypes.object, <--it says object but not exact type of object
 options: PropTypes.object,
 pluginHooks: PropTypes.arrayOf(PropTypes.object),
 hasPluginTooltips: PropTypes.bool,
 isUserCanManageMembers: PropTypes.bool,
 mentionKeys: PropTypes.array.isRequired,
 };
static defaultProps = {
 isRHS: false,
 pluginHooks: [],
 options: {},
 };

The below code is after migration

type Props = {
imageProps?: Record<string, any>, <-- if we dont know the exact type
isRHS?: boolean,
message: string,
post?: Post,
channelId: string,
channel?: Channel,
options?: Partial<TextFormattingOptions>,
pluginHooks?: Record<string, any>[],
hasPluginTooltips?: boolean,
isUserCanManageMembers?: boolean,
mentionKeys: Array<MentionKey> | [],
}
export default class PostMarkdown extends React.PureComponent<Props> {
static defaultProps: Partial<Props> = {
isRHS: false,
pluginHooks: [],
options: {},
};

In functions :

Javascript:

export function makeGetMentionKeysForPost() {
 return createSelector(
 getCurrentUserMentionKeys,
 (state, post) => post, <-- This wont work
 (state, post, channel) => (channel ? getMyGroupMentionKeysForChannel(state, channel.team_id, channel.id) : getMyGroupMentionKeys(state)),
 (mentionKeysWithoutGroups, post, groupMentionKeys)=>{...})

Typescript:

export function makeGetMentionKeysForPost() {
return createSelector(
getCurrentUserMentionKeys,
(state:GlobalState, post:Post) => post,<-- added types after colon
(state:GlobalState, post:Post, channel:Channel) => (channel ? getMyGroupMentionKeysForChannel(state, channel.team_id, channel.id) : getMyGroupMentionKeys(state)),
(mentionKeysWithoutGroups, post, groupMentionKeys) => {...})

All the object types can be found and imported from a different repository → mattermost-redux.

After migrating the code, I had to follow the developer workflow in order to check if the code doesn't break anything and runs as expected.

Two checks that I always do:

1. run the tests (make test)
2. run the check-types ( make check-types)

Well of course I had some errors that are taking me time to fix before I can submit my PR.

Example of types of errors I get:

1. The component is required x parameters but only passed y. — When the code was written in javascript it didn't generate an error but when the code is executed in typescript all the required parameters must be passed. This fix requires a lot of research since I had to figure out what exactly expected and where I can find the values for these parameters.
2. Property ‘message_source’ does not exist on type ‘Post’. — after checking the Post type this property actually doesn't exist. In Javascript, it was working but in Typescript, I need to figure out the way to fix it.
3. Property is optional but in the code, there is no check (ei if(<propertyname)) so it generates an error that property might be undefined. To fix it I had to create an if statement.

This ticket is way more complex than the previous one that I worked on. Hope it all goes well since it is definitely more challenging!