eslint

.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,12 +14,14 @@ module.exports = {
         'react/jsx-filename-extension': [
             1,
             {
-                extensions: ['.js'],
+                extensions: ['.tsx'],
             },
         ],
         'react/default-props-match-prop-types': 'off',
         'react/require-default-props': 'off',
         'import/prefer-default-export': '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: [
         {
@@ -38,5 +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,
+        },
+    },
 };

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;

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>

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 => (

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';
 

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>

frontend/components/Header/Nav/Links/index.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+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';
@@ -62,15 +63,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 +120,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 ||

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 />

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<

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

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}

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,

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 }> {

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 => (