Kkan_-

🎈주제: 타입스크립트 컴파일

1. 컴파일 과정 살펴보기

1-1. 코드 작성

// Hello.ts
function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

sayHello("TypeScript");

1-2. TypeScript 컴파일러 실행

TypeScript 컴파일러(tsc)를 실행한다.

이를 통해 TypeScript 파일(.ts)을 JavaScript 파일(.js)로 변환할 수 있다.

1-3. 타입 검사

컴파일러는 TypeScript 소스 코드에 기반하여 타입 검사를 수행한다.

이때, name 매개변수의 타입이 string인지 확인한다.

만약에 타입 오류가 발생하면, 컴파일러는 오류 메시지를 출력한다.

// Hello.ts (컴파일러가 생성한 중간 코드)
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}
sayHello("TypeScript");

1-4. ES6+ 문법 변환 (or 그 이하 문법)

TypeScript는 ES6 이상의 문법을 사용할 수 있지만,

모든 브라우저가 이를 지원하는 것은 아니다!

따라서, 컴파일러는 ES6+ 문법을 ES5 문법으로 변환하여 하위 브라우저에서도 실행될 수 있도록 한다.

// Hello.js (ES5로 변환된 코드)
function sayHello(name) {
  console.log("Hello, " + name + "!");
}
sayHello("TypeScript");

1-5. 소스 맵 생성

컴파일러는 소스 맵(Source map)을 생성한다다.

이를 통해 디버깅 시 원본 코드에서 오류 발생 지점을 정확히 파악할 수 있다.

// Hello.js.map (소스 맵 파일)
{
  "version": 3,
  "file": "greeting.js",
  "sourceRoot": "",
  "sources": ["greeting.ts"],
  "names": [],
  "mappings": "AAAA,SAASA,EAAT,GAAG,MAAM,CAAC;AACf,CAAC",
  "sourcesContent": [
    "function sayHello(name: string) {\n  console.log(`Hello, ${name}!`);\n}\n\nsayHello(\"TypeScript\");\n"
  ]
}

1-6. JavaScript 파일 생성

컴파일러는 변환된 JavaScript 파일을 생성한다.

이 파일은 브라우저나 Node.js 등에서 실행할 수 있다.

// Hello.js
function sayHello(name) {
  console.log("Hello, " + name + "!");
}
sayHello("TypeScript");

1-7. 출력

이렇게 생성된 Hello.js 파일은 브라우저에서 실행할 수 있는 일반적인 JavaScript 파일이다.

이 파일을 브라우저에서 실행하면 콘솔에 "Hello, TypeScript!"이 출력된다.

2. AST(Abstract Syntax Tree)

뜬금없이 이게 무슨 주제지? 라는 생각을 할 수 있지만,

타입스크립트의 컴파일 과정에서 AST는 중요하다.

2-1. AST가 어디서 나와?

Ts는 Js와 달리 정적 타입 시스템을 가지고 있다.

이러한 타입 시스템을 구현하기 위해서는 type-checking이 필수적이다.

이 필수적인 단계를 거치기 위한 도구가 필요한데,

이때 구문 분석기라는 AST가 사용 되며, Ts 컴파일러는 소스코드를 분석하고 AST를 생성한다.

2-2. AST는 무슨 역할?

AST는 Ts의 변수, 함수, 클래스, 메서드 등에 대한 타입을 추론하고 검사하는 데에 사용된다.

이 친구로 인해 컴파일러는 타입을 자동으로 추론할 수 있게 되고,

이를 통해 우리는 더욱 안정적이고 견고한 코드를 작성할 수 있게 된다.

또한, 우리가 작성한 ES6+ 문법을 일반적인 Js코드로 변환 시켜주기도 한다.(호환성 문제 해결!)

2-3. 그래서 AST가 어디서 쓰여?

앞서 말했듯이, AST는 타입 검사단계에서 쓰인다.

1. 소스 코드의 분석과 AST 생성

Ts 컴파일러는 소스 코드를 분석하고, AST를 생성한다.

이때, Ts는 Ts 소스 코드를 Js로 변환하는 과정에서 타입 정보를 보존하기 때문에,

Js코드도 AST를 사용하여 분석한다.

2. 타입 검사

