Do it! 타입스크립트 프로그래밍 1장

 

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

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

 

1) 세종류의 자바스크립트

- ES5(ECMAScript 5) : 웹 브라우저에서 동작하는 표준자바스크립트

 

- ESNext : 2015년부터 매년 새로운 버전을 발표하는 ESNext는 ES6를 포함해 ES6이후의버전들을 ESNext라고 부르기 시작했다. ES6부터는 발표연도를 붙여 ECMAScript 2015처럼 부르기로 함. 이를통들어서 ESNext라고 하며 현재는 ECMAScript 2019까지나온 상황

 

- TypeScript : ESNext의 모든 문법을 포함하되, ESNext에 타입 기능을 추가한 스크립트

 

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

- 마이크로소프트가 개발하고 유지하고 있는 오픈 소스 프로그래밍언어 (2012년말 발표)

 

- C# 언어를 차이샇ㄴ 아네르스 하일스베르가 핵심 개발자로 참여중

 

3) 트랜스파일

- ESNext 자바스크립트 소스코드는 바벨(Babel)이라는 트랜스파일러(transpiler)를 거치면 ES5 자바스크립트 코드로 변환되며, 타입스크립트 소스코드는 TSC(TypeScript compiler)라는 트랜스파일러를 통해 ES5 자바스크립트코드로 변환됨

 

- 트랜스파일러란, 어떤프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 된 소스코드로 바꿔주는 프로그램을 말함.

 

- 텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러와 구분해서사용

 

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

1) ESNext의 주요 문법

(1) 비구조화 할당

- 비구조화 할당을 통해 각 멤버의 요소를 쉽게 분리해서 얻을 수있다.

 

(2) 화살표 함수

- 자바스크립트에서 함수를 선언할 때는 다음 코드의 01행처럼 function 키워드를 사용하지만, ESNext에서는 function 키워드 외에오 화살표(=>)로 함수 선언이 가능

 

(3) 클래스

- ESNext에서는 클래스 기능을 지원해 C++나 Java 언어에서 보던 객체지향 프로그래밍을 지원한다. 캡슐화, 상속, 다형성이라는 세가지 요소 지원

 

(4) 모듈

- 모듈을 사용해 코드를 여러 개 파일로 분할해서 작성 가능. 변수, 함수, 클래스등에 export 키워드를 사용해 모듈로 만들면 다른 파일에서도 사용할 수 있다. 모듈을 가져올 때는 import 키워드 사용

 

(5) 생성기

- 타입크스립트는 물론이고 파이썬 PHP같은 프로그래밍 언어는 yield 라는 키워드를 제공,yield문은 ‘반복자’를 의미하는 반복기를생성할 때 사용

- yield문을 사용해 반복기를 만들어 내는 반복기 제공자를 생성기라고부름

- function 키워드에 (*)를결합해 function*과 yield 키워드를 이용해 만들며, 타입스크립트에서 yield는 반드시 function*으로 만들어진 함수 내부에서만 사용 가능

 

(6) Promise와 async/await구문

- ES5로는 비동기 콜백 함수를 구현하는 것이 복잡하고 번거로움

 

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

 

- ESNext는 C# 4.5 버전의async/await 구문을 빌려서 여러 개의 Promise 호출을결합한 복잡한 형태의 코드를 간결하게 구현시킴.

 

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

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

- 콜론(:)과 타입 이름을두고 타입 주석(Type annotation)이라고 하지만 2행처럼타입스크립트는 타입 부분 생략이 가능하며, 대입 연산자(=)의오른쪽 값을 분석해 왼쪽 변수 타입을 결정하는데 이를 타입 추론(Type inference)라고 함. 타입 추론 덕분에 자바스크립트 환경인 .js를 .ts로만 바꾸면 타입스크립트 환경에서 바로 동작함

Ex) let n: number = 1

let m = 2

 

(2) 인터페이스

 

(3) 튜플

- 파이썬과 같은 몇몇 프로그래밍 언어에는 튜플이라는 타입이 있으며, 물리적으로는 배열과 같지만, 배열에 저장되는 아이템의 데이터타입이모두 같으면 배열, 다르면 튜플이다.

 

(4) 제네릭 타입

- 제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해주는 역할.

 

(5) 대수 타입

- ADT란, 추상 데이터타입(abstract data type)을 의미하기도 하지만, 대수타입이라는 의미로도 사용됨.

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

- 대수 타입은 크게 합집합(unionor sum type)과 교집합(intersection or product type) 두가지가 있으며, 합집합은 ‘|’ 기호를, 교집합은 ‘&’ 기호를 사용해 여러 타입을 결합해서 만들수 있음.

 

1-3) 타입 스크립트 개발 환경 만들기

(1) scoop 프로그램 설치

 

 

Scoop install aria2

Scoop install git

 

(2) 비주얼 스튜디오 코드 설치

- Scoop bucket add extras

- Scoop install vscode

- Add Visual Studio Code as a context menuoption by running: “C:\Scoop\apps\vscode\current\vscode-install-context.reg”

 

(3) 노드제이에스 설치

- scoop install nodejs-lts

- node -v (노드제이에스 버전 확인)

 

(4) 타입스크립트 컴파일러 설치

- npm I -g typescript

- tsc -v (타입스크립트 컴파일러 버전 확인)

 

(5) touch 프로그램 설치 –파일 생성시 지정 이름의 파일이 이미 있으면 무시하고, 없으면 해당 이름으로 파일을 만들어줌

- scoop install touch

 

(6) ts-node 설치(tsc는타입스크립트 코드를 ES5 형식 자바스크립트 코드로 변환만 할 뿐 실행하지는 않으므로, 실행까지 동시에 하기 위해서 ts-node 사용)

- npm I -g ts-node