title: TypeScript linting error: ref does not exist on component
body: <p>When trying to add a <a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="nofollow noreferrer">ref</a> to my component, I am getting a linting error:</p>
  
  <blockquote>
    <p>TS2339: Property 'childNavRef' does not exist on type 'Navigation'</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/QWe3I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QWe3I.png" alt="enter image description here"></a></p>
  
  <p>How do I properly attach a reference for a typescript react component? Thanks, and you can see the code below for the component as well as the tsconfig and eslint.</p>
  
  <p><strong>navigation.tsx:</strong></p>
  
  <pre><code>import * as React from 'react';
  
  interface MyState {
    show: boolean;
  }
  
  export default class Navigation extends React.Component&lt;{}, MyState&gt; {
    public constructor() {
      super({});
      this.state = {
        show: true,
      };
      this.childNavRef = React.createRef();
    }
  
    public render(): React.ReactElement {
      return (
        &lt;nav&gt;
          {
            this.state.show
            &amp;&amp; (
            &lt;div ref={this.childNavRef}&gt;
              This is a component
            &lt;/div&gt;
            )
          }
        &lt;/nav&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>tsconfig.json:</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "moduleResolution": "node",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "baseUrl": ".",
      "paths": {
        "actions/*": ["src/app/redux/actions/*"],
      }
    }
  }
  </code></pre>
  
  <p><strong>.estlintrc:</strong></p>
  
  <pre><code>module.exports = {
    env: {
      'jest/globals': true
    },
    extends: [
      'airbnb',
      'plugin:@typescript-eslint/recommended',
    ],
    globals: {
      'document': true,
      'window': true,
    },
    overrides: [
      {
        'files': ['**/*.tsx'],
        'rules': {
          'react/prop-types': 'off'
        }
      }
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaFeatures: {
        jsx: true,
      },
      project: './tsconfig.json',
    },
    plugins: ['@typescript-eslint', 'jest'],
    rules: {
      'import/no-extraneous-dependencies': [
        'error',
        {
          'devDependencies': [
            '**/*.stories.jsx',
            '**/*.stories.tsx',
            '**/*.test.jsx',
            '**/*.test.js',
            '**/*.test.tsx',
            '**/*.test.ts',
            'setupTests.js',
          ],
        },
      ],
      '@typescript-eslint/camelcase': ['error', { 'properties': 'never' }],
      'indent': 'off',
      '@typescript-eslint/indent': [
        'error',
        2,
        {
          'ignoredNodes': ['JSXElement'],
          'SwitchCase': 1,
        },
      ],
      '@typescript-eslint/explicit-function-return-type': ['error', {
        'allowExpressions': true,
        'allowTypedFunctionExpressions': true
      }],
      'semi': 'off',
      '@typescript-eslint/semi': ['error'],
      'react/destructuring-assignment': [false, 'always', { 'ignoreClassFields': true }],
      'react/jsx-filename-extension': [1, { 'extensions': ['.jsx', '.tsx'] }],
    },
    settings: {
      'import/extensions': [
        '.js',
        '.jsx',
        '.ts',
        '.tsx',
      ],
      'import/resolver': {
        webpack: {
          config: 'webpack.common.js',
        }
      }
    },
  };
  </code></pre>