stash

Author: goto-bus-stop

.eslintrc.js renamed to .eslintrc.cjs

@@ -5,12 +5,8 @@ module.exports = {
     sourceType: 'module',
   },
   rules: {
-    // I disagree
-    'react/jsx-filename-extension': 'off',
     // I disagree
     'react/require-default-props': 'off',
-    // Our babel config doesn't support class properties
-    'react/state-in-constructor': 'off',
     // I disagree
     'react/function-component-definition': ['error', {
       namedComponents: 'function-declaration',
@@ -25,4 +21,13 @@ module.exports = {
       allowChildren: false,
     }],
   },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      extends: ['airbnb-typescript'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  ],
 };

example/app.js renamed to example/app.tsx

@@ -9,8 +9,14 @@ const videos = [
   { id: 169408731, name: 'Hoody - Like You' },
 ];
 
-class App extends React.Component {
-  constructor(props) {
+interface State {
+  videoIndex: number,
+  volume: number,
+  paused: boolean,
+}
+
+class App extends React.Component<{}, State> {
+  constructor(props: {}) {
     super(props);
 
     this.state = {
@@ -25,7 +31,7 @@ class App extends React.Component {
     this.handleVolume = this.handleVolume.bind(this);
   }
 
-  handlePause(event) {
+  handlePause(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({
       paused: event.target.checked,
     });
@@ -39,13 +45,13 @@ class App extends React.Component {
     this.setState({ paused: false });
   }
 
-  handleVolume(event) {
+  handleVolume(event: React.ChangeEvent<HTMLInputElement>) {
     this.setState({
       volume: parseFloat(event.target.value),
     });
   }
 
-  selectVideo(index) {
+  selectVideo(index: number) {
     this.setState({ videoIndex: index });
   }
 
@@ -113,5 +119,5 @@ class App extends React.Component {
   }
 }
 
-const root = ReactDOM.createRoot(document.querySelector('#example'));
+const root = ReactDOM.createRoot(document.querySelector('#example')!);
 root.render(<App />);