React with TypeScript

create-react-app으로 React+TypeScript 환경을 세팅하고 싶다면

npx create-react-app app-name --typescript

명령을 실행하면 된다.

-끝-

 

 

create-react-app 말고,

기존에 세팅해둔 프로젝트에 TypeScript를 추가하기 위해선 여러 패키지들을 추가로 설치해주어야 한다.

 

TypeScript를 사용하기 위해 typescript,

React와 관련된 타입 정의를 사용하기 위한 @types/react, @types/react-dom 패키지를 설치해준다.

npm i typescript @types/react @types/react-dom @types/node @types/jest

자바스크립트 테스트 프레임워크 Jest를 위한 타입 정의가 포함된 @types/jest,

Node에 대한 타입 정의가 포함된 @types/node도 있다.

Create React App 문서를 참고하여(링크), @types/node와 @types/jest를 포함해서 설치하고 있지만,

typescript, @types/react, @types/react-dom까지만 설치해도 사용은 가능한 것 같다.

 

이제 Webpack에서 TypeScript를 읽을 수 있도록 ts-loader를 설치한다.

npm i -D ts-loader

 

타입스크립트 컴파일 설정은 tsconfig.json 파일에 입력한다.

프로젝트 루트 폴더에 tsconfig.json 파일을 생성하거나

다음 명령어를 실행한다.

npx typescript --init

 

위 명령어로 tsconfig.json 파일을 생성했다면 주석과 함께 기본적인 내용이 이미 작성되어있을 것이다.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",

    /* Strict Type-Checking Options */
    "strict": true,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true,

    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": ["src/**/*"]
}

compilerOptions는 컴파일러 옵션들이다. 생략된 속성은 기본 값이 적용된다.

• target: 어떤 버전의 자바스크립트로 컴파일할 것인지에 대한 설정, 기본값은 ES3이다.
• module: 컴파일할 때 사용할 모듈 설정, 기본값은 target에 따라 달라진다. target이 es3나 es5면 commonjs, 아니면 es6이다.
• allowJs: 자바스크립트 파일의 컴파일 허용 여부, 기본값은 false다.
• sourceMap: .map 파일 생성 여부, 기본값 false.
• outDir: 출력 구조를 해당 디렉토리로 리다이렉트한다.
• strict: 엄격한 타입 검사 여부, 기본값 false.
• moduleResolution: 모듈 해석 방법, module이 and나 system이거나 es6면 classic, 아니면 node
• esModuleInterop: 런타임 바벨 생태계 호환성을 위한 설정, 기본값 false,
• skipLibCheck: 선언 파일(*.d.ts)은 모두 타입 검사를 건너 뛰게 하는 설정, 기본값 false.
• forceConsistentCasingInFileNames: 동일 파일 참조에 대해 일관성 없는 대소문자는 비활성 처리, 기본값 false

include로는 컴파일할 파일들을 지정할 수 있다. 이 설정값이 없으면 기본적으로 exclude 속성에 포함된 것을 제외한 모든 타입스크립트, allowJs가 true면 자바스크립트 파일까지 포함하여 읽는다.

files도 include와 비슷하다. 다른 점은 files에 포함된 파일은 exclude와 상관없이 항상 포함된다는 것이다. (include에 포함된 파일이 exclude에도 속하면 필터링된다.)

files와 include에 포함된 파일을 참조하는 다른 파일들도 포함시킨다. (exclude에 설정하면 제외됨)

exclude는 컴파일하지 않을 파일들을 지정하는데, 이 속성을 지정하지 않아도 outDir에 지정된 디렉토리와 node_moudles, bower_components, jspm_packages는 기본적으로 제외한다.

 

더 많은 옵션들은 이 곳에서 참고!

TypeScript 한글 문서

 

 

 

이제 웹팩 설정만 남았다.

webpack.config.js 파일의 module>rules에 ts-loader 설정을 추가해준다.

module.exports = {
	module: {
    	rules: [{
        	test: /\.tsx?$/,
            exclude: '/node_modules',
            use: [
            	.
                .
                .
                {
                	loader: 'ts-loader'
                }
            ]
        }]
    }
}

참고) 리액트 파일 확장자는 jsx이다. 타입스크립트로 작성되면 tsx가 된다.

 

 

 

설정 끝!

내용에 오류가 있다면 댓글로 알려주세요! 감사합니다ㅎㅎ

 

다음은 크로스 브라우징 문제를 해결하러 갑시다!