2017.07 React with TypeScript 스터디 정리.
tsconfig
tsconfig.json 파일은 TypeScript를 위한 단위 환경 설정 파일입니다.
TypeScript 컴파일러 수행시에 참조되며, 각종 옵션들을 설정할수 있습니다.
기본적으로 생성되는 파일의 내용입니다.
{
"compilerOptions": {
"outDir": "build/dist", // 빌드 결과물 폴더 입니다.
"module": "commonjs", // 빌드 결과의 모듈 방식은 commonjs 방식으로 한다는 뜻입니다.
"target": "es5", // 빌드 결과물은 es5 방식으로 한다는 뜻입니다.
"lib": ["es6", "dom"], // 라이브러리는 es6 와 dom 으로 한다는 뜻입니다.
"sourceMap": true, // .map.js 파일도 함께 생성한다는 뜻입니다.
"allowJs": true, // JS 파일도 컴파일 대상이라는 뜻입니다.
"jsx": "react", // jsx 구문 사용 가능입니다.
"moduleResolution": "node", // 모듈 해석 방식은 node 처럼 한다는 뜻입니다.
"rootDir": "src", // 컴파일할 대상들이 들어있는 폴더 (루트 폴더) -> 즉 이 폴더 안에서 작업 하셔야 합니다.
"forceConsistentCasingInFileNames": true, // https://github.com/TypeStrong/ts-loader/issues/89 -> 이슈체크!
"noImplicitReturns": true, // 제대로 리턴 다 안되면 에러 -> 오류에 대해 강력하게 체크한다는 뜻입니다.
"noImplicitThis": true, // this 표현식에 암시적으로 any 로 추론되면 에러를 알려줍니다. -> any를 사용하는건 매우 비추천합니다.(typescript...)
"noImplicitAny": true, // 암시적으로 선언되었는데 any 로 추론되면 에러를 알려줍니다.
"strictNullChecks": true, // null 이나 undefined 을 서브 타입으로 사용하지 못하게 합니다.
"suppressImplicitAnyIndexErrors": true, // 인덱싱 시그니처가 없는 경우, 인덱스를 사용했을때 noImplicitAny 에 의해 에러가 뜨는 것을 방지합니다
"noUnusedLocals": true // 사용 안하는 로컬 변수가 있으면 에러를 알려줍니다.
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
],
"types": [
"typePatches"
]
}
tsconfig에 대한 자세한 설명은
https://basarat.gitbooks.io/typescript/content/docs/project/tsconfig.html 를 참조하여 보시기 바랍니다.
tslint
TSLint는 TypeScript 코드에서 가독성, 유지 관리 가능성 및 기능 오류 를 검사하는 확장 가능 정적 분석 도구입니다 .
최신 편집자 및 빌드 시스템에서 광범위하게 지원되며 사용자 자신의 린트 규칙, 구성 및 포맷터로 사용자 정의 할 수 있습니다.
{
"extends": ["tslint-react"],
"rules": {
"align": [
true,
"parameters",
"arguments",
"statements"
],
"ban": false,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"curly": true,
"eofline": false,
"forin": true,
"indent": [ true, "spaces" ],
"interface-name": [true, "never-prefix"],
"jsdoc-format": true,
"jsx-no-lambda": false,
"jsx-no-multiline-js": false,
"label-position": true,
"max-line-length": [ true, 120 ],
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": true,
"no-arg": true,
"no-bitwise": true,
"no-console": [
true,
"log",
"error",
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-consecutive-blank-lines": true,
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": false,
"no-unused-expression": true,
"no-use-before-declare": true,
"one-line": [
true,
"check-catch",
"check-else",
"check-open-brace",
"check-whitespace"
],
"quotemark": [true, "single", "jsx-double"],
"radix": true,
"semicolon": [true, "always"],
"switch-default": true,
"trailing-comma": false,
"triple-equals": [ true, "allow-null-check" ],
"typedef": [
true,
"parameter",
"property-declaration"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-module",
"check-operator",
"check-separator",
"check-type",
"check-typecast"
]
}
}
아래 링크에서 각 기능들을 보시는걸 추천합니다.
https://github.com/palantir/tslint
이번 포스팅은 사실 큰 내용이 없이 거의 링크로 대체하였습니다.
(사실 저도 공부하는 수준이라 자세히 모릅니다.)
하지만 제가 어줍잖은 지식으로 설명하는것보다는 공식 페이지를 참고하시는게 더 좋을듯 싶어서 링크로 대체하였습니다.
참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-1#/
참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0
