FrontEnd/TypeScript

TypeScript Part1

devdubu 2024. 6. 23. 15:48

해당 문서는 TypeScript Fastcampus를 기반으로 만들었습니다.

조금은 자세하게 다룬 점 양해 바랍니다.

요약본은 추후에 준비 하도록 하겠습니다.

Type Annotation

Type Annotation은 JavaScript에서는 없었던 type을 지정해주는 문법이다.
아래와 같이 타입을 지정하거나, 혹은 typescript가 타입을 추측하여 지정하는 경우도 있다 아래의 예시를 보면

let a = "Mark";

a = 39;  
// JavaScript 상에는 문제가 없는 코드 이지만,  
// TypeScript 에서는 Type이 위에서 String으로 명시되어있기에, 해당 코드는 에러를 발생한다.

let b:number

a = 39;  
//b의 변수 선언과 같이, 초기 값이 없으면 무조건 type을 지정해줘야한다.

Primitive Type

오브젝트와 레퍼런스 형태가 아닌 실제 값을 저장하는 자료형이다.
primitive 형의 내장 함수를 사용 가능한 것은 JavaScript 처리 방식 덕분이다.
- boolean
- number
- string
- symbol
- null
- undefined
literal 값으로 Primitive 타입의 서브 타입을 나타낼 수 있다.

Type Casing

TypeScript 핵심 primitive types은 모두 소문자 이다.

Number, String, Boolean 또는 Object 유형이 위에서 권장한 소문자 버전과 동일하다고 생각하고 싶을 수 있다.

그러나 이러한 유형은 primitives를 나타내지 않으며, 타입으로 더 이상 사용해서는 안된다.
아래는 잘 못된 primitive type이다. -> 모두 소문자여야 한다.
function reverse(s:String): String{
  return s.split("").reverse().join("");
}
reverse("hello world");

function reverse(s:string):string{
    return s.split("").reverse().join("");
}
reverse("hello world");

Boolean

let isDone:boolean = false;

isDone = true

console.log(typeof isDone);
// boolean

실행하는 방법

# ts를 js로 변환 시켜주는 명령어
npx tsc
node boolean.js

Number / number

Javascript와 같이 TypeScript의 모든 숫자는 부동 소수점 값이다.
TypeScript는 16진수 및 10진수 리터럴 외에도 ECMAScript 2015에 도입된 2진수 및 8진수도 지원한다

let decimal: number = 6
let hex: number = 0x00d

let binary: number = 0b1010

let octal: number = 0o744

let NotANumber: number = NaN

let underscoreNum: number = 1_000_000;

String

다른 언어에서와 마찬가지로 텍스트 형식을 참조하기 위해 string 형식을 사용합니다.
JavaScript와 마찬가지로, TypeScript는 문자열 데이터를 둘러싸기 위한 큰 따옴표나, 작은 따옴표를 사용합니다.

let name: string = "mark";

name = 'anna';

Template String

행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열

이 문자열은 backtick(=backquote) 기호에 둘러쌓여 있습니다.

포함된 표현식은 `${expr}` 와 같은 형태로 사용합니다.

let fullName: string = `Bob Bobbington`;
let age: number = 38;

let sentence: string = `Hello, my name is ${ fullName }
I'll be ${ age + 1 } years old next month `

//template string 을 사용하지 않을 경우
let sentence: string = "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month"

Symbol

Symbol

primitive type의 값을 담아서 사용한다.

고유하고 수정 불가능한 값으로 만들어 준다.

ECMAScript 2015의 Symbol 입니다.

new Symbol로 사용 할수 없다.

Symbol을 함수로 사용해서 symbol 타입을 만들 수 있다.

Symbol을 적용하기 위해서 해야할 사전 작업

...
"lib" : [
    "ES2015",
    "DOM"
]
...

Undefined & Null

TypeScript에서, undefined와 null은 실제로 각각 undefined와 null이라는 타입을 가진다.
void와 마찬가지로, 그 자체로 그다지 유용하지 않다.
둘다 소문자만 존재한다.
let u: undefined = undefined let n: null = null
number에 null 또는 undefine를 할 당 할 수 있다.
하지만, 컴파일 옵션에서 --stricNullChecks를 사용하면, Null과 nudefined는 void나 자기 자신들에게만 할당 할 수 있다.
- 이 경우, null과 undefined를 할당 할 수 있게 하려면, union type을 이용 해야한다.

