From 9ee86fb16772ed0bb0fc977ef489243841d6db0b Mon Sep 17 00:00:00 2001
From: Alex Ware <alex.ware@guardian.co.uk>
Date: Tue, 4 Sep 2018 16:30:25 +0100
Subject: [PATCH 1/3] eslint spike

---
 .eslintrc.js                                  | 13 ++-----
 frontend/App.tsx                              | 16 ++++----
 frontend/components/ArticleBody.tsx           |  2 +-
 frontend/components/Footer.tsx                |  8 ++--
 .../components/Header/Nav/EditionDropdown.tsx |  2 +-
 .../Header/Nav/Links/SupportTheGuardian.tsx   | 13 ++-----
 .../components/Header/Nav/Links/index.tsx     | 21 ++++------
 frontend/components/Header/Nav/Logo.tsx       |  6 ++-
 .../components/Header/Nav/MainMenu/Column.tsx | 37 ++++++++----------
 .../Header/Nav/MainMenu/Columns.tsx           | 11 ++----
 .../components/Header/Nav/MainMenu/index.tsx  | 14 +++----
 .../Nav/MainMenuToggle/VeggieBurger.tsx       | 14 +++----
 .../Header/Nav/MainMenuToggle/index.tsx       | 10 ++---
 .../components/Header/Nav/Pillars/index.tsx   |  6 +--
 frontend/components/Header/Nav/SubNav.tsx     | 12 +++---
 frontend/components/Header/Nav/index.tsx      |  2 +-
 frontend/components/Header/index.tsx          |  2 +-
 frontend/components/MostViewed.tsx            |  8 ++--
 frontend/document.tsx                         | 18 ++++-----
 frontend/pages/Article.tsx                    |  4 +-
 package.json                                  |  2 +
 .../guui/components/CloseButton/index.tsx     |  4 +-
 packages/guui/components/Container/index.tsx  | 10 ++---
 packages/guui/components/Dropdown/index.tsx   | 14 +++----
 packages/guui/components/Grid/index.tsx       | 39 +++++++------------
 packages/guui/components/Number/index.tsx     |  4 +-
 yarn.lock                                     | 25 ++++++++++++
 27 files changed, 152 insertions(+), 165 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cfaaa54e285..3fc9abf61c3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,16 +3,9 @@ module.exports = {
         browser: true,
         node: true,
     },
-    parser: 'babel-eslint',
-    parserOptions: {
-        ecmaVersion: 8,
-        sourceType: 'module',
-        ecmaFeatures: {
-            jsx: true,
-        },
-    },
+    parser: 'typescript-eslint-parser',
     extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:jsx-a11y/strict'],
-    plugins: ['react', 'prettier', 'jsx-a11y'],
+    plugins: ['react', 'prettier', 'jsx-a11y', 'typescript'],
     rules: {
         'no-underscore-dangle': 'off',
         'prettier/prettier': ['error'],
@@ -21,7 +14,7 @@ module.exports = {
         'react/jsx-filename-extension': [
             1,
             {
-                extensions: ['.js'],
+                extensions: ['.tsx'],
             },
         ],
         'react/default-props-match-prop-types': 'off',
diff --git a/frontend/App.tsx b/frontend/App.tsx
index b5d133f03e5..75b7ab955a0 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 
 export interface Data {
-    CAPI: CAPIType,
-    NAV: NavType,
-    page: string,
-    site: string
-};
+    CAPI: CAPIType;
+    NAV: NavType;
+    page: string;
+    site: string;
+}
 
 const App: React.SFC<{
-    data: Data,
-    Page: React.StatelessComponent<{data: Data}>,
-}> = ({ Page, data }) => <Page data={data}/>
+    data: Data;
+    Page: React.StatelessComponent<{ data: Data }>;
+}> = ({ Page, data }) => <Page data={data} />;
 
 export default App;
