React + Typescript 추가 지식

vscode 플러그인

- react snippet

- intellij keymap 플러그인

 

최신 문법

타입스크립트는 자체적으로 babel 처럼 과거 ES3까지 지원해준다. 그러므로 바벨이 따로 필요는 없긴하다. 

타입스크립트 로더로 유명한 것은 다음 둘개가 유명하다.

1. ts-loader 

2. awesom-typescript-loade 

 

redux

타입스크립트로 작성된 라이브러리라서 타입스크립트와 쓰기 좋으며 타입스크립트 네임스페이스를 쓸 필요가 없다..

 

axios

자체적으로 인덱스하기 때문에 타입스크립트 네임스페이스가 필요없다.

 

@types/react-dom 

react-dom 은 자바스크립트로 작성되서 타입핑을 지원하지 않는다. 그런데 워낙 유명한 라이브러리라서 이미 다른 사람들이 타입스크립트에서 사용할 수 있게끔 react-dom 의 타입핑 정보만을 위한 다른 패키지가 만들어져있다. 특정 패키지 이름 앞에 @types 네임 스페이스가 붙은 것은 뒤의 패키지를 사용할 수 있게 도와주는 타입 정보 패키지 라는 듯이다.

 

tsconfig.json

{
    "compilerOptions": {
        "strict": true, // 엄격히 검사
        "lib": [
            "es5",
            "es2015",
            "es2016", // include 를 위해서
            "es2017", // async await 을 위해서
            "dom"
        ],
        "jsx": "react",
    },
}

 

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'development', // production
    devtool: 'eval', // production 일 경우 hidden-source-map : 소스 코드 노출을 막아준다.
    resolve: {
        extensions: ['.tsx', '.ts'],
    },

    entry: {
        app: './client' // 메인 파일
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'awesome-typescript-loader', // atl 을 통해 옛날 문법으로 전환하겠다.
        }]
    },
    plugins: [],
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
        publicPath: '/dist',
    }
}

 

esModuleInterop

타입스크립트에서는 react 가 export default 가 없어서 import * as React from 'react' 와 같이 호출한다.

esModuleInterop 설정을 true 로 하면 굳이 이렇게 할 필요 없기도 하다.

 

* as

import * as React, {userEffect} from 'react' 처럼 * as 와 { ~ }는 같이 쓸 수 없다.

import * as React from 'react'

import {userEffect} from 'react'

위와 같이 두줄로 나눠서 써야한다.

 

nullable 과 assert

input? : React.InputElement 일 때

input.focus() 와 같이 쓰면 input 이 null 일 수 있어서 에러가 난다.

분기 처리를 태우거나 있는 것이 확실하면 input!.focus()와 같이 사용할 수 있다.

 

useCallback

useCallback 에는 generic 이 들어간다.

generic 은 함수의 매개변수 + 타입이 들어간다.

 

TS, TSX 는 브라우저에서 실행이 안되기 때문에 자바스크립트로 변환해서실행한다.