let name: string = null; let age: number = undefined; 

let name: string = null; //(X)

let u: undefined = undefined // (O)

let v: void = undefined // (O)  
let union :string | null | undefined = 'str';

null in JavaScript

null 이라는 값으로 할당된 것을 null 이라고 한다.

무언가가 있는데, 사용할 준비가 덜 된 상태

null 이라는 타입은 null이라는 값만 가질 수 있다.

런타임에서 typeof 연산자를 이용해서 알아내면, object 입니다.

undefined in JavaScript

값을 할당하지 않은 변수는 undefined 라는 값을 가진다.

무언가가 아예 준비가 안된 상태

object의 property가 없을 때도 undefined 이다.

런타임에서 typeof 연산자를 이용해서 알아내면, undefined 이다.

Object

//create by object literal
const person1 = { name: 'Mark', age: 39 };

// person1 is not "object" type.
// person1 is "{ name: string, age: number}" type

//create by Object.create
const person2 = Object.create({name:"Mark", age:39});

Array

본래 JS에서 array는 객체이다.
```
let list:number[] = [1,2,3];
```

let list: Array = [1,2,3];

## Tuple
---
```ts
let x: [string, number];

// 순서, 타입, 길이 모두 맞아야함
x = ["hello", 39]

Any

function returnAny(message): any{
    console.log(message);
}
const any1 = returnAny("리턴은 아무거나");
any1.toString();

any는 되로록이면 안쓰는게 좋다.
컴파일 타임에 타입 체크가 정상적으로 이루어지지 않기 대문
그래서 컴파일 옵션 중에 any를 써야하는데 쓰지 않으면 오류를 뱉도록 하는 옵션도 있음
- numplicityAny

unknown

unknwon

TypeScript 3.0 버전부터 지원

any와 짝으로 any보다 Type-safe한 타입

any와 같이 아무거나 할당 할 수 있다.

컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나

타입을 확정해주지 않으면, 다른 곳에 할당할 수 없고, 사용할 수 없다.

unknown 타입을 사용하면 runtime error를 줄 일 수 있을 것 같다.

사용 전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 API에 사용할 수 있을 것 같다.

응용 프로그램을 작성할 때는 모르는 변수의 타입을 묘사할 수 있다.
이러한 값은 동적 컨텐츠(예 : 사용자로부터, 또는 우리 API의 모든 값을 의도적으로 수락하기를 원할 수 있다.
이 경우, 컴파일러와 미래의 코드를 읽는 사람에게 이 변수가 무엇이든 될 수 있음을 알려주는 타입을 제공하기를 원하므로, unkwon 타입을 제공한다.

declare const maybe: unknown;

const aNumber: number = maybe;
if(maybe === true){
    const aBoolean: boolean = maybe;
    // 위의 코드에서 이미 maybe가 boolean으로 추정이 됐기 때문애, 아래의 코드에서 에러가 발생한다.
    // 위의 if문 한정해서 boolean이 된다.
    // const aString: string = maybe;
}

if(typeof maybe === 'string'){
    const aString:string = maybe;
}

declare

변수, 상수, 함수 또는 클래스가 어딘가에 이미 선언되어 있음을 알린다.

즉, JS코드로 컴파일 되지 않고, TypeScript 컴파일러에게 타입 정보를 알리기만 한다.

never

예시

never는 일반적으로 return에서 사용된다.
어떠한 형태로도 return 되지 않는다

function error(message: string): never{ throw new Error(); }

function fail(){  
return error("failed");  
}

function infiniteLoop(): never{  
while(true){}  
}

never의 특징

never 타입은 모든 타입의 subtype이며, 모든 타입에 할당 할 수 있습니다.

하지만, never에는 그 어떤 것도 할당할 수 없다.

any 조차도 never에게 할당 할 수 없다.

잘못된 타입을 넣는 실수를 막고자 할 때 사용한다.

let a: string = "hello"

if(typeof !== 'string'){
    a; // a는 여기서 never가 나오게 된다. -> string이 아닐때 a는 never로 리턴 된다
}

declare const a: string | number;

if(typeof a !== "string"){
    a; // 이때는 string을 제외한 타입을 생각하므로, number가 리턴 값이 된다.
}

// 제네릭 타입 -> 조건부 타입
type Indexable<T> = T extends string ? T & { [index: string] : any } : never;

type ObjectIndexable = Indexable<{}>;

Type System

컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템

컴파일러가 자동으로 타입을 추론하는 시스템 TypeScript에 추론에 의지하는 경우

// 타입 스크립트 코드 지만, 
// a의 타입을 명시적으로 지정하지 않는 경우이기에 a는 any로 추론 됩니다. 
// 함수의 리턴 타입은 number로 추론됩니다. (NaN 도 Number의 하나입니다.)
function f3(a){
	return a*8;
}

// 사용자가 a가 any이기 때문에, 사용법에 맞게 문자열을 사용하여 함수를 실행했습니다.
console.log(f3); // 380
console.log(f3('Mark') + 5); // NaN

위의 코드를 보게 된다면, a는 any라는 타입이 된다.
해당 코드는 NaN과 같은 에러를 발생시키게 될 수도 있다
이를 막기 위해 아래의 옵션이 있다.

noImplicitAny
타입을 명시적으로 지정하지 않는 경우, TS가 추론중에 **any** 라고 판단하게 되면,
컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다.
타입을 명시적으로 지정한 경우

// 매개변수의 타입은 명시적으로 지정했습니다.
// 명시적으로 지정하지 않는 함수의 리턴 타입은 number로 추론됩니다.
function f4(a:number){
    if(a > 0){
        return a * 38;
    }
}
// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했습니다.
// 해당 함수의 리턴 타입은 number이기 때문에, 타입에 따르면 이어진 연산을 바로 할 수 있습니다.
// 하지만, 실제 undefined + 5가 실행되어 NaN이 출력됩니다.

console.log(f4(5)); // 190
console.log(f4(-5) + 5); // NaN

위의 코드 처럼 타입을 명시적으로 작성한 경우에서 undefined라는 타입을 출력했습니다.
에러를 뱉은것이 아닌 undefined가 나온 이유는 결국 모든 타입에 자동으로 null과 undefined가 포함 되어있기 때문입니다.

strictNullChecks

모든 타입에 자동으로 포함되어 있는 null과 undefined를 제거해준다.

해당 옵션을 킨 후 아래의 코드 결과

// 매개변수의 타입은 명시적으로 지정했습니다. 
// 명시적으로 지정하지 않은 함수의 리턴 타입은 number | undefined 로 추론됩니다. 
function f4(a: number){ if( a > 0 ){ return a * 38; } }
// 사용자는 사용법에 맞게 숫자형을 사용하여 함수를 실행했습니다.
// 해당 함수의 리턴타입은 number | undefined 이기 때문에,
// 타입에 따르면 이어진 연산을 바로 할 수 없습니다.
// 컴파일 에러를 고쳐야하기 때문에, 사용자와 작성자가 의논을 해야합니다.

console.log(f4(5));
console.log(f4(-5) + 5) // error TS2523: Object is possibley 'undefined'.

명시적으로 리턴 타입 지정하기


// 매개변수의 타입과 함수의 리턴 타입을 명시적으로 지정했습니다.
// 실제 함수 구현부의 리턴 타입과 명시적으로 지정한 타입이 일치하지 않아 컴파일 에러가 발생합니다.
// error TS2366: Function lacks ending return statement and return type does not icre...
function f5(a: number):number {
    if(a>0){
        return a * 38;
    }
}

noImplicitReturns

함수 내에서 모든 코드가 값을 리턴하지 않으면, 컴파일 에러를 발생시킨다.

// if가 아닌 경우 return을 직접하지 않고 코드가 종료된다.
// error TS7030: Not all code path return a value
function f5(a: number){
    if(a>0){
        return a*38;
    }
}

매개변수가 Object일 때

// JavaScript
function f6(a) {
    return `이름은 ${a.name}이고, 연령대는 ${
    Math.floor(a.age / 10)* 10
    }대 입니다.`;
}

console.log(f6({name : 'Mark', age: 38})); // 이름은 Mark이고, 연령대는 30대 입니다.
console.log(f6('Mark')); // 이름은 undefined이고, 연령대는 NaN 입니다. -> 해당 경우는 잘못된 경우 입니다.

TypeScript의 경우

function f7(a: { name: string; age: number}): string {
	return `이름은 ${a.name}이고, 연령대는 ${ Math.floor(a.age / 10)* 10 }대 입니다.;` 
}

console.log(f6({name : 'Mark', age: 38})); // 이름은 Mark이고, 연령대는 30대 입니다.
console.log(f6('Mark')); // error TS2345 ~

Structural Type System

구조가 같으면, 같은 타입이다.



interface IPerson{
    name: string;
    age: number;
    speak(): string;
}

type PersonType = {
    name: string;
    age: number;
    speak(): string;
};

// 위 두개의 객체는 똑같은 구조이다.

let personInterface: IPerson = {} as any;
let personType: PersonType = {} as any;

personInterface = personType;
personType = personInterface;

Nominal Type System

구조가 같아도, 이름이 다르면 다른 타입니다.

type personID = string & { readonly brand: unique symbol };
function PersonID(id: string): PersonID{
	return id as PersonID;
}
function getPersonById(id: PersonID) {}
getPersonById(PersonID('id-aaaaaa'));
getPersonById('id-aaaaa'); // error TS2345

# duck typing

```python
class Duck:
    def sound(self):
        print u"꽥꽥"
