이전 포스팅에서 언급한 바와 같이 타입스크립트는 ESNext 문법을 지원하기 때문에, 타입스크립트를 능숙하게 다루기 위해선, ESNext 문법을 알아야 한다. 우선 ES5와는 다른 ESNext의 주요 문법을 살펴보자.
ESNext의 주요문법
비구조화 할당 (Destructuring assignment)
비구조화 할당은 객체와 배열에 적용할 수 있다. 아래 코드를 살펴보도록 하자.
let user = {name:'soopiri', age: 99}
let {name, age} = user
console.log(name, age)
// result: soopiri, 99
let arr = [1, 2, 3, 4]
let [first, ...rest] = arr
console.log(first, rest)
// result: 1, [2,3,4]
let a =1, b = 2;
[a, b] = [b, a]
console.log(a, b)
// result: 2, 1
user 객체의 name과 age 속성을 비구조화 할당을 통해 쉽게 각 멤버의 값을 얻을 수 있다.
배열에도 비구조화 할당을 적용하여, 배열에서 첫 번째 요소와 나머지 요소를 쉽게 분리해서 얻어낼 수 있다.
마지막 코드는 두 변수의 값을 서로 Swap하는 예시이다.
화살표함수 (Arrow function)
보통 자바스트립트에서 함수를 선언할 때 function 키워드를 사용하지만, ESNext에서는 function키워드 이외에 (=>) 형태의 화살표로 함수를 선언할 수 있다. 코드는 최대한 간결하게 짜야 읽기가 좋고, 화살표 함수를 활용하면 간결해진다. 아래의 코드를 참고해보자.
// function keyword
funtion sample(param1, param2) {
return param1*param2
}
// arrow function
const sample = (param1, param2) => param1*param2
클래스 (Class)
ESNext에서는 클래스라는 기능을 제공해 C#이나 Java에서 보던 객체지향 프로그래밍을 지원한다. 즉 캡슐화, 다형성, 상속성을 지원한다. 아래는 예시 코드이다.
abstract class Person {
constructor(public name?: string, public age?: number) {}
abstract introduce(): string
}
class Boy extends Person {
introduce() { return 'Hi I am a boy'}
}
class Girl extends Person {
introduce() { return 'Hi I am a girl'}
}
let people: Person[] = [new Boy('Gildong', 10), new Girl('Sunny', 11)]
let greet = people.map(p => p.introduce())
console.log(greet)
// result: ['Hi I am a boy', 'Hi I am a girl']
모듈 (Module)
모듈을 사용하면, 코드를 여러개로 분할하여 작성할 수 있다. 변수나 함수, 클래스 등에 export 키워드를 사용해서 모듈화하면, 다른 파일에서도 해당 요소를 사용할 수 있다. 모듈을 사용하기 위해선 import 키워드를 사용한다.
import sample from 'sample'
export const sampleFromSample = () => {
sample.test(param, (error) => {
error && console.log('error', error)
})
}
생성기 (Generator)
타입스크립트를 포함해 파이썬이나 PHP와 같은 몇몇 프로그래밍 언어에서는 yield라는 키워드를 사용한다. yield는 '반복자'를 의미하는 반복기를 생성할 때 사용한다. 이 반복기는 독립적으로 존재하지 않고 반복기 제공자를 통해 얻게 되는데, 이처럼 yield문을 통해 반복기를 만들어내는 반복기 제공자를 '생성기' 라고 부른다.
생성기는 function 키워드에 (*)표시를 결합한 function*과 yield 키워드를 이용해 만든다. 타입스크립트에서 yield는 반드시 function*으로 만들어진 함수 내부에서만 사용할 수 있다.
function* test() {
yield* [[1,2], [1,2,3]]
}
for(let value of test()) { consoloe.log(value) }
// result
// [1,2]
// [1,2,3]
function* 을 생성기라고 하며, 이 생성기로 인해 yield 키워드를 사용할 수 있다. yield가 호출되면 해당 행에서 일시정지 후 for문을 실행하고, for문이 실행을 마치면 다시 yield문이 있는 행을 실행하고, 이 과정을 배열 [[1,2], [1,2,3]]의 요소를 모두 돌때까지 반복한다.
Promis와 async/await
ES5에서 비동기 콜백 함수를 구현하려면 코드가 상당히 지저분했다. 이 덕분에 콜백 지옥이라는 표현이 있기도 하다. Promise는 웹 브라우저와 Node.js에서 모두 제공하는 기본 타입으로 비동기 콜백 함수를 상대적으로 쉽게 구현할 수 있다. ESNext에서는 C# 4.5 버전의 async/await 구문을 빌려, 여러개의 Promise 호출을 결합한 복잡한 형태의 코드를 간결하게 구현할 수 있다.
async function sample() {
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(4))
values.push(await Promise.resolve(5))
}
sample().then(values => console.log(values))
// result : [1,2,3,4,5]
타입스크립트 고유의 문법
타입 주석과 타입 추론
변수명:type명 과 같은 형태를 타입 주석 형태라고 부르며, 타입을 생략할 수도 있다. 타입스크립트는 변수의 타입 부분이 생략되면 변수 값을 분석해 변수의 타입을 결정한다. 이를 타입 추론이라고 한다. 타입스크립트의 타입 추론 기능은 자바스크립트 소스코드와 호환성을 보장하는 데 큰 역할을 한다. 이 덕분에 자바스크립트로 작성된 .js 파일을 확장자면 .ts로 바꾸면 타입스크립트 환경에서도 동작한다.
let a:number = 1
let b = 2
인터페이스
아래의 코드는 C#, Java등 interface 타입이 있는 언어에서 볼 수 있는 구문이다.
interface IAnimal {
kind: string
name?: string
}
let animal = IAnimal = { kind:"Cat" }
튜플
파이썬과 같은 프로그래밍 언어에는 튜플이라는 타입이 있다. 튜플은 물리적으로는 배열과 같지만, 배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열, 다르면 튜플이라고 보면 된다.
let arr: number[] = [1,2,3]
let tuple: [boolean, number, string] = [false, 4, 'k']
제네릭(Generic) 타입
제네릭 타입은 다양한 타입을 동시에 사용할 수 있게 해 준다. 아래 코드에서 A클래스는 value 속성을 포함하는데, 이 클래스는 A<number>, A<string> 처럼 여라가지 타입을 대상으로 동작할 수 있는데 이를 제네릭 타입이라고 한다.
class A<T> {
constructor(public value: T) {}
}
let nA: A<number> = new A<number>(1)
let sA: A<string> = new A<string>('Hi')
대수(Algebraic data) 타입
대수 타입이란 다른 자료형의 값을 가지는 자료형을 의미한다. 대수 타입에는 크게 합집합과 교집합 타입이 있다. 합집합 타입은 (|) 기호를, 교집합 타입은 (&) 기호를 사용한다.
type BooleanOrNumber = boolean|number // 합집합
type CarAndBike = Car & Bike // 교집합
'Development > TypeScript' 카테고리의 다른 글
타입스크립트로 프로젝트를 시작하기 (Begin Typescript Project) (0) | 2022.04.24 |
---|---|
Typescript - Module (0) | 2022.04.17 |
TypeScript란? (0) | 2022.04.15 |