[Typescript] 22.10.22 필기 노트(ESNext의 특징, 타입스크립트 고유 문법)

[ 내용 ]

 

1. ESNext의 특징

 

(1) 생성기

 

yield 문: ‘반복자’를 의미하는 반복기(iterator)를 생성할 때 사용. ‘반복기’는 독립적으로 존재하지 않고 반복기 제공자(iterable)를 통해 얻는다. 반복기를 만들어내는 반복기 제공자를 ‘생성기(generator)’라고 부른다.

 

function* gen(){

    yield* [1, 2, 3]

}

for(let value of gen()){ console.log(value) }

 

생성기는 function 키워드에 별표(*) 결합한 function*과 yield 키워드를 이용해 만든다. 타입스크립트에서 yield는 반드시 function*으로 만들어진 함수 내부에서만 사용 가능.

 

코드에서 yield가 호출되면 2행에서 일시 정지 후 점프해서 4행을 실행한다. 이 과정을 배열 [1, 2, 3]을 다 순회할 때까지 반복.

 

 

 

(2) Promise와 async/await 구문

 

ES5로 비동기 콜백 함수 구현시 발생 할 수 있는 ‘콜백 지옥’을 C# 4.5버전의 async/await 구문을 빌려 여러 개의 Promise 호출을 결합한 좀 더 복잡한 형태의 간결하게 구현할 수 있게 한다.

 

async function get() {

    let values = []

    values.push(await Promise.resolve(1))

    values.push(await Promise.resolve(2))

    values.push(await Promise.resolve(3))

    values.push(await Promise.resolve(3))

    return values

}



get().then(values => console.log(values))

 

함수 수정자(function modifier)를 사용하면 함수의 본문에서 await 키워드를 사용할 수 있다. await는 Promise 객체를 해소(resolve)해줍니다. 아래 get 함수는 [1, 2, 3, 3] 값을 Promise 형태로 반환. get이 반환한 Promise 객체는 then 메서드를 호출해 실제 값을 얻을 수 있다.

 

2. 타입스크립트 고유의 문법

 

(1) 타입 주석과 타입 추론

 

타입 주석(type annotation)

 

타입 추론(type inference)

 

TS에서 타입주석을 생략할 수 있다. 이는 기존의 js와의 호환성을 위해서인데, js파일을 ts파일로 바꿔도 정상 동작한다. TS에서는 타입 주석이 없더라도 대입연산자 오른쪽의 값을 분석한다. 이를 타입 추론(type inference)이라고 한다.

 

(2) 인터페이스

 

interface Person {

    name: string,

    age?: number

}



let person: Person = {name : "otter"}



console.log(person.name);

 

(3) 튜플

 

튜플은 물리적으로 배열과 같다. 하지만 저장되는 아이템의 데이터 타입이 모두 같으면 배열, ‘다르면 튜플’

const arr: number[] = [1, 2, 3, 4] // 배열

const tup: [boolean, number, string] = [true, 1, "string"] //튜플

 

막간 꿀팁! (VS code short cut!)   shift + option + a => 블럭 주석

 

(4) 제너릭 타입

 

제너릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해준다.

class Container<T> {
    constructor(public value: T){

    }
}

const number:Container<number> = new Container<number>(1)
const str:Container<string> = new Container<string>("hello world")

Container 클래스가 value라는 속성을 갖는다. 그 value 속성의 타입을 여러가지 타입을 대상으로 취급할 수 있게 해준다. 

 

(5) 대수타입

 

type NumberOrString = number | string
type AnimalAndPerson = Animal & Person

 ADT == Abstract Data Type(추상 데이터 타입) == Algebraic Data Type(대수타입)

대수타입이란, 다른 자료형의 값을 가지는 자료형을 의미

대수타입에는 합집합(|: union 또는 sum type), 교집합(&: intersection 또는 product type) 두 가지가 있다.

 

 

[ 리뷰 ]

데이터 센터 화재 이슈로 블로그에 글을 못올려서 기간이 꽤나 붕 떴지만... 공부는 꾸준히(사실 아님)하려고 했습니다...

부끄럽넹... ㅎㅎ

다시 열심히 해보자!

 

꾸준히 열심히!