class Dog:
    def sound(self):
        print u"멍멍"
def get_sound(animal):
    animal.sound()
def main:
    bird = Duck()
    dog = Dog()
    get_sound(bird)
    get_sound(dog)

만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥 거리는 소리를 낸다면, 나는 그 새를 오리라고 부를 것이다.

Type Compatibility

SubType

// sub1 타입은 sup1 타입의 서브이다.
let sub1: 1 = 1;
let sup1: number = sub1;
sub1 = sup1; // error! Type 'number' is not assingable to type '1'.

// sub2 타입은 sup2 타입의 서브 타입이다.
let sub2: number[] = [1];
let sup2: object = sub2;
sub2 = sup2; // error! Type '{}' is missing the following properties from type 'number[]': length, pop, push, concat, and 16 more

//sub3 타입은 sup3 타입의 서브 타입이다.
let sub3:  [number, number] = [1,2];
let sup3: number[] = sub3;
sub3 = sup3; // error! Type 'number[]' is not assignable to type '[number, number]'. Target requires 2 element(s) but source may have fewer.

//sub4 타입은 sup4 타입의 서브 타입이다.
let sub4: number = 1;
let sup4: any = sub4;
sub4 = sup4;

// sub5 타입은 sup5 타입의 서브 타입이다.
let sub5: never = 0 as never;
let sup5: number = sub5;
sub5 = sup5; // error! Type 'number' is not assignable to type 'never'

