1장 타입스크립트와 개발환경 만들기

1-1 타입스크립란 무엇인가?

세 종류의 자바스크립트

• ES5
• ESNext
• 타입스크립트

타입스크립는 누가 만들었나?

• C# 언어를 창시한 아네르스 하일스베르가 핵심 개발자로 참여하고 있으며 구글의 Angular.js 팀이 앵귤러 버전 2를 만들면서 타입스크립트를 채택한 이후부터 널리 알려졌다.

자바스크립트에 타입 기능이 있으면 좋은 이유

• A라는 개발자가 다음과 같은 코드를 만들었다고 가정

function makePerson(name, age) {}

• B라는 개발자가 이 코드를 이용, 오류가 발생했으면 원인이 무엇인지 찾기가 어렵다

makePerson(32, "Jack")

But

• 처음부터 타입 기능을 이용해 구현했다면 이러한 문제는 발생하지 않는다

function makePerson(name: string, age: number){}

1-2 타입스크립트 주요 문법 살펴보기

ESNext의 주요 문법 살펴보기

• 비구조화 할당

let person = {name: "Jane", age: 22}
let {name, age} = person //name = "jane", age = 2

let array = [1,2,3,4]
let [head, ...rest] = array //head = 1 , rest = [2,3,4]

let a = 1 , b = 2;
[a,b] = [b,a] // a = 2, b = 1

• 화살표 함수

function add(a,b) return a+b
const add2 = (a,b) => a+b

• 클래스 (객체지향 프로그래밍)

abstract class Animal {
	constructor (public name?: string, public age?: number){}
	abstract say(): string
}

class Cat extends Animal{
	say() {return '야옹'}
}

class Dog extends Animal{
	say() {return '멍멍'}
}

let animals: Animal[] = [new Cat('야옹이',2), new Dog('멍멍이', 3)]
let sounds = animals.map(a => a.say()) // ["야옹", "멍멍"]

• 모듈

import * as fs from 'fs'
export function writeFile(filepath: string, content:any) {
	fs.writeFile(filepath, content, (err) => {
		err && console.log('error', err)
	}
}

• 생성기
  • 타입스크립트는 물론 몇몇 프로그래밍 언어는 yield라는 특별한 키워드를 제공
  • yield 문은 ‘반복자'를 의미하는 반복기(iterator)를 생성할 때 사용

function* gen() {
	yield* [1,2]
}
for(let value of gen()) {console.log(value)} // 1,2

• Promise와 async/await 구문
  • Promise는 웹 브라우저와 Node.js에서 모두 제공하는 기본 타입으로 비동기 콜백 함수를 상대적으로 쉽게 구현할 목적으로 만들어졌다

async function get() {
	let values = []
	values.push(await Promise.resolve(1))
	values.push(await Promise.resolve(2))
	values.push(await Promise.resolve(3))
	return values
}
get().then(values => console.log(values)) // [1,2,3]

타입스크립트 고유의 문법

• 타입 주석과 타입 추론

let n: number = 1
let m = 2

타입 추론 : 2행처럼 타입 부분을 생략하면 대입 연산자의 오른족 값을 분석해 왼쪽 변수의 타입을 결정한다

• 인터페이스

interface Person {
	name: string
	age: number
}

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

• 튜플 (데이터 타입이 모두 같으면 배열, 다르면 튜플)

let numberArray: number[] = [1,2,3] //배열
let tuple: [boolean, number, string] = [true, 1, 'Ok'] // 튜플

• 제네릭 타입

class Container<T>{
	constructor(public value:T){}
}
let numberContainer: Container<number> = new Container<number>(1)
let stringContainer: Container<string> = new Container<string>('Hello World')

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

type NumberOrString = number | string // 합집합 타입 예
type AnimalAndPerson = Animal & Person // 교집합 타입 예

1-3 타입스크립트 설치

npm i -g typescript // -g는 global 전역 공간에 설치
tsc --version