TypeScript: TypeScript Compiler Ep.2 compileOptions

15 Nov 2022 • TIL

compileOptions - typeRoots, types

"typeRoots": {
	"description": "Specify multiple folders that act like `./node_modules/@types`.",
	"type": "array",
	"uniqueItems": true,
	"items": {
		"type": "string"
	},
	"markdownDescription": "Specify multiple folders that act like `./node_modules/@types`."
}
"types": {
	"description": "Specify type package names to be included without being referenced in a source file.",
	"type": "array",
	"uniqueItems": true,
	"items": {
		"type": "string"
	},
	"markdownDescription": "Specify type package names to be included without being referenced in a source file."
}

@types

  • TypeScript 2.0부터 사용 가능해진 내장 type definition 시스템이다.
    이전에는 내장이 아닌 서드파티 type definition이었다. 이제는 내장으로 통합.
  • 아무 설정을 하지 않으면
    • node_modules/@types 라는 모든 경로를 찾아서 사용한다.
  • typeRoots를 사용하면
    • 배열 안에 들어있는 경로들 아래에서만 가져온다. 나는 node_modules 안의 @types 도 쓰겠지만 내 프로젝트 안의 @types도 쓸거라면 typeRoots를 지정해 주면 편하게 사용할 수 있다.
  • types를 사용하면
    • 배열 안의 모듈 혹은 ./node_modules/@types/ 안의 모듈 이름에서 찾아온다.
    • 빈 배열을 넣는다는 건 이 시스템을 이용하지 않겠다는 것이다.
  • typeRoots 와 types를 같이 사용하지 않는다.

compileOptions - target 과 lib

"target": {
	"description": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations.",
	"type": "string",
	"default": "ES3",
	"anyOf": [
		{
			"enum": [
				"ES3",
				"ES5",
				"ES6",
				"ES2015",
				"ES2016",
				"ES2017",
				"ES2018",
				"ES2019",
				"ES2020",
				"ES2021",
				"ES2022",
				"ESNext"
			]
		},
		{
			"pattern": "^([Ee][Ss]([356]|(20(1[56789]|2[012]))|[Nn][Ee][Xx][Tt]))$"
		}
	],
	"markdownDescription": "Set the JavaScript language version for emitted JavaScript and include compatible library declarations."
}

"lib": {
	"description": "Specify a set of bundled library declaration files that describe the target runtime environment.",
	"type": "array",
	"uniqueItems": true,
	"items": {
		"type": "string",
		"anyOf": [
			{ ... }
		]
	},
	"markdownDescription": "Specify a set of bundled library declaration files that describe the target runtime environment."
}

target

  • 빌드의 결과물을 어떤 버전으로 할 것인지 설정한다.
  • 지정은 안하면 es3이다.

lib

  • 기본 type definition 라이브러리를 어떤 것을 사용할 것인지 결정한다.
  • lib를 지정하지 않을 때, (target에 따라 자동으로 설정됨)
    • target이 ‘es3’이고, default로 lib.d.ts 를 사용한다.
    • target이 ‘es5’이면, default로 dom, es5, scripthost 를 사용한다.
    • target이 ‘es6’이면, default로 dom, es6, dom.iterable, scripthost 를 사용한다.
  • lib를 지정하면 그 lib 배열로만 라이브러리를 사용한다.
    • 빈 [ ] (배열) ⇒ error! ‘no definition found ~~’

compileOptions - outDir, outFile, rootDir

"outFile": {
	"description": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output.",
	"type": "string",
	"markdownDescription": "Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output."
}

"outDir": {
	"description": "Specify an output folder for all emitted files.",
	"type": "string",
	"markdownDescription": "Specify an output folder for all emitted files."
}

"rootDirs": {
	"description": "Allow multiple folders to be treated as one when resolving modules.",
	"type": "array",
	"uniqueItems": true,
	"items": {
		"type": "string"
	},
	"markdownDescription": "Allow multiple folders to be treated as one when resolving modules."
}

outFile

단일 파일로 합쳐서 출력한다.

outDir

해당 디렉토리로 결과 구조를 보낸다.

rootDir

입력 파일의 루트 디렉토리 설정으로, –outDir로 결과 디렉토리 구조를 조작할 때 사용됩니다.

  • rootDir 설정했을 때

    파일 구조 설명

    • src/test.ts
    • src/hello.ts
    "rootDir": "./src"
"outDir": "./dist"

    컴파일 시(npx tsc), dist 폴더가 생성되면 해당 폴더 안에 test.js와 hello.js 파일이 생성된다.

  • rootDir 설정하지 않을 때

    파일 구조 설명

    • src/test.ts
    • ./hello.ts
    // "rootDir": "./src"
"outDir": "./dist"

    컴파일 시, dist 폴더가 생성되면서 해당 폴더 안에 src폴더가 만들어진다.

    컴파일 이후, 폴더 구조 설명

    • dist/src/tset.js
    • dist/hello.js

    rootDir을 따로 설정하지 않았기 때문에 루트(시작점)이 해당 폴더(compilation-context, 최상위)가 된 것이다. rootDir을 설정했을 때에는 해당 설정이 루트(시작점)이 된다.

compileOptions - strict

앞으로 작업할때는 strict를 true로 설정하고 작업하는 것이 기본이다.

"strict": {
	"description": "Enable all strict type checking options.",
	"type": "boolean",
	"default": false,
	"markdownDescription": "Enable all strict type checking options."
}

