타입스크립트

세 종류의 자바스크립트

자바스크립트는 현재 세 가지 종류가 있다. 표준 자바스크립트 ES5 2015년부터 매년 새로운 버전을 발표하는 ESNext, ESNext에 type 기능을 추가한 TypeScript

Typescript는 ESNext모든 문법을 포함하고 ESNext는 모든 es5문법을 포함함. 타입스크립트로 개발했더라도 타입 기능을 사용하지않는다면 ESNext 소스나 마찬가지

ESNext의 주요 문법

비구조화 할당 화살표 함수 클래스 모듈 생성기 Promise와 async/await 구문

03-2 객체와 인터페이스

object타입은 인터페이스와 클래스의 상위 타입. object타입으로 선언된 변수는 number, boolean, string 타입의 값을 가질 수 없지만 속성 이름이 다른 객체를 모두 자유롭게 담을 수 있음

let o: object = {name: ‘Jack’, age: 32} o = { first: 1, second: 2}

object타입은 마치 객체를 대상으로하는 any타입처럼 동작함. 타입스크립트의 인터페이스 구문은 이렇게 동작하지 않게하려고 고안됨. 두번쨰 같은 코드는 오류가 발생하게함.

인터페이스 선언문

타입스크립트는 객체의 타입을 정의할수 있게하는 interface라는 키워드를 제공함. 인터페이스는 객체의 타입을 정의하는 것이 목적이라 객체를 의미하는 중괄호로 속성의 이름과 타입을 나열하는 형태로 사용함. 다음은 인터페이스의 내용을 한 줄로 표현할 때의 구문임.


inteface 인터페이스이름 {
 속성이름[?]: 속성타입[,...]
}


interface IPerson{
 name: string
 age: number
}

IPerson 인터페이스의 목적은 name age라는 이름의 속성이 둘 다 있는 객체만 유효하도록 객체의 타입 범위를 좁히는 데 있음.

선택 속성 구문

인터페이스를 설계할 때 어떤 속성은 반드시 있어야하지만 있어도 되고 없어도 되는 속성의 형태를 만들고 싶을 떄가 있음. 이러한 걸 선택 속성 (optional property)라고 함 속성 이름 뒤에 물음표 기호를 붙여서 만든다.


interface IPerson2 {
 name: string
 age: number
 etc?: boolean // 선택속성
}

let good1: IPerson2 = {name: 'yerin', age: 27}
let goo2: IPerson2 = {name: 'yerin', age:27, etc: true}

익명 인터페이스

타입스크립트는 interface 키워드도 사용하지 않고 인터페이스 이름도 없는 인터페이스를 만들 수 있음. 이를 익명 인터페이스라고 함.


let ai: {
 name: string
 age: number
 etc?: boolean
} = {name: 'Jack', age:32}

변수 ai는 앞에서 선언한 IPerson2 인터페이스와 같은 구성이지만 익명 인터페이스로 선언했음.


function printMe(me: {name: string, age: number, etc?: boolean}){
 console.log(
 me.etc ? 
 `${me.name} ${me.age} ${me.etc}`
 :
 `${me.name} ${me.age}`
 )
}
printMe(ai) // Jack 32

주로 다음처럼 함수를 구현할 때 사용됨..

03-3 객체와 클래스

클래스 선언문

타입스크립트는 C++나 자바와 같은 객체지향 언어에서 흔히 볼수 있는 class, private, public, protected, implements, extend와 같은 키워드를 제공함.

접근 제한자

클래스의 속성은 public, private, protect와 같은 접근 제한자를 이름 앞에 붙일 수 있음. 생략하면 모두 public으로 간주함.

생성자

타입스크립트 클래스는 construtor 라는 이름의 특별한 메서드를 포함하는데 이를 생성자라 함. 다른 언어와 다르게 타입스크립트 클래스는 클래스의 속성을 선언할 수 있음.


class Person2 {
 constructor(public name: string, public age?: number){}
}
let jack2: Person2 = new Person2('Jack', 32)
console.log(jack2) // Person2 {name: 'Jack', age:32}

타입스크립트는 생성자의 매개변수에 public과 같은 접근 제한자를 붙이면 해당 매개변수의 이름을 가진 속성이 클래스에 선언된 것처럼 동작함.


class Person3 {
 name: string
 age?: number
 constructor(name: string, age?: number){
 this.name = name; this.age = age}
}
let jack3: Person3 = new Person3('Jack', 32)
console.log(jack3) // Person2 {name: 'Jack', age:32}

Person2와 Person3은 똑같음.

인터페이스 구현

다른 객체지향 언어와 마찬가지로 타입스크립트 클래스는 인터페이스를 구현할 수 있음. 클래스가 인터페이스를 구현할때는 implements 키워드를 사용함.


class 클래스이름 implements 인터페이스이름 {
 ...
}

인터페이스는 이러이러한 속성이 있어야한다는 규약에 불과할 뿐 물리적으로 해당 속성을 만들지 않는다. 따라서 클래스 몸통에 반드시 인터페이스가 정의하고 있는 속성을 멤버 속성으로 포함해야한다.

p68