[React] 리액트 타입스크립트 초기세팅

1. CRA, TypeScript 설치

npx create-react-app [폴더명]  --template typescript  
npx create-react-app .  --template typescript  //현재 폴더 안에서

2. 절대경로 설정

tsconfig.json 파일에 "baseUrl": "src" 추가하기

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src" //baseUrl 추가
  },
  "include": [
    "src"
  ]
}

3. Styled-Components 설치

npm install --save @types/styled-components  
npm install --save @types/react,react-dom,react-router-dom 

4. Styled-Reset 설치 및 설정

1. styled-reset 패키지 설치

npm i styled-reset

2. App.tsx

import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */

`

const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <ul>
      <li>li style 확인</li>
    </ul>
  </React.Fragment>
)

export default App

확인

스타일 초기화 확인

https://www.npmjs.com/package/styled-reset