class Animal {}
class Dog extends Animal{
    eat() {}
}// 상속

// sub6 타입은 sup6 타입의 서브 타입이다.
let sub6: Dog = new Dog();
let sup6: Animal = sub6;
sub6 = sup6 // error! Property 'eat' is missing in type 'SubAnimal' but require in type 'SubDog'

공변

같거나 서브 타입인 경우, 할당이 가능하다.

// primitive type
let sub7: string = '';
let sup7: string | number = sub7;

// object - 각각의ㅏ 프로퍼티가 대응하는 프로퍼티와 같거나 서브타입이어야 한다.
let sub8: { a: string; b: number } = { a: '', b: 1 };
let sup8: { a: string | number; b: number} = sub8;

// array - object 와 마찬가지
let sub9: Array<{ a:string; b: number }> = [{a: '', b:1 }];
let sup9: Array<{ a:string | number; b: number }> = sub8;

반병

함수의 매개변수 타입만 같거나 슈퍼타입인 경우, 할당이 가능하다.

class Person()
class Developer extends Person{
    coding(){}
}

class StartupDeveloper extends Developer{
    burning() {}
}

function tellme(f: (d: Developer) => Developer ) {}

// Developer => Developer 에다가 Developer => Developer 를 할당하는 경우
tellme(function pToD(d: Person): Developer){
       return new Developer();
}

