Enable strict-mode for TypeScript (#1783)

Co-authored-by: Federico Brigante <github@bfred.it>

contributing.md

@@ -40,7 +40,7 @@ import select from 'select-dom';
 import features from '../libs/features';
 
 function log() {
-	console.log('✨', <div class="rgh-jsx-element"/>);
+	console.log('✨', <div className="rgh-jsx-element"/>);
 }
 function init() {
 	select('.btn').addEventListener('click', log);

package.json

@@ -18,53 +18,58 @@
 	},
 	"dependencies": {
 		"copy-text-to-clipboard": "^2.0.0",
-		"debounce-fn": "^1.0.0",
-		"delegate-it": "^1.0.2",
+		"debounce-fn": "^3.0.0",
+		"delegate-it": "^1.1.0-7",
 		"dom-chef": "^3.6.0",
 		"dom-loaded": "^1.1.0",
-		"doma": "^1.0.1",
+		"doma": "^1.0.3",
 		"element-ready": "^3.1.0",
 		"fit-textarea": "^1.1.0",
 		"github-reserved-names": "^1.1.5",
-		"indent-textarea": "^1.0.2",
-		"insert-text-textarea": "^1.0.1",
+		"indent-textarea": "^1.0.4",
+		"insert-text-textarea": "^1.0.3",
 		"intervalometer": "^1.0.4",
 		"linkify-issues": "^1.3.0",
 		"linkify-urls": "^2.2.0",
 		"onetime": "^5.0.0",
+		"p-memoize": "^3.0.0",
 		"select-dom": "^5.0.1",
 		"shorten-repo-url": "^1.5.0",
 		"tiny-version-compare": "^0.10.0",
+		"type-fest": "^0.3.1",
 		"webext-domain-permission-toggle": "^0.1.0",
 		"webext-dynamic-content-scripts": "^5.0.2-0",
 		"webext-options-sync": "^0.15.5",
 		"webextension-polyfill": "^0.4.0"
 	},
 	"devDependencies": {
-		"@sindresorhus/tsconfig": "^0.2.1",
-		"@types/codemirror": "0.0.72",
+		"@sindresorhus/tsconfig": "^0.3.0",
+		"@types/codemirror": "0.0.74",
+		"@types/debounce-fn": "^3.0.0",
 		"@types/dom-loaded": "^1.0.0",
 		"@types/element-ready": "^2.1.0",
-		"@types/firefox-webext-browser": "^65.0.2",
+		"@types/firefox-webext-browser": "^67.0.0",
 		"@types/jsdom": "^12.2.3",
-		"@typescript-eslint/eslint-plugin": "^1.4.2",
+		"@types/react": "^16.8.13",
+		"@typescript-eslint/eslint-plugin": "^1.6.0",
 		"ava": "^1.4.0",
 		"chrome-webstore-upload-cli": "^1.2.0",
 		"copy-webpack-plugin": "^5.0.2",
 		"dot-json": "^1.0.4",
-		"eslint-config-xo-typescript": "^0.8.0",
+		"eslint": "^5.16.0",
+		"eslint-config-xo-typescript": "^0.9.0",
 		"jsdom": "^14.0.0",
 		"npm-run-all": "^4.1.3",
 		"size-plugin": "^1.2.0",
 		"stylelint": "^9.10.1",
 		"stylelint-config-xo": "^0.13.0",
 		"terser-webpack-plugin": "^1.2.3",
 		"ts-loader": "^5.3.3",
-		"ts-node": "^8.0.3",
-		"typescript": "^3.3.3333",
+		"ts-node": "^8.1.0",
+		"typescript": "^3.4.3",
 		"utc-version": "^1.1.0",
 		"web-ext-submit": "^3.0.0",
-		"webpack": "^4.29.6",
+		"webpack": "^4.30.0",
 		"webpack-cli": "^3.3.0",
 		"xo": "^0.24.0"
 	},
@@ -88,7 +93,8 @@
 			],
 			"@typescript-eslint/explicit-function-return-type": "off",
 			"@typescript-eslint/restrict-plus-operands": "off",
