typescript: Complete most TypeScript todos.

app/renderer/js/components/functional-tab.ts

@@ -1,4 +1,4 @@
-import Tab from './tab';
+import Tab, { TabProps } from './tab';
 
 export default class FunctionalTab extends Tab {
 	$closeButton: Element;
@@ -13,8 +13,7 @@ export default class FunctionalTab extends Tab {
 				</div>`;
 	}
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
+	constructor(props: TabProps) {
 		super(props);
 		this.init();
 	}

app/renderer/js/components/server-tab.ts

@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 
-import Tab from './tab';
+import Tab, { TabProps } from './tab';
 import * as SystemUtil from '../utils/system-util';
 
 export default class ServerTab extends Tab {
@@ -17,8 +17,7 @@ export default class ServerTab extends Tab {
 				</div>`;
 	}
 
-	// TODO: Typescript - This type for props should be TabProps
-	constructor(props: any) {
+	constructor(props: TabProps) {
 		super(props);
 		this.init();
 	}

app/renderer/js/components/tab.ts

@@ -1,9 +1,19 @@
 import WebView from './webview';
 import BaseComponent from './base';
 
-// TODO: TypeScript - Type annotate props
-interface TabProps {
-	[key: string]: any;
+export interface TabProps {
+	role: string;
+	icon?: string;
+	name: string;
+	$root: Element;
+	onClick: () => void;
+	index: number;
+	tabIndex: number;
+	onHover?: () => void;
+	onHoverOut?: () => void;
+	webview: WebView;
+	materialIcon?: string;
+	onDestroy?: () => void;
 }
 
 export default class Tab extends BaseComponent {

app/renderer/js/components/webview.ts

@@ -11,13 +11,24 @@ const { app, dialog } = remote;
 
 const shouldSilentWebview = ConfigUtil.getConfigItem('silent');
 
-// TODO: TypeScript - Type annotate WebViewProps.
 interface WebViewProps {
-	[key: string]: any;
+	$root: Element;
+	index: number;
+	tabIndex: number;
+	url: any;
+	role: string;
+	name: string;
+	isActive: () => boolean;
+	switchLoading: (loading: any, url: string) => void;
+	onNetworkError: (index: number) => void;
+	nodeIntegration: boolean;
+	preload: boolean;
+	onTitleChange: any;
+	hasPermission?: (origin: string, permission: string) => boolean;
 }
 
 export default class WebView extends BaseComponent {
-	props: any;
+	props: WebViewProps;
 	zoomFactor: number;
 	badgeCount: number;
 	loading: boolean;

app/renderer/js/main.ts

@@ -912,8 +912,7 @@ class ServerManagerView {
 		});
 
 		ipcRenderer.on('update-realm-name', (event: Event, serverURL: string, realmName: string) => {
-			// TODO: TypeScript - Type annotate getDomains() or this domain paramter.
-			DomainUtil.getDomains().forEach((domain: any, index: number) => {
+			DomainUtil.getDomains().forEach((domain: DomainUtil.ServerConf, index: number) => {
 				if (domain.url.includes(serverURL)) {
 					const serverTooltipSelector = '.tab .server-tooltip';
 					const serverTooltips = document.querySelectorAll(serverTooltipSelector);

app/renderer/js/pages/preference/add-certificate.ts

@@ -8,16 +8,19 @@ import * as CertificateUtil from '../../utils/certificate-util';
 import * as DomainUtil from '../../utils/domain-util';
 import * as t from '../../utils/translation-util';
 
+interface AddCertificateProps {
+	$root: Element;
+}
+
 const { dialog } = remote;
 
 export default class AddCertificate extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: AddCertificateProps;
 	_certFile: string;
 	$addCertificate: Element | null;
 	addCertificateButton: Element | null;
 	serverUrl: HTMLInputElement | null;
-	constructor(props: any) {
+	constructor(props: AddCertificateProps) {
 		super();
 		this.props = props;
 		this._certFile = '';

app/renderer/js/pages/preference/base-section.ts

@@ -3,9 +3,15 @@ import escape from 'escape-html';
 
 import BaseComponent from '../../components/base';
 
+interface BaseSectionProps {
+	$element: HTMLElement;
+	disabled?: boolean;
+	value: boolean;
+	clickHandler: () => void;
+}
+
 export default class BaseSection extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	generateSettingOption(props: any): void {
+	generateSettingOption(props: BaseSectionProps): void {
 		const {$element, disabled, value, clickHandler} = props;
 
 		$element.innerHTML = '';
@@ -18,7 +24,7 @@ export default class BaseSection extends BaseComponent {
 		}
 	}
 
-	generateOptionTemplate(settingOption: boolean, disabled: boolean): string {
+	generateOptionTemplate(settingOption: boolean, disabled?: boolean): string {
 		const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>';
 		if (settingOption) {
 			return `

app/renderer/js/pages/preference/connected-org-section.ts

@@ -7,15 +7,18 @@ import AddCertificate from './add-certificate';
 import FindAccounts from './find-accounts';
 import * as t from '../../utils/translation-util';
 
+interface ConnectedOrgSectionProps {
+	$root: Element;
+}
+
 export default class ConnectedOrgSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: ConnectedOrgSectionProps;
 	$serverInfoContainer: Element | null;
 	$existingServers: Element | null;
 	$newOrgButton: HTMLButtonElement | null;
 	$addCertificateContainer: Element | null;
 	$findAccountsContainer: Element | null;
-	constructor(props: any) {
+	constructor(props: ConnectedOrgSectionProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/find-accounts.ts

@@ -4,13 +4,16 @@ import BaseComponent from '../../components/base';
 import * as LinkUtil from '../../utils/link-util';
 import * as t from '../../utils/translation-util';
 
+interface FindAccountsProps {
+	$root: Element;
+}
+
 export default class FindAccounts extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: FindAccountsProps;
 	$findAccounts: Element | null;
 	$findAccountsButton: Element | null;
 	$serverUrlField: HTMLInputElement | null;
-	constructor(props: any) {
+	constructor(props: FindAccountsProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/general-section.ts

@@ -12,10 +12,13 @@ import * as EnterpriseUtil from '../../utils/enterprise-util';
 import * as t from '../../utils/translation-util';
 import supportedLocales from '../../../../translations/supported-locales.json';
 
+interface GeneralSectionProps {
+	$root: Element;
+}
+
 export default class GeneralSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	constructor(props: any) {
+	props: GeneralSectionProps;
+	constructor(props: GeneralSectionProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/nav.ts

@@ -1,12 +1,16 @@
 import BaseComponent from '../../components/base';
 import * as t from '../../utils/translation-util';
 
+interface PreferenceNavProps {
+	$root: Element;
+	onItemSelected: (navItem: string) => void;
+}
+
 export default class PreferenceNav extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: PreferenceNavProps;
 	navItems: string[];
 	$el: Element;
-	constructor(props: any) {
+	constructor(props: PreferenceNavProps) {
 		super();
 		this.props = props;
 		this.navItems = ['General', 'Network', 'AddServer', 'Organizations', 'Shortcuts'];

app/renderer/js/pages/preference/network-section.ts

@@ -4,15 +4,18 @@ import BaseSection from './base-section';
 import * as ConfigUtil from '../../utils/config-util';
 import * as t from '../../utils/translation-util';
 
+interface NetworkSectionProps {
+	$root: Element;
+}
+
 export default class NetworkSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: NetworkSectionProps;
 	$proxyPAC: HTMLInputElement;
 	$proxyRules: HTMLInputElement;
 	$proxyBypass: HTMLInputElement;
 	$proxySaveAction: Element;
 	$manualProxyBlock: Element;
-	constructor(props: any) {
+	constructor(props: NetworkSectionProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/new-server-form.ts

@@ -5,13 +5,17 @@ import * as DomainUtil from '../../utils/domain-util';
 import * as LinkUtil from '../../utils/link-util';
 import * as t from '../../utils/translation-util';
 
+interface NewServerFormProps {
+	$root: Element;
+	onChange: () => void;
+}
+
 export default class NewServerForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: NewServerFormProps;
 	$newServerForm: Element;
 	$saveServerButton: HTMLButtonElement;
 	$newServerUrl: HTMLInputElement;
-	constructor(props: any) {
+	constructor(props: NewServerFormProps) {
 		super();
 		this.props = props;
 	}
@@ -68,7 +72,7 @@ export default class NewServerForm extends BaseComponent {
 			return;
 		}
 		await DomainUtil.addDomain(serverConf);
-		this.props.onChange(this.props.index);
+		this.props.onChange();
 	}
 
 	openCreateNewOrgExternalLink(): void {

app/renderer/js/pages/preference/server-info-form.ts

@@ -7,15 +7,21 @@ import * as t from '../../utils/translation-util';
 
 const { dialog } = remote;
 
+interface ServerInfoFormProps {
+	$root: Element;
+	server: DomainUtil.ServerConf;
+	index: number;
+	onChange: () => void;
+}
+
 export default class ServerInfoForm extends BaseComponent {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: ServerInfoFormProps;
 	$serverInfoForm: Element;
 	$serverInfoAlias: Element;
 	$serverIcon: Element;
 	$deleteServerButton: Element;
 	$openServerButton: Element;
-	constructor(props: any) {
+	constructor(props: ServerInfoFormProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/servers-section.ts

@@ -2,11 +2,14 @@ import BaseSection from './base-section';
 import NewServerForm from './new-server-form';
 import * as t from '../../utils/translation-util';
 
+interface ServersSectionProps {
+	$root: Element;
+}
+
 export default class ServersSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
+	props: ServersSectionProps;
 	$newServerContainer: Element;
-	constructor(props: any) {
+	constructor(props: ServersSectionProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/pages/preference/shortcuts-section.ts

@@ -2,10 +2,13 @@ import BaseSection from './base-section';
 import * as LinkUtil from '../../utils/link-util';
 import * as t from '../../utils/translation-util';
 
+interface ShortcutsSectionProps {
+	$root: Element;
+}
+
 export default class ShortcutsSection extends BaseSection {
-	// TODO: TypeScript - Here props should be object type
-	props: any;
-	constructor(props: any) {
+	props: ShortcutsSectionProps;
+	constructor(props: ShortcutsSectionProps) {
 		super();
 		this.props = props;
 	}

app/renderer/js/utils/dnd-util.ts

@@ -5,7 +5,7 @@ import * as ConfigUtil from './config-util';
 // We want to do this by creating a new module that exports
 // this interface
 interface Setting {
-	[key: string]: any;
+	[key: string]: boolean;
 }
 
 interface Toggle {

app/renderer/js/utils/domain-util.ts

@@ -13,7 +13,7 @@ import * as Messages from '../../../resources/messages';
 
 const { app, dialog } = remote;
 
-interface ServerConf {
+export interface ServerConf {
 	url: string;
 	alias?: string;
 	icon?: string;