// Developer => Developer 에다가 StartipDeveolper 를 할당하는 경우
tellme(function sToD(d: StartupDeveloper): Developer {
    return new Developer();
}); // 해당 부분은 에러가 나야하지만, 융통성으로 안난다. -> return 값이 매개변수보다 super 타입이기 때문이다.

strictFunctionTypes

해당 옵션을 키게 된다면, 함수를 할당할 시에 함수의 매개변수 타입이 같거나 슈퍼타입인 경우가 아닌 경우, 에러를 통해 경고한다.

Type Alias

Type Alias?

Interface랑 비슷 해 보인다.

Primitive, Union Type, Tuple, Function

기타 직접 작성해야하는 타입을 다른 이름으로 지정할 수 있다.

만들어진 타입의 refer로 사용하는 것이지 타입을 만드는 것은 아니다.

Aliasing Primitive

// ---
type MyStringType = string;
const str = 'world';
let myStr: MyStringType = 'hello';

myStr = str;
// 별 의미가 없다.

Aliasing Union Type

let person: string | number = 0;
person = 'Mark';

type StringOrNumber = string | number;

let another: StringOrNumber = 0;
another = 'Anna';
/*
1. 유니온 타입은 A도 가능하고 B도 가능한 타입
2. 길게 쓰는걸 짧게
*/

Aliasing Tuple

let person: [string, number] = ['Mark', 35];
type PersonTuple = [string, number];
let another: PersonTuple = ['Anna', 24];

/*
1. 튜플 타입에 별칭을 줘서 여러군데서 사용할 수 있다.
*/

Aliasing Function

type EatType = (food: string) => void;

TypeScript Complier

Compilation Context

The compilation context is basically just fancy term for grouping of the file that Typescript will parse and analyze to determine what is valid and what isn't
Along with the interface about which files, the compilation context contains information about which compiler options are in use
A great way to define this logical grouping(we also like to use the term project) is using a tsconfig.json.file

tsconfig schema

tsconfig파일의 스키마 구조 사이트

최상위 프로퍼티

compileIOnSave

extends

compileOption

files

include

exclude

references

compileOnSave

{
    ...,
    "compileOnSaveDefinition" : {
        "properties" : {
            "compileOnSave" : {
                "description" : "Enable Compile-on-Save for this project.",
                "type": "boolean"
            }
        }
    },
    ...
}

해당 기능은 파일을 Save하게 되면 자동 compile되는 옵션이다.
true / false (default false) 로 설정할 수 있다.
Vs 2015 with TypeScript 1.8.4 이상 해당 기능을 지원한다.
혹은 atom-typescript Plugin가 설치 되어야 한다.

extends

{
    ...,
    "extendsDefinition" : {
        "properties" : {
            "extends" : {
                "description" : "Path to base configuration file to inherit from. Require TypeScript version 2.1 or later",
                "type": "string"
            }
        }
    },
    ...
}

예시

{
    "extends" : "./base.json",
    "compilerOptions": {
        ...
        //"strict": true
        ...
    }
}

tsconfig.json

{
    "compilerOptions": {
        "strict": true
    }
}

base.json

위와 같이 구성하게 된다면, base.json에 의해서 tsconfig.json에서 활성화 되지 않던 "strict": true 옵션이 base.json과 함게 활성화 된다.

files, include, exclude

{
    ...,
    "filesDefinition" : {
        "properties" : {
            "files" : {
                "description" : "If no 'file' or 'include' property is persent in a tsconfig.json, the compiler defaults to including all files in the containg directory and subdirectories except those specified by 'exclude'. When a 'files' property is specified, only those files and those specified by 'include' are included. ",
                "type": "array",
                "uniqueItems" : true,
                "items": {
                    "type": "string"
                }
            }
        }
    },
    "excludeDefinition" : {
        "properties" : {
            "exclude" : {
                "description" : "Specifies a list of files to be excludeed from compilation. The 'exclude' property only affects the files include via the 'include' property and property and not the 'files' property. Glob patterns require TypeScript version 2.0 or later",
                "type": "array",
                "uniqueItems" : true,
                "items": {
                    "type": "string"
                }
            }
        }
    },
    "includeDefinition" : {
        "properties" : {
            "include" : {
                "description" : "Specifies a list of glob patterns that match files to be included in compilation. If no 'files' or 'include' property is present in a tsconfig.json, the compiler defaults to including all files in the containing directory and subdirectories except those specified by 'exclude'. Requires TypeScript version 2.0 or later",
                "type": "array",
                "uniqueItems" : true,
                "items": {
                    "type": "string"
                }
            }
        }
    },
    ...
}