Ts 컴파일러는 생성된 AST를 사용하여 타입 검사를 수행한다.

이때, 컴파일러는 변수, 함수, 클래스, 메서드 등 각각의 요소에 대한 타입을 추론하고, 검사한다.

타입 검사를 통해 개발자는 코드의 안정성을 보장할 수 있다.

3. 코드 변환

Ts 컴파일러는 AST를 사용하여 ES6+ 문법을 일반적인 Js코드로 변환한다.

이때, Ts는 target 옵션에 따라 ES5, ES6 등의 다양한 버전의 Js로 변환할 수 있다.

4. 코드 생성

Ts 컴파일러는 변환된 코드를 생성한다.

이때, 소스 코드와 함께 생성된 소스 맵 파일을 사용하여 디버깅이 가능한 Js코드를 생성한다.

🎈주제: 제네릭

1. 제네릭이란?

제네릭은 보통 C#이나 JAVA와 같은 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용한다.

특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성할 때 주로 사용한다.

예시)

어떤 함수가 있다.

이 함수는 숫자를 받아서 내보내줘!

function func(arg: number) {
  return arg;
}

func(123);

아, 숫자랑 문자랑 같이 부탁해!

function func(arg: number | string) {
  return arg;
}

func(123);
func('hi');

아 맞다. 배열도 필요했다. 숫자배열!

function func(arg: number | string | number[]) {
  return arg;
}

func(123);
func('hi');
func([1,2,3,4]);

아 문자 배열도 좀..

이거 계속 추가해야하나..? 그냥 any 써..?

2. 제네릭 사용

그래서 사용 하는 것이 제네릭이다.

function func<T>(arg: T): T {
  return arg;
}

func(123);
func('hi');
func([1,2,3,4]);

• func<타입 변수 지정>
• arg: 타입 인자
• : 타입 반환

그럼 이런식으로 사용할 수 있다.

function func<T>(arg: T): T {
  return arg;
}

func<number>(123);
func<string>('hi');
func<number[]>([1,2,3,4]);

2-1. 함수

type TypeFunc = <T>(arg: T) => T;
interface InterfaceFunc {
    <T>(arg: T): T;
}

function func<T>(arg: T): T {
    return arg;
}

const test1: TypeFunc = func;
const test2: InterfaceFunc = func;

2-2. 클래스

class Print<T, U> {
    name: T;
    isStudent: U;

    constructor(name: T, isStudent: U) {
        this.name = name;
        this.isStudent = isStudent;
    }
}

const personName = new Print('kkan', true);
const personId = new Print(125223, false);

T / U 같은 것은 개인적인 규칙을 가지고 사용해야한다.

3. 제네릭 타입 좁히기

제네릭을 사용하다보면 의문을 든다.

any랑 뭐가 다른거지..?

그럴때 사용하는 것이..

extends

function print<T extends string | number>(arg: T): T {
    return arg;
}

print('kkan');
print(1234321);

그럼 다른 타입은 못쓰나?

End.

🎈주제: 논리 연산자 활용 타입

1. 타입 별칭 (Type Aliases)

• 의미없는 반복을 줄이고 타입을 명시적으로 사용하도록 돕는다.
• let, const를 선언해 변수를 초기화 하듯이 사용할 수 있다.
• 컴파일러가 따로 추론하지 않는다.

// 타입 별칭 설정
type str = string;
type num = number;
type numArr = num[];
type strArr = string[];

// 별칭 사용!
type Person = {
    name: str;
    age: num;
    family: strArr;
}

interface는 type aliases와 다르게 할 줄 아는 것이 많다! (추론도 계속 하고, 구조화 하기에 좋음.)

MS에서는 이런  type aliases 를 위해 여러가지 기능들을 추가 중에 있다고 한다.

1-1. 유니언 타입

진짜 많이 사용하는 타입이다.

아까도 계속 썼을 정도다..ㄷㄷ

합집합이라고 생각하면 된다. 

type StringNumber = string | number;

const str: StringNumber = 'STR';
const num:StringNumber = 123;

이렇게도 사용 가능!

type Gender = 'M' | 'F';

1-2. 교차 타입(Intersection)

교차타입은 교집합이다.

연결된 타입 모두 만족해야한다는 뜻!

