Typescript Campaign Additions (mattermost#3790)

* Added check-types, fixed some existing tsc errors, added check-types to CircleCI

* A test migration

* Fixed the imports and lint errors

* Removed extension from imports and some type-checking fixes

* Added images type file for importing images as modules

* Forgot header

* Re-enable strict null checks

.circleci/config.yml

@@ -53,6 +53,15 @@ jobs:
  npm run mmjstool -- i18n extract-webapp --webapp-dir . --mobile-dir /tmp/fake-mobile-dir
  diff /tmp/en.json i18n/en.json
 
+ type-check:
+ executor:
+ name: default
+ steps:
+ - checkout
+ - *restore_cache
+ - run: |
+ npm run check-types
+
  test:
  executor:
  name: default
@@ -146,6 +155,9 @@ workflows:
  - i18n-check:
  requires:
  - install
+ - type-check:
+ requires:
+ - install
  - build:
  requires:
  - install
@@ -163,5 +175,6 @@ workflows:
  - prepare-docker-build
  - test:
  requires:
+ - type-check
  - i18n-check
  - lint

Makefile

@@ -18,6 +18,11 @@ check-style: node_modules ## Checks JS file for ESLint confirmity
 
  npm run check
 
+check-types: node_modules ## Checks TS file for TypeScript confirmity
+ @echo Checking for TypeScript compliance
+
+ npm run check-types
+
 test: node_modules ## Runs tests
  @echo Running jest unit/component testing
 

components/color_input.test.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {shallow} from 'enzyme';
+import {shallow, ShallowWrapper} from 'enzyme';
 
 import ColorInput from 'components/color_input';
 
@@ -77,15 +77,18 @@ describe('components/ColorInput', () => {
 
  test('should have called onChange prop', () => {
  const onChange = jest.fn();
- const wrapper = shallow(
+ const wrapper: ShallowWrapper<any, any, ColorInput> = shallow(
  <ColorInput
  color='#ffffff'
  id='sidebarBg'
  onChange={onChange}
  />
  );
 
- const newColorData = {hex: '#ccc'};
+ const newColorData: any = {hex: '#ccc'};
+
+ // Ignoring for now since this test won't matter after TS conversion
+ // @ts-ignore
  wrapper.instance().handleChange(newColorData);
 
  expect(onChange).toHaveBeenCalledTimes(1);

components/dot_menu/dot_menu.jsx

@@ -11,7 +11,7 @@ import Permissions from 'mattermost-redux/constants/permissions';
 import {showGetPostLinkModal} from 'actions/global_actions.jsx';
 import {Locations, ModalIdentifiers, UNSET_POST_EDIT_TIME_LIMIT} from 'utils/constants.jsx';
 import DeletePostModal from 'components/delete_post_modal';
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
 import ChannelPermissionGate from 'components/permissions_gates/channel_permission_gate';

components/file_upload/file_upload.jsx

@@ -8,7 +8,7 @@ import {defineMessages, intlShape, FormattedMessage} from 'react-intl';
 
 import dragster from 'utils/dragster.js';
 import Constants from 'utils/constants.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 import {t} from 'utils/i18n';
 import {
  isIosChrome,

components/post_view/post_body/post_body.jsx

@@ -7,7 +7,7 @@ import {Posts} from 'mattermost-redux/constants';
 
 import * as PostUtils from 'utils/post_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 
 import CommentedOn from 'components/post_view/commented_on';
 import FileAttachmentListContainer from 'components/file_attachment_list';

components/post_view/post_list/post_list_virtualized.jsx

@@ -11,7 +11,7 @@ import {isDateLine, isStartOfNewMessages} from 'mattermost-redux/utils/post_list
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import Constants, {PostListRowListIds, EventTypes, PostRequestTypes} from 'utils/constants.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 import {getPreviousPostId, getLatestPostId} from 'utils/post_utils.jsx';
 import * as Utils from 'utils/utils.jsx';
 

components/rhs_card/rhs_card.jsx

@@ -7,7 +7,7 @@ import Scrollbars from 'react-custom-scrollbars';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 import Constants, {RHSStates} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 import RhsCardHeader from 'components/rhs_card_header';

components/rhs_thread/rhs_thread.jsx

@@ -9,7 +9,7 @@ import Scrollbars from 'react-custom-scrollbars';
 import {Posts} from 'mattermost-redux/constants';
 
 import Constants from 'utils/constants.jsx';
-import DelayedAction from 'utils/delayed_action.jsx';
+import DelayedAction from 'utils/delayed_action';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import CreateComment from 'components/create_comment';

components/widgets/admin_console/admin_header.test.tsx

@@ -25,6 +25,8 @@ describe('components/widgets/admin_console/AdminHeader', () => {
  const originalError = console.error;
  console.error = jest.fn();
 
+ // Ignoring since this is a prop check which will go away with TS conversion
+ // @ts-ignore
  shallow(<AdminHeader/>);
 
  expect(console.error).toBeCalledTimes(1);

components/widgets/loading/loading_spinner.tsx

@@ -9,7 +9,7 @@ type Props = {
 }
 
 export default class LoadingSpinner extends React.PureComponent<Props> {
- public static defaultProps = {
+ public static defaultProps: Props = {
  text: null,
  }
 

components/widgets/loading/loading_wrapper.tsx

@@ -12,7 +12,7 @@ type Props = {
 }
 
 export default class LoadingWrapper extends React.Component<Props> {
- public static defaultProps = {
+ public static defaultProps: Props = {
  loading: true,
  text: null,
  children: null,

components/widgets/team_icon/team_icon.tsx

@@ -42,7 +42,7 @@ export class TeamIcon extends React.PureComponent<Props> {
  }
  const hoverCss = withHover ? '' : 'no-hover';
  const teamIconUrl = url || imageURLForTeam({display_name: name});
- let icon = null;
+ let icon;
  if (teamIconUrl) {
  icon = (
  <div

package.json

@@ -213,6 +213,7 @@
  "test:coverage": "jest --coverage",
  "mmjstool": "mmjstool",
  "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "build-storybook": "build-storybook",
+ "check-types": "tsc"
  }
 }

types/images.d.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+declare module '*.jpg';
+declare module '*.png';

utils/delayed_action.jsx → utils/delayed_action.tsx

@@ -2,7 +2,10 @@
 // See LICENSE.txt for license information.
 
 export default class DelayedAction {
- constructor(action) {
+ private action: Function;
+ private timer: number;
+
+ public constructor(action: Function) {
  this.action = action;
 
  this.timer = -1;
@@ -11,21 +14,21 @@ export default class DelayedAction {
  this.fire = this.fire.bind(this);
  }
 
- fire() {
+ public fire() {
  this.action();
 
  this.timer = -1;
  }
 
- fireAfter(timeout) {
+ public fireAfter(timeout: number) {
  if (this.timer >= 0) {
  window.clearTimeout(this.timer);
  }
 
  this.timer = window.setTimeout(this.fire, timeout);
  }
 
- cancel() {
+ public cancel() {
  window.clearTimeout(this.timer);
  }
 }