files, include, exclude

셋다 설정이 없으면, 전부다 컴파일 한다.

files

상대 혹은 절대 경로의 리스트 배열 입니다.
exclude 보다 상위의 개념이다.

include, exclude

glob 패턴(마치 .gitignore)
include
exclude 보다 하위 개념이다.
- 같은걸 사용하면, .ts, .tsx, .d.ts 만 include(allow JS)
- exclude
설정 안하면 4가지(node_modules, bower_components, jspm_packages, <outDir>)를 default로 제외합니다.
<outDir> 은 항상 제외합니다.(include에 있어도)

compileOptions

typeRoots, types

type

{
    ...,
    "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` .\n\nSee more: https:www.typescriptlang.org/tsconfig#typeRoots"
    },
    "types":{
        "description" : "Specify type package names to be included without being referenced in a source file",
        "type" : "array",
        "uniqueItems" : "array",
        "items":{
            "type": "string"
        },
        "markdownDescription" : "Specify type package names to be included without being referenced in a source file .\n\nSee more: https:www.typescriptlang.org/tsconfig#types"
    },
    ...
}

@types

TypeScript 2.0 부터 사용 가능해진 내장 type definition 시스템

아무런 설정을 안한다면, node_modules/@types라는 모든 경로를 찾아서 사용

typeRoots를 사용한다면, 배열 안에 들어있는 경로들 아래서만 가져온다.\

types 를 사용하면, 배열 안의 모듈 혹은 ./node)modules/@types 안의 모듈 이름에서 찾아온다.

[] 빈 배열을 넣는 다는 것은 이 시스템을 이용하지 않겠다는 것이다.

typeRoots와 types를 같이 사용하지 않는다.

target과 lib

target

target?

빌드의 결과물을 어떤 버전으로 할 것인지

지정하지 않으면 default는 es3 입니다.

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

lib

lib?

기본 typedefinition 라이브러리를 어떤 것을 사용할 것인지

target이 es3이고, default로 lib.d.ts를 사용한다.

target이 es5이면, default로 dom, es5, scripthost를 사용한다.

target이 es6이면, default로 dom, es6, dom.interable, scripthost를 사용한다.

lib를 지정하면 그 lib 배열로만 라이브러를 사용한다.

빈 [] => no definition found 어쩌궁,,,