하지만, 잘 쓰이지는 않는다.

type StringNumber = string & number;

const str: StringNumber = 'STR';
// Error: Type 'string' is not assignable to type 'never'.

const num:StringNumber = 123;
// Error: Type 'number' is not assignable to type 'never'.

오류가 난다. string 타입이면서 number 타입 조건에 맞지 않기 때문에..

type Person = {
    name: string;
    age: number;
}

type Student = {
    name: string;
    id: number;
}

const person1: Person & Student = {
    name: 'kkan',
    age: 22,
    id: 123123
}

이렇게 Person과 Student  모두 만족해야 OK!

1-3. 유니언 타입 판별

추론하기 어려운 유니온 타입을 추론하기 위함이다.

interface Male {
    name: string;
    age: number;
    gender: 'M'
}

interface Female {
    name: string;
    age: number;
    gender: 'F'
}

// 누군가 합쳐놓은 유니온 타입..
type Person = Male | Female;

function createPerson({name, age, gender}: Person) {
    return {
        name, age, gender
    };
}

function createMale({name, age, gender}: Person): Male {
    return {
        name, age, gender
    };
}

// Error: Type '"M" | "F"' is not assignable to type '"M"'.
// Type '"F"' is not assignable to type '"M"'.

현재 코드를 살펴보면 유니온 타입으로 인해 추가적인 작업을 더 해야하는 상황이다.

때문에 무분별한 유니온 타입 사용으로 인해 (혹은 불필요한 타입 사용) 불편한 작업들을 더 하지 않도록 한다.

End.

🎈주제: Enum

1. Enum(열거형)?

Ts에만 있는 기능이다.

1-1. 숫자형 열거

• 무조건 시작값부터 +1 씩 증가한다.

enum Prize {
    Gold,   // 0
    Silver, // 1
    Bronze  // 2
}

1-2. 문자형 열거

• 각 멤버의 값을 문자열로 초기화되어야 한다.
• 숫자형 열거와 동작 방식이 다르다.

+) 값이 자동으로 증가하지 않는다.

+) 이외에 리버스 매핑의 차이점도 존재

enum Prize {
    Gold = 'Gold',
    Silver = 'Silver',
    Bronze = 'Bronze'
}

초기화와 실행 방식이 일반 객체와 다르다고 한다.

아직 Ts에 대한 이해도가 높지 않아서 일반 객체와의 큰 차이점을...

1-3. 혼합형 열거

복합적으로 사용하기도 한다.

가능은 하지만, 사용하지 않는 것을 권장한다.

enum numberString {
    First = 0,
    Silver = 'Silver',
}

1-4. 리버스 매핑

숫자형 열거의 경우 키와 값을 역으로 매핑할 수 있다.

하지만, 문자형은 지원되지 않는다.

enum numbers {
    // 키 = 값
    First = 1,
    Second = 2,
    Third = 3,
}

console.log(numbers)

const firstValue = numbers.First;
console.log(firstValue);    // 1

const keyOfFirstValue = numbers[firstValue];
console.log(keyOfFirstValue); // "First"

역방향 매핑이 가능하다

1-5. const 열거

• 기본적으로 열거형은 불안전한 접근을 허용한다.

- 때문에 const enum으로 안전한 열거형을 만든다.

• enum 앞에 const 키워드를 명시해 주면 된다.
• 이 친구는 컴파일 후 제거 된다.

1-6. 열거형 활용하기

keyof와 keyof typeof와 조합하여 활용할 수 있다!

예제 1)

enum VipClass {
    // 키 = 값
    Bronze = 1,
    Silver = 2,
    Gold = 3,
}

type Vip = 'Gold' | 'Silver';

function inviteVip(group: Vip) {
    console.log(`${group}은/는 입장 가능합니다.`);
}

inviteVip('나도');
// Error: Argument of type '"나도"' is not assignable to parameter of type 'Vip'.

inviteVip('Bronze');
// Error: Argument of type '"Bronze"' is not assignable to parameter of type 'Vip'.

inviteVip('Gold');
// "Gold은/는 입장 가능합니다."

type Vip = keyof typeof VipClass;
// type Vip = "Bronze" | "Silver" | "Gold"

이렇게도 사용 가능하다.

End.