타입스크립트 5

hojoon·2023년 3월 20일

타입스크립트

목록 보기

5/9

Compilation Context(컴파일러 제어)

타입스크립트 파일들을 하나로 묶어서 그룹으로 만들고 그룹화된 파일을 자바스크립트로 변환하는데 그 과정에서 타입스크립틔 설정을 더해준다.

타입스크립트 딥다이브 설명 -
컴파일 컨텍스트는 근본적으로 집단에서 사용하는 용어이며 타입스크립트는 유효한 것을 분석하고 해석합니다. 어떤 파일의 정보와 함께 컴파일 컨텍스트에는 사용중인 컴파일러 옵션에 대한 정보가 들어있습니다. 이 논리그룹을 정의하는 가장 좋은 방법은 tsconfig.json 파일을 사용하는 것 입니다.

즉, tsconfig를 정확히 이해하는 것이 중요하다.

tsconfig schema

http://json.schemastore.org/tsconfig
요 링크를 들어가면 tsconfig 전체 구조를 볼 수 있다.

compileOnSave
extends
complieOptions
files
include
exclude
references

compileOnSave

"compileOnSave": true, //이 프로젝트에서 파일을 save하면 컴파일 하겠다는 설정이 된것이다.

누가?
- atom-typescript 플러그인
- vscode with typescript 1.8.4이상

extends

컴파일러 옵션에서 strict 옵션을 끄고 extends 에서 경로를 설정해주고 base.json에서 컴파일러옵션에 스트릭트 옵션을 켜줄 수 있다.

즉, 이런식으로 내가 덮어쓰거나 추가하고 싶은 설정만 가져와서 프로젝트를 완성도 있게 작업할 수 있다

files, include, exclude

셋다 설정이 없으면, 전부다 컴파일 하려고 한다.
file
- 상대 혹은 절대 경로의 리스트 배열이다.
- exclude 보다 쎄다.
include, exclude
- glob 패턴 (gitignore같은 패턴)
- include
  - exclude 보다 약하다.
  - - 같은걸 사용하면 , .ts/ .tsx/ .d.ts 만 include
- exclude
  - 설정 안하면 4가지(node_modules, bower_components, jspm_packages, )를 default 로 제외한다.
- 은 항상 제외한다. (include 에 있어도)

compileOptions

typeRoots, types

여기서 npm i --saved-dev @types/react를 해주면?

이렇게 types가 생기고 타입스크립트를 쓸 수 있게 한다.

@types

타입스크립트 2.0 부터 사용 가능해진 내장 타입 definition 시스템
아무 설정을 안하면?
- node_modules/@types 라는 모든 경로를 찾아서 사용
  -typeRoots를 사용하면?
- 배열 안에 들어있는 경로들 아래서만 가져온다.
types 를 사용하면 ?
- 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아옵니다.
[] 빈 배열을 넣는다는건 이 시스템을 이용하지 않겠다는 것입니다.
typeRoots 와 types 를 같이 사용하지 않습니다.

target 과 lib

내가 작성한 타입스크립트가 어떤 런타임에서 실행이 되는 걸까?

target이 es3 설정이면 ?

const hello = () => {};

var function hello () {};

화살표 함수가 function으로 바뀐다.

target
- 빌드의 결과물을 어떤 버전으로 할 것이냐
lib
- 기본 type definition 라이브러리를 어떤 것을 사용할 것이냐
lib 를 지정하면 그 lib 배열로만 라이브러리를 사용한다.

outDir,outFile,rootDir

outDir : 컴파일 후 생성되는 js파일이 생성될 폴더명
outFile : 단일파일로 출력시 파일명
rootDir : 시작하는 루트 폴더

Strict

strict는 무조건 true
엄격하게 타입을 검사하는 옵셥을 활성화 시킨다.

다 켜주자.

noimplicitAny
- any라고 지정되어 있지 않으면 any가 아닌것.
- 아무것도 쓰지 않으면 , 에러를 발생
noimplicitThis
- 명시적이지 않게 any 타입을 사용하여, this 표현식에 사용하면, 에러를 발생시킨다.
- call / apply / bind 와 같이 this를 대체하여 함수 콜을 하는 용도로 쓰인다.
strictNullChecks
- 모든 타입의 null,undefined를 빼준다.
- 한 가지 예외는 undefined 에 void 할당 가능
- 옵션을 적용하지 않으면 string 으로 타입을 지정해도, null 혹은 undefined를 가질 수 있다.
- 모든 타입은 null, undefined를 가질 수 없고 타입 안정성을 확보함.
- 이 옵션을 사용함으로써 타입을 지정하는 노력을 기울이게 될 것이다.
strictFunctionTypes
- 함수 타입에 대한 bivariant 매개변수 검사를 비활성화한다.
- 반환 타입은 공변적
- 인자 타입은 반공변적
- 그런데 타입스크립트에서는 인자 타입은 공변적이면서, 반공변적인게 문제!!
- 이 문제를 해결하는 옵션이 strictFunctionTypes
- 옵션을 설정하면, 에러가 발생함
strictPropertyInitialization
- 정의되지 않은 클래스의 속성이 생성자에서 초기화되었는지 확인합니다.
- 이옵션을 사용하려면 strictNullChecks 옵션을 활성화해야 한다.
strictBindCallApply
- bind, call, apply에 대한 더 엄격한 검사 수행
alwaysStrict
- 각 소스 파일에 대해 Javascript 의 strict mode로 코드를 분석하고 "엄격하게 사용"을 해제한다.
- 컴파일된 자바스크립트에 "use strict" 추가 됨.