[React]説明がいらないReact＋TypeScript開発環境設定（CRA無し）

Install

yarn init --yes
yarn add next react react-dom
yarn add @zeit/next-typescript @types/next @types/react @zeit/next-typescript @types/next @types/react

ファイル追加

// next.config.js
const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

//.babelrc
{
  "presets": ["next/babel", "@zeit/next-typescript/babel"]
}

//tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

eslint setting

npm i eslint -D
npm i @typescript-eslint/parser -D
npm i @typescript-eslint/eslint-plugin -D
npx eslint --init

//.eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        project: './tsconfig.json',   //추가
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {}
};

package.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

pages/index.tsx 追加

import React from "react";

export default () => {
  return <div>hello</div>;
};

yarn add --dev typescript @types/node