[TypeScript] 1. 타입스크립트 개발환경 만들기

01-1. 타입스크립트란?

🐱세 종류의 자바스크립트

• 웹 브라우저에서 동작하는 표준자바스크립트 ES5
• 매년 새로운 버전을 발표하는 ESNext
• 그리고 ESNEXT에 타입 기능을 추가한 타입스크립트

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

function makePerson(name, age) {}

makePerson(32, "Jack") // 오류발생, 오류의 원인이 무엇인지 찾기 어렵다.

function makePerson(name: string, age: number) {
	//오류 발생 시, 타입스크립트 컴파일러가 문제의 원인을 알려준다.
}  

🐱트랜스파일

트랜스파일러(transpiler)란 프로그래밍 언어로 작성도니 소스코드를 또다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램이다. 트랜스파일러는 텍스트로 된 소스코드를 바이너리코드로 바꿔주는 컴파일러와 구분해야한다.

• ESNext 자바스크립트 소스는 바벨(Babel)이라는 트랜스파일러를 거치면 ES5 자바스크립트 코드로 변환
• 타입스크립트 소스코드 → TSC(TypeScript compiler) → 자바스크립트 코드로 변환

 

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

🐱ESNext 주요 문법 알아보기

1. 비구조화 할당(destructuring assignment) : 비구조화 할당은 객체와 배열에 적용할 수 있다.
2. let person = {name: "Jane", age: 22} let {name, age} = person //name과 age 속성을 비구조화 할당을 통해 쉽게 각 멤버를 얻는다. name = "Jane", age = 22 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
3. 화살표 함수
4. function add(a,b) {return a + b} const add2 = (a, b) -> a + b
5. 클래스 : ESNext에서는 객체지향 프로그래밍을 지원(캡슐화, 상속성, 다형성)
6. 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()) //["야옹", "멍멍"]
7. 모듈 : export 키워드를 사용헤 모듈로 만들면 다른 파일에서 import하여 사용할 수 있음
8. import * as fs from 'fs' export funtion writeFile(filepath: string, content: any){ fs.writeFile(filepath, content, (err) =>{ err && console.log('error', err) }) }
9. 생성기생성기는 function키워드에 를 결합한 funtion과 yield 키워드를 사용해서 만든다. 타입스크립트에서는 yield는 반드시 funtion*으로 만들어진 함수 내부에서만 사용할 수 있다!
10. //생성기 funtion* gen() { yiled* [1, 2] } for(let value of gen()) { console.log(value) }
11. yield문은 ‘반복자’를 의미하는 반복기를 생성할 때 사용 반복기는 독립적으로 존재하지 않고 반복기 제공자를 통해 얻는다! → 생성기
12. Promise와 async/await 구문
13. async funtion 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]

🐱타입스크립트 고유의 문법 살펴보기

1. 타입 주석과 타입 추론
2. let n: number = 1 //타입 부분을 생략, 대입 연산자의 오른쪽 값을 분석해 왼쪽 변수 타입을 결정 let m = 2
3. 인터페이스
4. interface Person{ name: string age?: number } let person:Person = { name: "Jane"}
5. 튜플 : 배열에 저장되는 데이터 타입이 모두 다를때
6. let numberArray : number[] = [1, 2, 3] let tuple: [boolean, number, string] = [true, 1, 'ok']
7. 제네릭 타입 : 다양한 타입을 한꺼번에 취급할 수 있게 해줌
8. class Container<T>{ constructor(public value: T) {} } let numberContainer: Container<number> = new Container<number>(1) let stringContainer: Container<string> = new Container<string>('Hello world')
9. 대수 타입
10. type NumberOrString = number | string type AnimalAndPerson = Animal & Person