모든 strict type checking option을 모두 키는 것

  • —nolmplicitAny
  • —nolmplicitThis
  • —strictNullChecks
  • —strictFunctionTypes
  • —strictPropertyInitialization
  • —strictBindCallApply
  • —alwaysStrict


  • –nolmplicitAny

    명시적이지 않게 any 타입을 사용하여 표현식과 선언에 사용하면 에러를 발생시킨다. (직접으로 any로 표현하지 않았는데 any로 추론이 되는 것)

    • 타입스크립트가 추론을 실패한 경우(추론 결과가 어떤 것이든 들어올 수 있는 상황) any가 맞으면 any라고 지정하라는 의미를 가지고 있다.
    • 아무것도 쓰지 않으면 에러를 발생시킨다.
    • 해당 오류를 해결하면, 타입 추론이 되었으므로 any라고 지정되어 있지 않은 경우는 any가 아닌 것이다.

    nolmplicitAny를 사용할 때, 인덱스 객체에 인덱스 signature가 없는 경우 오류가 발생하는데 이를 예외처리하는 옵션이 있다.

    obj['foo'] = 10; // Error: Index signature of ~~

    obj[’foo’] 로 사용할 때, 인덱스 객체라 판단하여 타입에 인덱스 시그니처가 없는 경우, 에러를 발생시킨다.
    이때, suppressImplictitAntIndexErrors 옵션을 사용하면 해당 경우는 예외로 간주하여 에러를 발생시키지 않는다.

  • –noImplicitThis

    명시적이지 않게 any 타입을 사용하여, this 표현식에 사용하면 에러를 발생시킨다.
    (this에 아무거나 들어올 수 없게 들어올 수 있는 형태를 제한해주는 것이 좋다.)

    • 첫번째 매개변수 자리에 this를 놓고, this에 대한 타입을 어떤 것이라도 표현하지 않으면 nolmplicitAny가 오류를 발생시킨다.
    • JavaScript 에서는 매개변수에 this를 넣으면 이미 예약된 키워드라 SyntaxError를 발생시킨다.
    • call / apply / bind와 같이 this를 대체하여 함수 콜 용도로도 쓰인다.
    • 그래서 this를 any로 명시적으로 지정하는 것이 합리적이다. (단, 구체적인 사용처가 있는 경우 타입을 표현하기도 한다.)

  • –strictNullChecks

    strictNullChecks에서는 null 및 undefined 값이 모든 유형의 도메인에 속하지 않으며, 그 자신을 타입으로 가지거나 any일 경우에만 할당이 가능하다.
    즉, 해당 옵션을 키지 않으면 모든 타입에 null과 undefined가 포함된 상태로 사용하게 되는 것이다.
    한가지 예외는 undeifined에 void 할당이 가능하다.

    • strictNullChecks를 적용하지 않으면,
      • 모든 타입은 null, undefined 값을 가질 수 있다.
      • string으로 타입을 지정해도 null 혹은 undefined 값을 할당할 수 있다. → 엄청 큰 오류
    • strictNullChecks 적용하면,
      • 모든 타입은 null, undefined 값을 가질 수 없고, 가지려면 union type을 이용해서 직접 명시 해야 한다.
      • any 타입은 null과 undifined를 가진다. 예외적으로 void 타입의 경우 undefined를 가진다.

  • –strictFunctionTypes

    함수 타입에 대한 bivariant 매개변수 검사를 비활성화한다.

    ( Animal → Greyhound ) <: (Dog → Dog)

    • 반환 타입은 공변적(covariant)
    • 인자 타입은 반공변적(contravariant)
    • 타입스크립트에서 인자 타입은 공변적이면서, 반공변적이다 → 문제!
    • 해당 문제를 해결하는 옵션이 strictFunctionTypes이다.
    • 옵션을 키면, 에러가 나지 않던 걸 나게 한다.

  • –strictPropertyInitialization

    정의되지 않은 클래스의 속성이 생성자에게 초기화되었는지 확인한다.
    해당 옵션을 사용하려면 —strictNullChecks를 사용하도록 설정해야 한다.

    • constructor에서 초기값을 할당한 경우 ⇒ 정상
    • constructor에서 안하는 경우
      • 보통 다른 함수로 이니셜라이즈 하는 경우 (async 함수)
      • constructor에는 async를 사용할 수 없다.

  • –strictBindCallApply

    bind, call, apply에 대한 더 엄격한 검사 수행을 한다.

    • Function의 내장 함수인 bind, call, apply를 사용할 때 엄격하게 체크하도록 하는 옵션이다.
    • bind는 해당 함수안에서 사용할 this와 인자를 설정해주는 역할을 하고, call과 apply는 this와 인자를 설정한 후 실행까지 한다.
    • call과 apply는 인자를 설정하는 방식에서 차이점이 있다.
      call은 함수의 인자를 여러 인자의 나열로 넣어서 사용하고, apply는 모든 인자를 배열 하나로 넣어서 사용한다.

  • –alwaysStrict

    각 소스파일에 대해 자바스크립트의 strict mode로 코드를 분석하고 “엄격하게 사용”을 해제한다.
    그렇게 하면 syntax에러가 ts error로 나오고, 컴파일된 자바스크립트 파일에 “use strict”가 추가된다.

 TIL  TS

Comments

You are seeing this because your Disqus shortname is not properly set. To configure Disqus, you should edit your _config.yml to include either a disqus.shortname variable.

If you do not wish to use Disqus, override the comments.html partial for this theme.

Related Posts