diff --git a/frontend/components/ArticleBody.tsx b/frontend/components/ArticleBody.tsx
index 3f5ebca66ea..dad644a03fa 100644
--- a/frontend/components/ArticleBody.tsx
+++ b/frontend/components/ArticleBody.tsx
@@ -301,7 +301,7 @@ const dtFormat = (date: Date) => dateformat(date, 'ddd d mmm yyyy HH:MM "GMT"');
 
 /* eslint-disable react/no-danger */
 const ArticleBody: React.SFC<{
-    CAPI: CAPIType,
+    CAPI: CAPIType;
 }> = ({ CAPI }) => (
     <div className={wrapper}>
         <header>
diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
index 0a090283aa7..f74aa2d6c1f 100644
--- a/frontend/components/Footer.tsx
+++ b/frontend/components/Footer.tsx
@@ -7,8 +7,8 @@ import { textSans } from '@guardian/pasteup/fonts';
 import { Container } from '@guardian/guui';
 
 type Link = {
-    title: string,
-    url: string,
+    title: string;
+    url: string;
 };
 
 const footerLinks: Array<Array<Link>> = [
@@ -194,8 +194,8 @@ const copyright = css`
     margin-top: 12px;
 `;
 
-const FooterLinks: React.SFC< {
-    links: Array<Array<Link>>,
+const FooterLinks: React.SFC<{
+    links: Array<Array<Link>>;
 }> = ({ links }) => {
     const linkGroups = links.map(linkGroup => {
         const ls = linkGroup.map(l => (
diff --git a/frontend/components/Header/Nav/EditionDropdown.tsx b/frontend/components/Header/Nav/EditionDropdown.tsx
index 8639a6b6c92..ee7c41110fa 100644
--- a/frontend/components/Header/Nav/EditionDropdown.tsx
+++ b/frontend/components/Header/Nav/EditionDropdown.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Dropdown } from '@guardian/guui';
-import  { Link } from '@guardian/guui/components/Dropdown';
+import { Link } from '@guardian/guui/components/Dropdown';
 
 import { css } from 'react-emotion';
 
diff --git a/frontend/components/Header/Nav/Links/SupportTheGuardian.tsx b/frontend/components/Header/Nav/Links/SupportTheGuardian.tsx
index 208b815783f..6c3dcf7718d 100644
--- a/frontend/components/Header/Nav/Links/SupportTheGuardian.tsx
+++ b/frontend/components/Header/Nav/Links/SupportTheGuardian.tsx
@@ -37,15 +37,10 @@ const style = css`
 `;
 
 const SupportTheGuardian: React.SFC<{
-    className?: string,
-    children: React.ReactChild, 
-    href: string
-}> = ({
-    className,
-    children,
-    href,
-    ...props
-}) => (
+    className?: string;
+    children: React.ReactChild;
+    href: string;
+}> = ({ className, children, href, ...props }) => (
     <a className={cx(style, className)} href={href} {...props}>
         {children}
     </a>
diff --git a/frontend/components/Header/Nav/Links/index.tsx b/frontend/components/Header/Nav/Links/index.tsx
index 00e74ceb57e..a65aa12c01f 100644
--- a/frontend/components/Header/Nav/Links/index.tsx
+++ b/frontend/components/Header/Nav/Links/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { css, cx } from 'react-emotion';
 
 import Dropdown from '@guardian/guui/components/Dropdown';
@@ -62,15 +62,10 @@ const link = ({ showAtTablet }: { showAtTablet: boolean }) => css`
 `;
 
 const Search: React.SFC<{
-    href: string,
-    children: React.ReactChild,
-    className?: string,
-}> = ({
-    className,
-    children,
-    href,
-    ...props
-}) => (
+    href: string;
+    children: React.ReactChild;
+    className?: string;
+}> = ({ className, children, href, ...props }) => (
     <a href={href} className={cx(search, className)} {...props}>
         {children}
     </a>
@@ -124,9 +119,9 @@ const identityLinks: Array<DropdownLink> = [
 ];
 
 const Links: React.SFC<{
-    isPayingMember: boolean,
-    isRecentContributor: boolean,
-    isSignedIn: boolean,
+    isPayingMember: boolean;
+    isRecentContributor: boolean;
+    isSignedIn: boolean;
 }> = ({ isPayingMember, isRecentContributor, isSignedIn }) => (
     <div className={links}>
         {isPayingMember ||
diff --git a/frontend/components/Header/Nav/Logo.tsx b/frontend/components/Header/Nav/Logo.tsx
index e57c214afdb..69c858e8eb6 100644
--- a/frontend/components/Header/Nav/Logo.tsx
+++ b/frontend/components/Header/Nav/Logo.tsx
@@ -67,7 +67,11 @@ const SVG = () => <TheGuardianLogoSVG className={style} />;
 
 const Logo: React.SFC = () => (
     <a className={link} href="/">
-        <span className={css`${screenReaderOnly}`}>
+        <span
+            className={css`
+                ${screenReaderOnly};
+            `}
+        >
             The Guardian - Back to home
         </span>
         <SVG />
diff --git a/frontend/components/Header/Nav/MainMenu/Column.tsx b/frontend/components/Header/Nav/MainMenu/Column.tsx
index a7614a832aa..019d98df730 100644
--- a/frontend/components/Header/Nav/MainMenu/Column.tsx
+++ b/frontend/components/Header/Nav/MainMenu/Column.tsx
@@ -75,11 +75,11 @@ const collapseColumnButton = css`
 `;
 
 const CollapseColumnButton: React.SFC<{
-    column: LinkType,
-    showColumnLinks: boolean,
-    toggleColumnLinks: () => void,
-    ariaControls: string,
-    isLastIndex: boolean,
+    column: LinkType;
+    showColumnLinks: boolean;
+    toggleColumnLinks: () => void;
+    ariaControls: string;
+    isLastIndex: boolean;
 }> = ({
     column,
     showColumnLinks,
@@ -164,9 +164,9 @@ const mainMenuLinkStyle = css`
     }
 `;
 
-const ColumnLink: React.SFC<{ 
-    column: LinkType, 
-    link: LinkType,
+const ColumnLink: React.SFC<{
+    column: LinkType;
+    link: LinkType;
 }> = ({ link, column }) => (
     <li
         className={cx(mainMenuLinkStyle, {
@@ -233,16 +233,11 @@ const getColumnLinks = (
 };
 
 const ColumnLinks: React.SFC<{
-    column: LinkType,
-    brandExtensions: Array<LinkType>,
-    showColumnLinks: boolean,
-    id: string,
-}> = ({
-    column,
-    showColumnLinks,
-    id,
-    brandExtensions,
-}) => {
+    column: LinkType;
+    brandExtensions: Array<LinkType>;
+    showColumnLinks: boolean;
+    id: string;
+}> = ({ column, showColumnLinks, id, brandExtensions }) => {
     const links = getColumnLinks(column, brandExtensions);
 
     return (
@@ -297,9 +292,9 @@ const columnStyle = css`
 `;
 
 type ColumnProps = {
-    column: LinkType,
-    isLastIndex: boolean,
-    brandExtensions: Array<LinkType>,
+    column: LinkType;
+    isLastIndex: boolean;
+    brandExtensions: Array<LinkType>;
 };
 
 export class Column extends Component<
diff --git a/frontend/components/Header/Nav/MainMenu/Columns.tsx b/frontend/components/Header/Nav/MainMenu/Columns.tsx
index 12d196771a1..84be5385d97 100644
--- a/frontend/components/Header/Nav/MainMenu/Columns.tsx
+++ b/frontend/components/Header/Nav/MainMenu/Columns.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { css } from 'react-emotion';
 
 import { tablet, desktop, leftCol, wide } from '@guardian/pasteup/breakpoints';
@@ -95,12 +95,9 @@ const brandExtensionLink = css`
 `;
 
 export const Columns: React.SFC<{
-    columns: Array<LinkType>,
-    brandExtensions: Array<LinkType>,
-}> = ({
-    columns,
-    brandExtensions,
-}) => (
+    columns: Array<LinkType>;
+    brandExtensions: Array<LinkType>;
+}> = ({ columns, brandExtensions }) => (
     <ul className={ColumnsStyle} role="menubar" tabIndex={-1}>
         {columns.map((column, i) => (
             <Column
diff --git a/frontend/components/Header/Nav/MainMenu/index.tsx b/frontend/components/Header/Nav/MainMenu/index.tsx
index c15131aa2d9..df8831d49bd 100644
--- a/frontend/components/Header/Nav/MainMenu/index.tsx
+++ b/frontend/components/Header/Nav/MainMenu/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { css, cx } from 'react-emotion';
 
 import {
@@ -68,14 +68,10 @@ const mainMenu = css`
 `;
 
 export const MainMenu: React.SFC<{
-    showMainMenu: boolean,
-    id: string,
-    nav: NavType,
-}> = ({
-    showMainMenu,
-    id,
-    nav,
-}) => (
+    showMainMenu: boolean;
+    id: string;
+    nav: NavType;
+}> = ({ showMainMenu, id, nav }) => (
     <div
         className={cx(mainMenu, { [showMenu]: showMainMenu })}
         aria-hidden={!showMainMenu}
diff --git a/frontend/components/Header/Nav/MainMenuToggle/VeggieBurger.tsx b/frontend/components/Header/Nav/MainMenuToggle/VeggieBurger.tsx
index 05ddbebaeee..48c95dd42ec 100644
--- a/frontend/components/Header/Nav/MainMenuToggle/VeggieBurger.tsx
+++ b/frontend/components/Header/Nav/MainMenuToggle/VeggieBurger.tsx
@@ -7,7 +7,7 @@ import {
     mobileLandscape,
 } from '@guardian/pasteup/breakpoints';
 
-const veggieBurger = ({ showMainMenu }: { showMainMenu: boolean}) => css`
+const veggieBurger = ({ showMainMenu }: { showMainMenu: boolean }) => css`
     background-color: #121212;
     top: 24px;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
@@ -35,7 +35,7 @@ const veggieBurger = ({ showMainMenu }: { showMainMenu: boolean}) => css`
     }
 `;
 
-const veggieBurgerIcon = ({ showMainMenu }: { showMainMenu: boolean}) => {
+const veggieBurgerIcon = ({ showMainMenu }: { showMainMenu: boolean }) => {
     const beforeAfterStyles = css`
         content: '';
         background-color: currentColor;
@@ -77,11 +77,11 @@ const veggieBurgerIcon = ({ showMainMenu }: { showMainMenu: boolean}) => {
 };
 
 export const VeggieBurger: React.SFC<{
-    toggleMainMenu: () => void,
-    showMainMenu: boolean,
-    enhanceCheckbox: boolean,
-    htmlFor: string,
-    ariaControls: string,
+    toggleMainMenu: () => void;
+    showMainMenu: boolean;
+    enhanceCheckbox: boolean;
+    htmlFor: string;
+    ariaControls: string;
 }> = ({
     toggleMainMenu,
     showMainMenu,
diff --git a/frontend/components/Header/Nav/MainMenuToggle/index.tsx b/frontend/components/Header/Nav/MainMenuToggle/index.tsx
index afcdcfe2226..58b019b173a 100644
--- a/frontend/components/Header/Nav/MainMenuToggle/index.tsx
+++ b/frontend/components/Header/Nav/MainMenuToggle/index.tsx
@@ -8,7 +8,7 @@ import { headline } from '@guardian/pasteup/fonts';
 import { VeggieBurger } from './VeggieBurger';
 
 const screenReadable = css`
-    ${screenReaderOnly}
+    ${screenReaderOnly};
 `;
 const navPrimaryColour = '#121212';
 const navSecondaryColour = '#5d5f5f';
@@ -52,7 +52,7 @@ const label = css`
         display: inline-block;
     }
 `;
-const text = ({ showMainMenu }: { showMainMenu: boolean}) => css`
+const text = ({ showMainMenu }: { showMainMenu: boolean }) => css`
     display: block;
     height: 100%;
     :after {
@@ -78,9 +78,9 @@ const text = ({ showMainMenu }: { showMainMenu: boolean}) => css`
 `;
 
 type Props = {
-    toggleMainMenu: () => void,
-    showMainMenu: boolean,
-    ariaControls: string,
+    toggleMainMenu: () => void;
+    showMainMenu: boolean;
+    ariaControls: string;
 };
 
 class MainMenuToggle extends Component<Props, { enhanceCheckbox: boolean }> {
diff --git a/frontend/components/Header/Nav/Pillars/index.tsx b/frontend/components/Header/Nav/Pillars/index.tsx
index dece2aa9f75..42cfc99ded8 100644
--- a/frontend/components/Header/Nav/Pillars/index.tsx
+++ b/frontend/components/Header/Nav/Pillars/index.tsx
@@ -61,7 +61,7 @@ const showMenuUnderline = (shouldShow: boolean): string => {
             text-decoration: none;
         }
     `;
-    
+
     if (shouldShow) {
         return show;
     }
@@ -109,8 +109,8 @@ const linkStyle = css`
 `;
 
 const Pillars: React.SFC<{
-    showMainMenu: boolean,
-    pillars: Array<LinkType>,
+    showMainMenu: boolean;
+    pillars: Array<LinkType>;
 }> = ({ showMainMenu, pillars }) => (
     <ul className={pillarsStyles}>
         {pillars.filter(pillar => pillar.title !== 'More').map(pillar => (
diff --git a/frontend/components/Header/Nav/SubNav.tsx b/frontend/components/Header/Nav/SubNav.tsx
index 5ef0e208ed5..8ba7e748948 100644
--- a/frontend/components/Header/Nav/SubNav.tsx
+++ b/frontend/components/Header/Nav/SubNav.tsx
@@ -88,16 +88,16 @@ const parentStyle = css`
 `;
 
 type Props = {
-    parent?: LinkType,
-    links: Array<LinkType>,
+    parent?: LinkType;
+    links: Array<LinkType>;
 };
 
 export default class Subnav extends Component<
     Props,
     {
-        showMore: boolean,
-        isExpanded: boolean,
-        noJS: boolean,
+        showMore: boolean;
+        isExpanded: boolean;
+        noJS: boolean;
     }
 > {
     private ulRef: React.RefObject<HTMLUListElement>;
@@ -118,8 +118,6 @@ export default class Subnav extends Component<
         });
     }
 
-   
-
     toggle_: () => void;
 
     toggle() {
diff --git a/frontend/components/Header/Nav/index.tsx b/frontend/components/Header/Nav/index.tsx
index d48008e4519..3601e1e5b8a 100644
--- a/frontend/components/Header/Nav/index.tsx
+++ b/frontend/components/Header/Nav/index.tsx
@@ -35,7 +35,7 @@ const subnav = css`
 `;
 
 type Props = {
-    nav: NavType,
+    nav: NavType;
 };
 
 export default class Nav extends Component<Props, { showMainMenu: boolean }> {
diff --git a/frontend/components/Header/index.tsx b/frontend/components/Header/index.tsx
index f3ae60ebd2a..e22d3867aa3 100644
--- a/frontend/components/Header/index.tsx
+++ b/frontend/components/Header/index.tsx
@@ -15,7 +15,7 @@ const header = css`
 `;
 
 const Header: React.SFC<{
-    nav: NavType,
+    nav: NavType;
 }> = ({ nav }) => (
     <header className={header}>
         <Nav nav={nav} />
diff --git a/frontend/components/MostViewed.tsx b/frontend/components/MostViewed.tsx
index 73c46cc6775..3af781b02c6 100755
--- a/frontend/components/MostViewed.tsx
+++ b/frontend/components/MostViewed.tsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import { css } from 'react-emotion';
 import { headline, textEgyptian } from '@guardian/pasteup/fonts';
 import palette from '@guardian/pasteup/palette';
@@ -41,13 +41,13 @@ const headlineBody = css`
     font-family: ${textEgyptian};
 `;
 
-type Trails =  Array<{url: string, linkText: string}>
+type Trails = Array<{ url: string; linkText: string }>;
 
 export default class MostViewed extends Component<{}, { trails: Trails }> {
     constructor(props: {}) {
         super(props);
-        this.state = { 
-            trails: []
+        this.state = {
+            trails: [],
         };
     }
 
diff --git a/frontend/document.tsx b/frontend/document.tsx
index 8d8ca5083de..7c948707620 100644
--- a/frontend/document.tsx
+++ b/frontend/document.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { extractCritical } from 'emotion-server';
 import { renderToString } from 'react-dom/server';
 
@@ -10,17 +10,17 @@ import App, { Data } from './App';
 
 type Props = {
     data: {
-        page: string,
-        site: string,
-        body: { config?: {}, contentFields?: {} },
-    },
-    Page: React.StatelessComponent<{data: Data}>,
+        page: string;
+        site: string;
+        body: { config?: {}; contentFields?: {} };
+    };
+    Page: React.StatelessComponent<{ data: Data }>;
 };
 
 type renderToStringResult = {
-    html: string,
-    css: string,
-    ids: Array<string>,
+    html: string;
+    css: string;
+    ids: Array<string>;
 };
 
 export default ({ Page, data: { body, ...data } }: Props) => {
diff --git a/frontend/pages/Article.tsx b/frontend/pages/Article.tsx
index a1f10e3a7ad..1a1a75be3ee 100644
--- a/frontend/pages/Article.tsx
+++ b/frontend/pages/Article.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-danger */
-import React from 'react'
+import React from 'react';
 import { Container } from '@guardian/guui';
 import { css } from 'react-emotion';
 import palette from '@guardian/pasteup/palette';
@@ -57,7 +57,7 @@ const articleContainer = css`
 `;
 
 const Article: React.SFC<{
-    data: Data
+    data: Data;
 }> = ({ data }) => (
     <div>
         <Header nav={data.NAV} />
diff --git a/package.json b/package.json
index 5ecad148ae3..eaa7a25e890 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
         "eslint-plugin-jsx-a11y": "^6.1.1",
         "eslint-plugin-prettier": "^2.6.0",
         "eslint-plugin-react": "^7.4.0",
+        "eslint-plugin-typescript": "^0.12.0",
         "friendly-errors-webpack-plugin": "^1.7.0",
         "log-update": "^2.3.0",
         "prettier": "^1.7.4",
@@ -55,6 +56,7 @@
         "stylelint-processor-styled-components": "^1.3.2",
         "term-size": "^1.2.0",
         "typescript": "^3.0.1",
+        "typescript-eslint-parser": "^18.0.0",
         "webpack": "^4.5.0",
         "webpack-assets-manifest": "^3.0.1",
         "webpack-bundle-analyzer": "^2.11.1",
diff --git a/packages/guui/components/CloseButton/index.tsx b/packages/guui/components/CloseButton/index.tsx
index 84de7b92658..dc4763583f9 100644
--- a/packages/guui/components/CloseButton/index.tsx
+++ b/packages/guui/components/CloseButton/index.tsx
@@ -21,8 +21,8 @@ const closeButton = (foregroundColour: string, backgroundColour: string) => css`
 `;
 
 const CloseButton: React.SFC<{
-    foregroundColour: string,
-    backgroundColour: string,
+    foregroundColour: string;
+    backgroundColour: string;
 }> = ({ foregroundColour, backgroundColour }) => (
     <CloseIcon className={closeButton(foregroundColour, backgroundColour)} />
 );
diff --git a/packages/guui/components/Container/index.tsx b/packages/guui/components/Container/index.tsx
index 686c19cd277..939cca9ccfa 100644
--- a/packages/guui/components/Container/index.tsx
+++ b/packages/guui/components/Container/index.tsx
@@ -24,13 +24,9 @@ const container = css`
 `;
 
 const Container: React.SFC<{
-    className?: string,
-    children: React.ReactNode,
-}> = ({
-    className,
-    children,
-    ...props
-}) => (
+    className?: string;
+    children: React.ReactNode;
+}> = ({ className, children, ...props }) => (
     <div className={cx(container, className)} {...props}>
         {children}
     </div>
diff --git a/packages/guui/components/Dropdown/index.tsx b/packages/guui/components/Dropdown/index.tsx
index 7d95abecb72..85223277199 100644
--- a/packages/guui/components/Dropdown/index.tsx
+++ b/packages/guui/components/Dropdown/index.tsx
@@ -4,15 +4,15 @@ import palette from '@guardian/pasteup/palette';
 import { textSans } from '@guardian/pasteup/fonts';
 
 export type Link = {
-    url: string,
-    title: string,
-    isActive?: boolean,
+    url: string;
+    title: string;
+    isActive?: boolean;
 };
 
 type Props = {
-    id: string,
-    label: string,
-    links: Array<Link>,
+    id: string;
+    label: string;
+    links: Array<Link>;
 };
 
 const input = css`
@@ -140,7 +140,7 @@ const buttonExpanded = css`
 
 export default class Dropdown extends React.Component<
     Props,
-    { isExpanded: boolean, noJS: boolean }
+    { isExpanded: boolean; noJS: boolean }
 > {
     constructor(props: Props) {
         super(props);
diff --git a/packages/guui/components/Grid/index.tsx b/packages/guui/components/Grid/index.tsx
index a54c1a16686..8671428da95 100755
--- a/packages/guui/components/Grid/index.tsx
+++ b/packages/guui/components/Grid/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { css } from 'react-emotion';
 import {
     tablet as tabletMq,
@@ -11,23 +11,19 @@ import { clearFix } from '@guardian/pasteup/mixins';
 type Breakpoints = 'tablet' | 'desktop' | 'leftCol' | 'wide';
 
 type BreakpointOptions = {
-    inset?: number,
+    inset?: number;
 };
 
 type BreakpointProps = [number, BreakpointOptions];
 
-type BreakpointsWithProps = {
-    [K in Breakpoints]: BreakpointProps    
-}
+type BreakpointsWithProps = { [K in Breakpoints]: BreakpointProps };
 
 type GridSize = {
-    max: number,
-    width: number,
+    max: number;
+    width: number;
 };
 
-type GridSizes = {
-    [K in Breakpoints]: GridSize
-};
+type GridSizes = { [K in Breakpoints]: GridSize };
 
 const gutter = 20;
 
@@ -50,9 +46,7 @@ const columns: GridSizes = {
     },
 };
 
-const breakpointMqs: {
-    [K in Breakpoints]: string
-} = {
+const breakpointMqs: { [K in Breakpoints]: string } = {
     tablet: tabletMq,
     desktop: desktopMq,
     leftCol: leftColMq,
@@ -96,7 +90,7 @@ const cols: (props: BreakpointsWithProps) => any = ({
     tablet,
     desktop,
     leftCol,
-    wide
+    wide,
 }) => css`
     ${gridStyles('tablet', tablet)};
     ${gridStyles('desktop', desktop)};
@@ -114,12 +108,9 @@ const normaliseProps = (props: BreakpointProps | number): BreakpointProps => {
 };
 
 export const Row: React.SFC<{
-    htmlTag: string,
-    children: React.ReactNode,
-}> = ({
-    htmlTag,
-    children,
-}) => (
+    htmlTag: string;
+    children: React.ReactNode;
+}> = ({ htmlTag, children }) => (
     <>
         {React.createElement(
             htmlTag,
@@ -131,7 +122,7 @@ export const Row: React.SFC<{
     </>
 );
 
-export interface ColsProps  { 
+export interface ColsProps {
     tablet: BreakpointProps | number;
     desktop: BreakpointProps | number;
     leftCol: BreakpointProps | number;
@@ -143,9 +134,9 @@ export interface ColsProps  {
 export const Cols: React.SFC<ColsProps> = ({
     htmlTag = 'div',
     tablet = columns.tablet.max,
-    desktop = columns.desktop.max, 
-    leftCol = columns.leftCol.max, 
-    wide =    columns.wide.max   , 
+    desktop = columns.desktop.max,
+    leftCol = columns.leftCol.max,
+    wide = columns.wide.max,
     children,
 }) => (
     <>
diff --git a/packages/guui/components/Number/index.tsx b/packages/guui/components/Number/index.tsx
index 46569951347..e86aed8c840 100755
--- a/packages/guui/components/Number/index.tsx
+++ b/packages/guui/components/Number/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import Number0 from './0.svg';
 import Number1 from './1.svg';
 import Number2 from './2.svg';
@@ -12,7 +12,7 @@ import Number9 from './9.svg';
 import Number10 from './10.svg';
 
 const Number = ({ index }: { index: number }) => {
-    const numbers= [
+    const numbers = [
         <Number0 />,
         <Number1 />,
         <Number2 />,
diff --git a/yarn.lock b/yarn.lock
index a46998e8c6f..603f8c78ef0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3635,6 +3635,12 @@ eslint-plugin-react@^7.4.0:
     jsx-ast-utils "^2.0.1"
     prop-types "^15.6.2"
 
+eslint-plugin-typescript@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-typescript/-/eslint-plugin-typescript-0.12.0.tgz#e23d58cb27fe28e89fc641a1f20e8d862cb99aef"
+  dependencies:
+    requireindex "~1.1.0"
+
 eslint-restricted-globals@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz#35f0d5cbc64c2e3ed62e93b4b1a7af05ba7ed4d7"
@@ -5578,6 +5584,10 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
+lodash.unescape@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7674,6 +7684,10 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requireindex@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.1.0.tgz#e5404b81557ef75db6e49c5a72004893fe03e162"
+
 reset-css@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/reset-css/-/reset-css-3.0.0.tgz#9b421d34fefc6e5d5b915ee7bfd72b1bc19cfbb0"
@@ -7837,6 +7851,10 @@ scoped-regex@^1.0.0:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
 
+semver@5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -8683,6 +8701,13 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript-eslint-parser@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-18.0.0.tgz#3e5055a44980d69e4154350fc5d8b1ab4e2332a8"
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
 typescript@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.0.3.tgz#4853b3e275ecdaa27f78fda46dc273a7eb7fc1c8"

From e34f5882283cfd7374b4f56d6eec38ffa48ece6e Mon Sep 17 00:00:00 2001
From: Alex Ware <alex.ware@guardian.co.uk>
Date: Tue, 4 Sep 2018 17:00:32 +0100
Subject: [PATCH 2/3] more eslint

---
 .eslintrc.js                          |  7 ++++
 frontend/htmlTemplate.ts              | 22 ++++++-------
 frontend/index.d.ts                   | 47 +++++++++++++--------------
 frontend/lib/parse-capi/index.ts      | 21 ++++++++----
 index.d.ts                            | 16 ++++-----
 makefile                              |  4 +--
 package.json                          |  1 +
 packages/guui/svg.d.ts                |  8 ++---
 packages/pasteup/palette.ts           |  4 +--
 packages/rendering/browser.ts         |  2 +-
 packages/rendering/lib/aws-metrics.ts |  8 ++---
 packages/rendering/server.ts          |  9 +++--
 yarn.lock                             |  8 ++++-
 13 files changed, 89 insertions(+), 68 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3fc9abf61c3..46305197fa1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
         'react/default-props-match-prop-types': 'off',
         'react/require-default-props': 'off',
         'import/prefer-default-export': 'off',
+        'import/extensions': 'off'
     },
     overrides: [
         {
@@ -32,4 +33,10 @@ module.exports = {
             },
         },
     ],
+    "settings": {
+        "import/resolver": {
+          "node": true,
+          "eslint-import-resolver-typescript": true
+        }
+      }
 };
diff --git a/frontend/htmlTemplate.ts b/frontend/htmlTemplate.ts
index 7e19c851c3c..3d948dbfa8a 100644
--- a/frontend/htmlTemplate.ts
+++ b/frontend/htmlTemplate.ts
@@ -11,19 +11,19 @@ export default ({
     nonBlockingJS = '',
     fontFiles = [],
 }: {
-    title?: string,
-    bundleJS: string,
-    css: string,
-    html: string,
+    title?: string;
+    bundleJS: string;
+    css: string;
+    html: string;
     data: {
-        page: string,
-        site: string,
-    },
-    cssIDs: Array<string>,
-    nonBlockingJS?: string,
-    fontFiles?: Array<string>,
+        page: string;
+        site: string;
+    };
+    cssIDs: Array<string>;
+    nonBlockingJS?: string;
+    fontFiles?: Array<string>;
 }) => {
-    const sanitiseDomRefs = (jsString: string ) =>
+    const sanitiseDomRefs = (jsString: string) =>
         jsString.replace(/"(document.*?innerHTML)"/g, '$1');
     const vendorJS = assets.dist('vendor.js');
     const fontCSS = assets.static('css/fonts.css');
diff --git a/frontend/index.d.ts b/frontend/index.d.ts
index cd9ed457905..f6dcb4468c8 100644
--- a/frontend/index.d.ts
+++ b/frontend/index.d.ts
@@ -1,41 +1,40 @@
 // shared type declarations
 interface LinkType {
-    title: string,
-    longTitle: string,
-    url: string,
-    children?: Array<LinkType>,
-    mobileOnly?: boolean,
-    isPillar?: boolean,
+    title: string;
+    longTitle: string;
+    url: string;
+    children?: Array<LinkType>;
+    mobileOnly?: boolean;
+    isPillar?: boolean;
 }
 interface NavType {
-    pillars: Array<LinkType>,
-    otherLinks: Array<LinkType>,
-    brandExtensions: Array<LinkType>,
+    pillars: Array<LinkType>;
+    otherLinks: Array<LinkType>;
+    brandExtensions: Array<LinkType>;
     subNavSections?: {
-        parent: LinkType,
-        links: Array<LinkType>,
-    },
+        parent: LinkType;
+        links: Array<LinkType>;
+    };
 }
 interface CAPIType {
-    headline: string,
-    standfirst: string,
-    main: string,
-    body: string,
-    author: string,
-    webPublicationDate: Date,
-    sectionName: string,
+    headline: string;
+    standfirst: string;
+    main: string;
+    body: string;
+    author: string;
+    webPublicationDate: Date;
+    sectionName: string;
 }
 
-
 // 3rd party type declarations
-declare module "emotion-server" {
+declare module 'emotion-server' {
     export const extractCritical: any;
 }
-declare module "dompurify" {
+declare module 'dompurify' {
     const createDOMPurify: any;
     export default createDOMPurify;
 }
-declare module "compose-function" {
+declare module 'compose-function' {
     const compose: any;
     export default compose;
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/parse-capi/index.ts b/frontend/lib/parse-capi/index.ts
index 78339024022..8c33b7e1b09 100644
--- a/frontend/lib/parse-capi/index.ts
+++ b/frontend/lib/parse-capi/index.ts
@@ -5,14 +5,20 @@ import get from 'lodash.get';
 import clean from './clean';
 import bigBullets from './big-bullets';
 
-const headline = compose(clean, curly);
-const standfirst = compose(clean, bigBullets);
+const headline = compose(
+    clean,
+    curly,
+);
+const standfirst = compose(
+    clean,
+    bigBullets,
+);
 const main = clean;
 const body = clean;
 
 type props = {
-    contentFields?: {},
-    config?: {},
+    contentFields?: {};
+    config?: {};
 };
 
 const defaultArgs = { config: {}, contentFields: {} };
@@ -22,7 +28,10 @@ const defaultArgs = { config: {}, contentFields: {} };
 // should be just that - a rendering layer only.
 //
 // We *should* however validate the data we receive at this point.
-const parse: (p: props) => {CAPI: CAPIType, NAV: NavType} = ({ contentFields, config }: props = defaultArgs) => {
+const parse: (p: props) => { CAPI: CAPIType; NAV: NavType } = ({
+    contentFields,
+    config,
+}: props = defaultArgs) => {
     const nav = get(config, 'nav', []);
     const pillars = nav.pillars
         ? nav.pillars.map((link: LinkType) => {
@@ -66,4 +75,4 @@ const parse: (p: props) => {CAPI: CAPIType, NAV: NavType} = ({ contentFields, co
     };
 };
 
-export default parse
\ No newline at end of file
+export default parse;
diff --git a/index.d.ts b/index.d.ts
index 6775bcabbfd..2c964db8dc5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -1,16 +1,16 @@
 declare global {
-    /*~ Here, declare things that go in the global namespace, or augment
+    /* ~ Here, declare things that go in the global namespace, or augment
      *~ existing declarations in the global namespace
      */
-    interface Window { 
+    interface Window {
         gu: {
             app: {
-                data: any,
-                cssIDs: Array<string>
-            }
-        }; 
+                data: any;
+                cssIDs: Array<string>;
+            };
+        };
     }
 }
 
-/*~ this line is required as per TypeScript's global-modifying-module.d.ts instructions */
-export {};
\ No newline at end of file
+/* ~ this line is required as per TypeScript's global-modifying-module.d.ts instructions */
+export {};
diff --git a/makefile b/makefile
index 068d454701d..3b10d9a2c88 100644
--- a/makefile
+++ b/makefile
@@ -65,11 +65,11 @@ tsc: clean-dist install
 
 fix: clear clean-dist install
 	$(call log, "attempting to fix lint errors")
-	@eslint . --fix --quiet
+	@eslint . --fix --quiet --ext .js,.ts,.tsx
 
 lint: clean-dist install
 	$(call log, "checking for lint errors")
-	@eslint . --quiet
+	@eslint . --quiet --ext .js,.ts,.tsx
 
 stylelint: clean-dist install
 	$(call log, "checking for style lint errors")
diff --git a/package.json b/package.json
index eaa7a25e890..5a14ad1c69f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
         "eslint": "^4.18.0",
         "eslint-config-airbnb": "^16.1.0",
         "eslint-config-prettier": "^2.6.0",
+        "eslint-import-resolver-typescript": "^1.0.2",
         "eslint-plugin-import": "^2.7.0",
         "eslint-plugin-jsx-a11y": "^6.1.1",
         "eslint-plugin-prettier": "^2.6.0",
diff --git a/packages/guui/svg.d.ts b/packages/guui/svg.d.ts
index 79579dba9e2..60bd434c6f9 100644
--- a/packages/guui/svg.d.ts
+++ b/packages/guui/svg.d.ts
@@ -1,4 +1,4 @@
-declare module "*.svg" {
-  const content: any;
-  export default content;
-}
\ No newline at end of file
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}
diff --git a/packages/pasteup/palette.ts b/packages/pasteup/palette.ts
index 1a510ede2a7..7d4606e1d35 100644
--- a/packages/pasteup/palette.ts
+++ b/packages/pasteup/palette.ts
@@ -43,7 +43,7 @@ const palette = {
 
 export default palette;
 
-export const pillars: { [s: string]: string; } = {
+export const pillars: { [s: string]: string } = {
     news: palette.red.medium,
     opinion: palette.orange.medium,
     sport: palette.blue.medium,
@@ -51,7 +51,7 @@ export const pillars: { [s: string]: string; } = {
     lifestyle: palette.pink.medium,
 };
 
-export const pillarsHighlight: { [s: string]: string; } = {
+export const pillarsHighlight: { [s: string]: string } = {
     news: palette.red.light,
     opinion: palette.orange.light,
     sport: palette.blue.light,
diff --git a/packages/rendering/browser.ts b/packages/rendering/browser.ts
index 0a4b84ef90f..c8af9ef17a8 100644
--- a/packages/rendering/browser.ts
+++ b/packages/rendering/browser.ts
@@ -29,6 +29,6 @@ if (container) {
     if (process.env.NODE_ENV !== 'development') {
         hydrateCSS(cssIDs);
     }
-    
+
     hydrateApp(React.createElement(App, { Page, data }), container);
 }
diff --git a/packages/rendering/lib/aws-metrics.ts b/packages/rendering/lib/aws-metrics.ts
index 0a7e0f014c1..1f4c5503016 100644
--- a/packages/rendering/lib/aws-metrics.ts
+++ b/packages/rendering/lib/aws-metrics.ts
@@ -1,7 +1,7 @@
 import AWS from 'aws-sdk';
 
 type Metric = {
-    send: () => void,
+    send: () => void;
 };
 
 process.env.AWS_PROFILE = 'frontend';
@@ -115,8 +115,4 @@ const BytesMetric = function BytesMetric(
     };
 };
 
-export {
-    collectAndSendAWSMetrics,
-    BytesMetric,
-    TimingMetric,
-};
\ No newline at end of file
+export { collectAndSendAWSMetrics, BytesMetric, TimingMetric };
diff --git a/packages/rendering/server.ts b/packages/rendering/server.ts
index 2686255e633..9dc321a1f3d 100644
--- a/packages/rendering/server.ts
+++ b/packages/rendering/server.ts
@@ -8,7 +8,10 @@ import document from '../../frontend/document';
 import Article from '../../frontend/pages/Article';
 import { dist, getPagesForSite, root } from '../../config';
 
-const render = async ({ params, body }: express.Request, res: express.Response) => {
+const render = async (
+    { params, body }: express.Request,
+    res: express.Response,
+) => {
     try {
         const { page } = params;
         const data = {
@@ -56,7 +59,7 @@ if (process.env.NODE_ENV === 'production') {
 
     app.get('/', async (req, res) => {
         try {
-            const pages = await getPagesForSite() as Array<string>;
+            const pages = (await getPagesForSite()) as Array<string>;
             res.send(`
                 <!DOCTYPE html>
                 <html>
@@ -76,7 +79,7 @@ if (process.env.NODE_ENV === 'production') {
 
     // express requires all 4 args here:
     // eslint-disable-next-line no-unused-vars
-    app.use((err: any , req: any , res:any, next: any) => {
+    app.use((err: any, req: any, res: any, next: any) => {
         res.status(500).send(`<pre>${err.stack}</pre>`);
     });
 
diff --git a/yarn.lock b/yarn.lock
index 603f8c78ef0..9e7a6c41483 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3583,6 +3583,12 @@ eslint-import-resolver-node@^0.3.1:
     debug "^2.6.9"
     resolve "^1.5.0"
 
+eslint-import-resolver-typescript@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-1.0.2.tgz#d910270459668c92c4673d0cf74c08d763ad5c98"
+  dependencies:
+    resolve "^1.4.0"
+
 eslint-module-utils@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz#b270362cd88b1a48ad308976ce7fa54e98411746"
@@ -7721,7 +7727,7 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.6, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0:
+resolve@^1.1.6, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.6.0:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:

From d1411c1ad6ef53eed243cc5448687058623b75ab Mon Sep 17 00:00:00 2001
From: Alex Ware <alex.ware@guardian.co.uk>
Date: Tue, 4 Sep 2018 17:44:49 +0100
Subject: [PATCH 3/3] more eslint

---
 .eslintrc.js                                  | 24 +++++++++++++------
 .../components/Header/Nav/Links/index.tsx     |  5 ++--
 frontend/components/Header/Nav/SubNav.tsx     | 16 ++++++-------
 frontend/components/Header/Nav/index.tsx      |  4 ++--
 frontend/index.d.ts                           |  2 +-
 tsconfig.json                                 |  2 ++
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 46305197fa1..491f69a8fda 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,7 +20,8 @@ module.exports = {
         'react/default-props-match-prop-types': 'off',
         'react/require-default-props': 'off',
         'import/prefer-default-export': 'off',
-        'import/extensions': 'off'
+        'import/extensions': 'off',
+        'react/sort-comp': 'off', // This flags type declarations in typescript which I think isn't what we want. But the rule would be useful.
     },
     overrides: [
         {
@@ -32,11 +33,20 @@ module.exports = {
                 'no-console': 'off',
             },
         },
+        {
+            files: ['**/*.ts', '**/*.tsx'],
+            parser: 'typescript-eslint-parser',
+            rules: {
+                'no-undef': 'off',
+                'no-unused-vars': 'off',
+                'no-multi-string': 'off',
+            },
+        },
     ],
-    "settings": {
-        "import/resolver": {
-          "node": true,
-          "eslint-import-resolver-typescript": true
-        }
-      }
+    settings: {
+        'import/resolver': {
+            node: true,
+            'eslint-import-resolver-typescript': true,
+        },
+    },
 };
diff --git a/frontend/components/Header/Nav/Links/index.tsx b/frontend/components/Header/Nav/Links/index.tsx
index a65aa12c01f..bf257cca71d 100644
--- a/frontend/components/Header/Nav/Links/index.tsx
+++ b/frontend/components/Header/Nav/Links/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { css, cx } from 'react-emotion';
 
-import Dropdown from '@guardian/guui/components/Dropdown';
-import { Link as DropdownLink } from '@guardian/guui/components/Dropdown';
+import Dropdown, {
+    Link as DropdownLink,
+} from '@guardian/guui/components/Dropdown';
 import palette from '@guardian/pasteup/palette';
 import { textSans } from '@guardian/pasteup/fonts';
 import { tablet, desktop } from '@guardian/pasteup/breakpoints';
diff --git a/frontend/components/Header/Nav/SubNav.tsx b/frontend/components/Header/Nav/SubNav.tsx
index 8ba7e748948..9903d487ef7 100644
--- a/frontend/components/Header/Nav/SubNav.tsx
+++ b/frontend/components/Header/Nav/SubNav.tsx
@@ -88,7 +88,7 @@ const parentStyle = css`
 `;
 
 type Props = {
-    parent?: LinkType;
+    parentLink?: LinkType;
     links: Array<LinkType>;
 };
 
@@ -143,20 +143,20 @@ export default class Subnav extends Component<
     }
 
     render() {
-        const { parent, links } = this.props;
+        const { parentLink, links } = this.props;
 
         let lis = [];
 
-        if (parent) {
-            const parentLink = (
-                <li key={parent.url} className={parentStyle}>
-                    <a className={parentLinkStyle} href={parent.url}>
-                        {parent.title}
+        if (parentLink) {
+            const p = (
+                <li key={parentLink.url} className={parentStyle}>
+                    <a className={parentLinkStyle} href={parentLink.url}>
+                        {parentLink.title}
                     </a>
                 </li>
             );
 
-            lis.unshift(parentLink);
+            lis.unshift(p);
         }
 
         lis = lis.concat(
diff --git a/frontend/components/Header/Nav/index.tsx b/frontend/components/Header/Nav/index.tsx
index 3601e1e5b8a..b68c3db56a4 100644
--- a/frontend/components/Header/Nav/index.tsx
+++ b/frontend/components/Header/Nav/index.tsx
@@ -98,12 +98,12 @@ export default class Nav extends Component<Props, { showMainMenu: boolean }> {
                     />
                 </nav>
                 {nav.subNavSections &&
-                    nav.subNavSections.parent &&
+                    nav.subNavSections.parentLink &&
                     nav.subNavSections.links && (
                         <div className={subnav}>
                             <div className={centered}>
                                 <SubNav
-                                    parent={nav.subNavSections.parent}
+                                    parentLink={nav.subNavSections.parentLink}
                                     links={nav.subNavSections.links}
                                 />
                             </div>
diff --git a/frontend/index.d.ts b/frontend/index.d.ts
index f6dcb4468c8..604c40a285f 100644
--- a/frontend/index.d.ts
+++ b/frontend/index.d.ts
@@ -12,7 +12,7 @@ interface NavType {
     otherLinks: Array<LinkType>;
     brandExtensions: Array<LinkType>;
     subNavSections?: {
-        parent: LinkType;
+        parentLink: LinkType;
         links: Array<LinkType>;
     };
 }
diff --git a/tsconfig.json b/tsconfig.json
index 6aef4159377..8a4bff259de 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,6 +24,8 @@
 
         /* Strict Type-Checking Options */
         "strict": true  /* Enable all strict type-checking options. */,
+        // "noUnusedParameters": true, We can turn this on to get full no-unused-vars 
+        // "noUnusedLocals": true,     BUT WE CAN'T DISABLE IT  
         // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
         // "strictNullChecks": true,              /* Enable strict null checks. */
         // "strictFunctionTypes": true,           /* Enable strict checking of function types. */