{
  "lib": {
    "description": "Specify a set of bundled library declaration files that describe the target runtime environment.",
    "type": "array",
    "uniqueItems": true,
    "items": {
      "type": "string",
      "anyOf": [
        {
          "enum": [
            "ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Core", "ES2015.Generator", "ES2015.Iterable", "ES2015.Promise", "ES2015.Proxy", "ES2015.Reflect", "ES2015.Symbol.WellKnown", "ES2015.Symbol", "ES2016", "ES2016.Array.Include", "ES2017", "ES2017.Intl", "ES2017.Object", "ES2017.SharedMemory", "ES2017.String", "ES2017.TypedArrays", "ES2018", "ES2018.AsyncGenerator", "ES2018.AsyncIterable", "ES2018.Intl", "ES2018.Promise", "ES2018.Regexp", "ES2019", "ES2019.Array", "ES2019.Object", "ES2019.String", "ES2019.Symbol", "ES2020", "ES2020.BigInt", "ES2020.Promise", "ES2020.String", "ES2020.Symbol.WellKnown", "ESNext", "ESNext.Array", "ESNext.AsyncIterable", "ESNext.BigInt", "ESNext.Intl", "ESNext.Promise", "ESNext.String", "ESNext.Symbol", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts"
          ]
        },
        {
          "pattern": "^[Ee][Ss]5|[Ee][Ss]6|[Ee][Ss]7$"
        },
        {
          "pattern": "^[Ee][Ss]2015(\\.([Cc][Oo][Ll][Ll][Ee][Cc][Tt][Ii][Oo][Nn]|[Cc][Oo][Rr][Ee]|[Gg][Ee][Nn][Ee][Rr][Aa][Tt][Oo][Rr]|[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Pp][Rr][Oo][Xx][Yy]|[Rr][Ee][Ff][Ll][Ee][Cc][Tt]|[Ss][Yy][Mm][Bb][Oo][Ll].[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
        },
        {
          "pattern": "^[Ee][Ss]2016(\\.[Aa][Rr][Rr][Aa][Yy].[Ii][Nn][Cc][Ll][Uu][Dd][Ee])?$"
        },
        {
          "pattern": "^[Ee][Ss]2017(\\.([Ii][Nn][Tt][Ll]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Hh][Aa][Rr][Ee][Dd][Mm][Ee][Mm][Oo][Rr][Yy]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Tt][Yy][Pp][Ee][Dd][Aa][Rr][Rr][Aa][Yy][Ss]))?$"
        },
        {
          "pattern": "^[Ee][Ss]2018(\\.([Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Ii][Nn][Tt][Ll]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Rr][Ee][Gg][Ee][Xx][Pp]))?$"
        },
        {
          "pattern": "^[Ee][Ss]2019(\\.([Aa][Rr][Rr][Aa][Yy]|[Oo][Bb][Jj][Ee][Cc][Tt]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
        },
        {
          "pattern": "^[Ee][Ss]2020(\\.([Bb][Ii][Gg][Ii][Nn][Tt]|[Pp][Rr][Oo][Mm][Ii][Ss][Ee]|[Ss][Tt][Rr][Ii][Nn][Gg]|[Ss][Yy][Mm][Bb][Oo][Ll].[Ww][Ee][Ll][Ll][Kk][Nn][Oo][Ww][Nn]))?$"
        },
        {
          "pattern": "^[Ee][Ss][Nn][Ee][Xx][Tt](\\.([Aa][Rr][Rr][Aa][Yy]|[Aa][Ss][Yy][Nn][Cc][Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee]|[Bb][Ii][Gg][Ii][Nn][Tt]|[Ii][Nn][Tt][Ll]|[Ss][Yy][Mm][Bb][Oo][Ll]))?$"
        },
        {
          "pattern": "^[Dd][Oo][Mm](\\.[Ii][Tt][Ee][Rr][Aa][Bb][Ll][Ee])?$"
        },
        {
          "pattern": "^[Ss][Cc][Rr][Ii][Pp][Tt][Hh][Oo][Ss][Tt]$"
        },
        {
          "pattern": "^[Ww][Ee][Bb][Ww][Oo][Rr][Kk][Ee][Rr](\\.[Ii][Mm][Pp][Oo][Rr][Tt][Ss][Cc][Rr][Ii][Pp][Tt][Ss])?$"
        }
      ]
    },
    "markdownDescription": "Specify a set of bundled library declaration files that describe the target runtime environment.\n\nSee more: https://www.typescriptlang.org/tsconfig#lib"
  }
}

outDir, outFile, rootDir

outDir? outFile?

쉽게 말하면, Ts -> Js로 빌드 시에, 해당 작업을 통해서 나오는 파일의 경로를 말한다.

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.\n\nSee more: https://www.typescriptlang.org/tsconfig#outFile"
  },
  "outDir": {
    "description": "Specify an output folder for all emitted files.",
    "type": "string",
    "markdownDescription": "Specify an output folder for all emitted files.\n\nSee more: https://www.typescriptlang.org/tsconfig#outDir"
  },
  "rootDir": {
    "description": "Specify the root folder within your source files.",
    "type": "string",
    "markdownDescription": "Specify the root folder within your source files.\n\nSee more: https://www.typescriptlang.org/tsconfig#rootDir"
  }
}

strict

{
  "strict": {
    "description": "Enable all strict type checking options.",
    "type": "boolean",
    "default": false,
    "markdownDescription": "Enable all strict type checking options.\n\nSee more: https://www.typescriptlang.org/tsconfig#strict"
  }
}

Enable all strict type checking options

noImplicitAny

--noImplicitThis

--stricNullChecks

--strictFunctionTypes

--strictPropertyInitialization

--strictBindCallApply

--alwaysStrict