인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다.
코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만)
타입스크립트 (Typescript)
공식문서 읽기
https://www.typescriptlang.org/docs/home.html
.ts파일과 컴파일된 .js파일을 동시에 열면 에러가나는데, 설정을 해주면 에러가 안난다고 한다.
타입스크립트의 설정 파일은 tsconfig.json파일이다.
tsconfi.json 잘쓰는 옵션 몇가지
1.allowJS
js파일 사용 허용하는 옵션
타입스크립트는 .js확장자를 허용하지 않는다. 따라서 .js파일을 컴파일하는데, 이때 자바스크립트를 타입스크립트로 바꾸는 프로젝트가 진행중이라면 곤란함을 겪을 것이다.
점진적 도입을 위한 옵션이있는데, allowJS 옵션이다.
true일 경우 .js파일을 사용할 수 있다고 한다.
// tsconfig.json
"allowJS" : truecheckJs는 allowJS랑 같이 상요하는 옵션이라는데.... (뭐였더라)
2.bascURL
기본 경로 설정
bascURL
3.declaration
lib.dom.dts파일 생성(타입들만 작성되어있는 파일)
declaration이 옵션을 true로 하면 dts파일이 생성된다.
객체랑 함수를 쓰다보면 타입을 커스텀하는 경우가 온다.
이때 타입들을 ts파일에 넣어도 되지만 용도가 다르기때문에 분리하는 것이 좋다.
그럴때 dts파일을 생성하는데 이때 이 옵션을 true로 바꾸면 된다.
4.이건 이해를 잘 못했다1
esModuleInteropimport React from 'react';
import * as React from 'react';위의 import하는 코드가 같다고 생각하는데 완전히 다르다고 한다.
모듈시스템에서 엄청난 차이가 있는데, 원래는 공식적으로 아래처럼 써야하는게 맞다.
따라서 위에처럼 쓰게되면 에러가나는데, 이 에러를 없애는 방법이 esModuleInterop이다.
아래처럼 쓰기 싫어서 옵션을 쓰는사람들이 있다는데 잘못쓰면 위험하다.
5.이건 이해를 잘 못했다2
decorator를 쓴다면 확인해보자
emitDecoratorMetadata
experimentalDecorators
6.help
help는 명령어인데, 커맨드에 치지말고 공식문서를 보는것이 좋다.
help
7.init
npm init처럼 tsc init하면 ts.config.json 만들어내는것이다.
직접 만들어도 상관은 없다.
init
8.jsx
react를 쓰면 타입스크립트 파일인 tsx를 jsx로 변경한다.
jsx
9.lib
공식문서에 목록이 있는데 dts에 있는것이 불러와진다.
만약 최신문법을쓸때 에러가 나는 경우가 있다면 lib 옵션에 추가해줘야한다.
"lib" : ["DOM", "ES5", "ES2015"]ES6 === ES2015
ES2015, ES2017은 중요하다
lib에 ES6에 넣으면 ES2020과 ES2019를 넣는게 좋다.
10.outDir
.ts와 같은 경로에 기본으로 .js 결과물을 생성하는데,
outDir 옵션으로 경로를 수정할 수 있다.
outDir
11.target
기본적으로 타입스크립트가 ES3로 변환하는데(ie8)
es3지원하려고 타입스크립트를 쓰기도했다함.
하지만 너무 옛날코드이므로.. ie10부터 지원할거라면 ES5로 수정 하는게 좋음
타입스크립트가 var로 변환되는데, const나 let으로 변환하려면 ES6로 적어주면된다.
"target" : "ES6"ES6로 작업을 한 후에 하위버전 호환하려면 바벨을 통해 컴파일하는 사람들이 있다.
타입스크립트 -> ES6 --바벨--> JS
12.types, typeRoots
내가 만든 커스텀 dts, 객체나 함수를 보통 dts로 만들어둔다.
그런 파일의 경로를 지정해주면 옵션을 사용해서 dts를 로딩하는 것이다
types
typeRoots
13.strict 옵션들
타입을 얼마나 엄격하게 할 것인가인데, 기본값이 false이기 때문에 true로 설정해준다.
strict 옵션들
"strict" : true
14.noImplicit 옵션들
얘네도 true로 해주는게 좋다.
strict와 noImplicit 시리즈들은 타입스크립트의 엄격한 장점을 사용할 수 있기때문에 켜두는게 좋다.
noImplicit 옵션들
15.module
모듈은 commonJS랑 ES 가있는데, 대부분은 CommonJS 가 될 것이고 최신문법만쓸거면 ES6도 된다.
commonJS할 때 조심해야하는 점은 맨 처음 import할때 * as가 붙은것과 아닌것의 차이를 알고 써야한다.
export default 할때 많은 차이가 있다고 한다.
ie를 지원해야하는 경우에는 commonJS를 많이 쓴다.
module
16.watch
변경사항 생겼을때 자동으로 컴파일해주는 옵션
watch
17.include, exclude, extends
ㄴ include는 어떤파일을 컴파일할지
ㄴ exclude는 반대로 컴파일 하지 않을 파일
ㄴ extends tsconfig.json을 다른것을 확장할 수 있는데, 보통 어떠한 폴더가 있는데 타입스크립트프로젝트가 여러개일때 tsconfig.json을 하나로 만들고 공통 tsconfig.json을 만든 후 다른 부분들이 있는 tsconfig.json에 확장할때 쓴다.
"include" : ["lecture.ts"],
"exclude" : [],
"extends" : []
나머지는 프로젝트따라 사용하고 안하고가 달라서 공식문서 한번쯤 읽어보는게 좋다.
.js 파일과 .ts파일을 같이 열 수 있게하기 위해(점진적 도입) tsconfig.json 옵션
{
"compilerOptions" : {
"strict" : true,
// 1. allowJS true로 설정
"allowJS" : true
},
// 2. exclude로 모든 .js파일 제외
"exclude" : ["*.js"]
}
자바스크립트 에러 체크
{
"compilerOptions" : {
"strict" : true,
// 이거 없으면 자바스크립트 에러는 체크를 안하기 때문에 엄격하게 켜두면 좋다.
// 하지만 점진적도입중에 에러가 너무 많이 나면 checkJS안해도된다.
"checkJS" : true,
"allowJS" : true
},
"exclude" : ["*.js"]
}
그래서 이번 강좌 제로초님의 tsconfig.json 대략적인 결과물.
입문자는 strict true만 켜도 타입스크립트의 대부분의 기능을 사용해볼수 있다고 한다.
{
"compilerOptions" : {
"noImplicitReturns" : true,
"strict" : true,
"lib" : ["DOM", "ES5", "SE2015", "ES2020"],
"target" : "ES6"
},
"include" : ["lecture.ts"],
"exclude" : [],
"extends" : []
}