-			"@typescript-eslint/promise-function-async": "off"
+			"@typescript-eslint/promise-function-async": "off",
+			"import/no-unresolved": "warn"
 		},
 		"globals": [
 			"browser"

source/background.ts

@@ -1,6 +1,6 @@
 import OptionsSync from 'webext-options-sync';
-import domainPermissionToggle from 'webext-domain-permission-toggle';
-import dynamicContentScripts from 'webext-dynamic-content-scripts';
+import {addContextMenu} from 'webext-domain-permission-toggle';
+import {addToFutureTabs} from 'webext-dynamic-content-scripts';
 import './libs/cache';
 
 // Define defaults
@@ -54,8 +54,8 @@ browser.browserAction.onClicked.addListener(() => {
 browser.runtime.onInstalled.addListener(async ({reason}) => {
 	// Only notify on install
 	if (reason === 'install') {
-		const {installType} = await browser.management.getSelf();
-		if (installType === 'development') {
+		const self = await browser.management.getSelf();
+		if (self && self.installType === 'development') {
 			return;
 		}
 
@@ -67,5 +67,5 @@ browser.runtime.onInstalled.addListener(async ({reason}) => {
 });
 
 // GitHub Enterprise support
-dynamicContentScripts.addToFutureTabs();
-domainPermissionToggle.addContextMenu();
+addToFutureTabs();
+addContextMenu();

source/features/add-co-authored-by.tsx

@@ -4,9 +4,17 @@ import * as api from '../libs/api';
 import features from '../libs/features';
 import {getOwnerAndRepo, getDiscussionNumber, getOP} from '../libs/utils';
 
-let coAuthors;
+interface Author {
+	email: string;
+	user: {
+		name: string;
+		login: string;
+	};
+}
+
+let coAuthors: Author[];
 
-async function fetchCoAuthoredData() {
+async function fetchCoAuthoredData(): Promise<Author[]> {
 	const prNumber = getDiscussionNumber();
 	const {ownerName, repoName} = getOwnerAndRepo();
 
@@ -32,11 +40,11 @@ async function fetchCoAuthoredData() {
 		}`
 	);
 
-	return userInfo.repository.pullRequest.commits.nodes.map(node => node.commit.author);
+	return userInfo.repository.pullRequest.commits.nodes.map((node: any) => node.commit.author as Author);
 }
 
 function addCoAuthors() {
-	const field = select<HTMLTextAreaElement>('#merge_message_field');
+	const field = select<HTMLTextAreaElement>('#merge_message_field')!;
 	if (field.value.includes('Co-authored-by: ')) {
 		// Don't affect existing information
 		return;

source/features/batch-open-issues.tsx

@@ -5,8 +5,11 @@ import features from '../libs/features';
 
 const confirmationRequiredCount = 10;
 
-function getUrlFromItem(checkbox) {
-	return checkbox.closest('.js-issue-row').querySelector('.js-navigation-open').href;
+function getUrlFromItem(checkbox: Element) {
+	return checkbox
+		.closest('.js-issue-row')!
+		.querySelector<HTMLAnchorElement>('.js-navigation-open')!
+		.href;
 }
 
 function openIssues() {
@@ -28,7 +31,7 @@ function openIssues() {
 	});
 }
 
-function init() {
+function init(): false | void {
 	if (select.all('.js-issue-row').length < 2) {
 		return false;
 	}
@@ -39,7 +42,7 @@ function init() {
 			<button
 				type="button"
 				onClick={openIssues}
-				class="float-left btn-link rgh-open-all-selected"
+				className="float-left btn-link rgh-open-all-selected"
 			>
 				Open All
 			</button>
@@ -52,7 +55,7 @@ function init() {
 			<button
 				type="button"
 				onClick={openIssues}
-				class="float-left btn-link rgh-open-all-selected"
+				className="float-left btn-link rgh-open-all-selected"
 			>
 				Open in new tabs
 			</button>

source/features/branch-buttons.tsx

@@ -24,23 +24,24 @@ async function getTagLink() {
 		}
 	}`);
 
-	const tags = repository.refs.nodes.map(tag => tag.name);
+	const tags: string[] = repository.refs.nodes.map((tag: {name: string}) => tag.name);
 	if (tags.length === 0) {
 		return '';
 	}
 
 	// If all tags are plain versions, parse them,
 	// otherwise just use the latest.
-	let latestRelease;
+	let latestRelease: string;
 	if (tags.every(tag => /^[vr]?\d/.test(tag))) {
-		latestRelease = tags.sort(compareVersions).pop();
+		latestRelease = tags.sort(compareVersions).pop()!;
 	} else {
 		latestRelease = tags[0];
 	}
 
-	const link = <a class="btn btn-sm btn-outline tooltipped tooltipped-ne">{icons.tag()}</a>;
+	const link = <a className="btn btn-sm btn-outline tooltipped tooltipped-ne">{icons.tag()}</a> as HTMLAnchorElement;
+
+	const currentBranch = select('.branch-select-menu .css-truncate-target')!.textContent;
 
-	const currentBranch = select('.branch-select-menu .css-truncate-target').textContent;
 	if (currentBranch === latestRelease) {
 		link.classList.add('disabled');
 		link.setAttribute('aria-label', 'You’re on the latest release');
@@ -54,15 +55,15 @@ async function getTagLink() {
 		}
 
 		link.setAttribute('aria-label', 'Visit the latest release');
-		link.append(' ', <span class="css-truncate-target">{latestRelease}</span>);
+		link.append(' ', <span className="css-truncate-target">{latestRelease}</span>);
 	}
 
 	return link;
 }
 
 async function getDefaultBranchLink() {
 	const defaultBranch = await getDefaultBranch();
-	const currentBranch = select('[data-hotkey="w"] span').textContent;
+	const currentBranch = select('[data-hotkey="w"] span')!.textContent;
 
 	// Don't show the button if we’re already on the default branch
 	if (defaultBranch === undefined || defaultBranch === currentBranch) {
@@ -80,7 +81,7 @@ async function getDefaultBranchLink() {
 
 	return (
 		<a
-			class="btn btn-sm btn-outline tooltipped tooltipped-ne"
+			className="btn btn-sm btn-outline tooltipped tooltipped-ne"
 			href={url}
 			aria-label="Visit the default branch">
 			{icons.branch()}
@@ -90,7 +91,7 @@ async function getDefaultBranchLink() {
 	);
 }
 
-async function init() {
+async function init(): Promise<false | void> {
 	const breadcrumbs = select('.breadcrumb');
 	if (!breadcrumbs) {
 		return false;
@@ -102,7 +103,7 @@ async function init() {
 	]);
 
 	const wrapper = (
-		<div class="rgh-branch-buttons">
+		<div className="rgh-branch-buttons">
 			{defaultLink}
 			{tagLink}
 		</div>
@@ -113,7 +114,7 @@ async function init() {
 	}
 
 	if (wrapper.children.length > 1) {
-		groupSiblings(wrapper.firstElementChild);
+		groupSiblings(wrapper.firstElementChild!);
 	}
 }
 

source/features/bypass-checks.tsx

@@ -7,11 +7,11 @@ async function init() {
 	await Promise.all(select.all('.merge-status-item [href^="/apps/"]').map(bypass));
 }
 
-async function bypass(check) {
-	const details = select<HTMLAnchorElement>('.status-actions', check.parentElement);
+async function bypass(check: HTMLElement) {
+	const details = select<HTMLAnchorElement>('.status-actions', check.parentElement!)!;
 	const response = await fetch(details.href);
 	const dom = domify(await response.text());
-	const directLink = select('a.text-small .octicon-link-external', dom);
+	const directLink = select('a.text-small .octicon-link-external', dom)!;
 	details.href = (directLink.parentElement as HTMLAnchorElement).href;
 }
 

source/features/ci-link.tsx

@@ -19,7 +19,7 @@ const fetchStatus = onetime(async () => {
 	return icon;
 });
 
-async function init() {
+async function init(): Promise<false | void> {
 	const icon = await fetchStatus();
 	if (!icon) {
 		return false;

source/features/close-out-of-view-modals.tsx

@@ -4,7 +4,7 @@ import features from '../libs/features';
 const observer = new IntersectionObserver(([{intersectionRatio, target}]) => {
 	if (intersectionRatio === 0) {
 		observer.unobserve(target);
-		target.closest('details').open = false;
+		target.closest('details')!.open = false;
 	}
 });
 
@@ -13,7 +13,7 @@ function init() {
 	// so the selector is inverted
 	delegate('.details-overlay:not([open]) > summary', 'click', event => {
 		// What comes after <summary> is the dropdown
-		observer.observe(event.delegateTarget.nextElementSibling);
+		observer.observe(event.delegateTarget.nextElementSibling!);
 	});
 }
 

source/features/collapsible-content-button.tsx

@@ -6,7 +6,7 @@ https://user-images.githubusercontent.com/1402241/53678019-0c721280-3cf4-11e9-9c
 
 import React from 'dom-chef';
 import select from 'select-dom';
-import delegate from 'delegate-it';
+import delegate, {DelegateEvent} from 'delegate-it';
 import insertText from 'insert-text-textarea';
 import features from '../libs/features';
 import * as icons from '../libs/icons';
@@ -32,26 +32,26 @@ function smartBlockWrap(content: string, field: HTMLTextAreaElement) {
 	return newlinesToPrepend + content + newlinesToAppend;
 }
 
-function init() {
+function init(): void {
 	delegate('.rgh-collapsible-content-btn', 'click', addContentToDetails);
 	for (const anchor of select.all('md-ref')) {
 		anchor.after(
-			<button type="button" class="toolbar-item tooltipped tooltipped-n rgh-collapsible-content-btn" aria-label="Add collapsible content">
+			<button type="button" className="toolbar-item tooltipped tooltipped-n rgh-collapsible-content-btn" aria-label="Add collapsible content">
 				{icons.foldDown()}
 			</button>
 		);
 	}
 }
 
-function addContentToDetails(event) {
-	const field = event.delegateTarget.form.querySelector('textarea');
+function addContentToDetails(event: DelegateEvent<MouseEvent, HTMLButtonElement>) {
+	const field = event.delegateTarget.form!.querySelector('textarea')!;
 
 	// Don't indent <summary> because indentation will not be automatic on multi-line content
 	const newContent = `
 		<details>
 		<summary>Details</summary>
 
-		${getSelection().toString()}
+		${getSelection()!.toString()}
 
 		</details>
 	`.replace(/(\n|\b)\t+/g, '$1').trim();