0008

FE

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

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

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

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

  • ESNext : 매년 새로운 버전을 발표하는 자바스크립트

  • TypeScript : ESNext에 타입(type) 기능을 추가한 자바스크립트

-> ESNext는 ES5의 모든 문법을 포함하고, 타입스크립트는 ESNext의 모든 문법을 포함한다.


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

  • 마이크로소프트가 2012년 말에 처음 발표했다.

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

  • 타입을 지정하지 않았을 때, 오류가 발생하면 오류의 원인이 무엇인지 찾기가 어렵다.

  • 타입스크립트 컴파일러는 문제의 원인이 어디에 있는지 친절하게 알려주므로, 코드를 좀 더 수월하게 작성할 수 있다.


4. 트랜스파일

  • ESNext 자바스크립트 소스코드는 바벨(Babel)이라는 트랜스파일러를 거치면, ES5 자바스크립트 코드로 변환된다.

  • 바벨과 유사하게, 타입스크립트 소스코드는 TSC(TypeScript compiler)라는 트랜스파일러를 통해 ES5 자바스크립트코드로 변환된다.

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

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

1. ESNext의 주요 문법 살펴보기

1) 비구조화 할당 (destructuring assignment)

  • 객체와 배열에 적용할 수 있다.

2) 화살표 함수 (arrow function)

  • 자바스크립트에서 함수를 선언할 때는 function 키워드를 사용한다.

  • 그런데, ESNext에서는 function 키워드 외에도 화살표(=>)로 함수를 선언할 수 있다.

  • 화살표 함수를 사용하면, function 키워드 방식보다 코드를 간결하게 작성할 수 있다.

3) 클래스

  • ESNext에서는 클래스 기능을 통해 객체지향 프로그래밍을 지원한다.

  • 객체지향 프로그래밍은 프로그래밍언어가 여러 기능을 제공한다.

    • 캡슐화(encapsulation)

    • 상속(inheritance)

    • 다형성(polymorphism)

  • ES5 자바스크립트 코드는 이러한 형태로 코드를 작성하지 못한다.

4) 모듈

  • 모듈을 사용하면, 코드를 여러 개 파일로 분할해서 작성할 수 있다.

  • 변수, 함수, 클래스 등에 export 키워드를 사용해 모듈로 만들면, 다른 파일에서도 사용할 수 있다.

  • 이렇게 만든 모듈을 가져오고 싶을 때는 import 키워드를 사용한다.

  • ES5와 다르게 ESNext는 파일을 분할해서 구현할 수 있게 해주는 모듈 기능을 제공한다.

5) 생성기

  • 타입스크립트, 파이썬, PHP에서는 yield라는 특별한 키워드를 제공한다.

  • yield

    • 반복자를 의미하는 반복기(iterator)를 생성할 때 사용한다.

  • 반복기는 독립적으로 존재하지 않고, 반복기 제공자(iterable)를 통해 얻는다.

  • yield문을 시용해 반복기를 만들어내는 반복기 제공자를 생성기(generator)라고 부른다.

  • 생성기는 function 키워드에 별표(`*`)를 결합한 `function*`와 `yield` 키워드를 이용해 만든다.

  • yield는 반드시 `function*`로 만들어진 함수 내부에서만 사용할 수 있다.

6) Promise와 async/await 구문

  • ES5로 비동기 콜백 함수(asynchronous callback function)를 구현하려면, 코드가 상당히 복잡하고 번거로워진다.

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

  • async/await 구문을 빌려서 여러 개의 Promis 호출을 결합한 좀 더 복잡한 형태의 코드를 간결하게 구현할 수 있게 된다.

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

1) 코드 주석과 타입 추론

TypeScript
let n:number = 1
let m = 2

  • 변수 n 뒤에는 콜론(:)과 타입 이름이 있는 것.

  • 이것이 타입 주석(type annotation)

  • 타입 부분을 생략할 수도 있다.

  • 타입스크립트는 변수의 타입 부분이 생략되면, 대입 연산자(=)의 오른쪽 값을 분석해, 왼쪽 변수의 타입을 결정한다.

  • 이것이 타입 추론(type-inference)

  • 타입 추론 덕분에 자바스크립트로 작성된 '.js' 파일을 확장자만 '.ts'로 바꾸면, 타입스크립트 환경에서도 바로 작동한다.

2) 인터페이스

TypeScript
interface Person {
    name : string
    age? : number  // 해당 속성이 선택적(optional)
}

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

3) 튜플

  • 배열에 저장되는 아이템의 데이터 타입이

    • 모두 같으면, 배열

    • 모두 같지 않으면, 튜플

4) 제네릭 타입

  • 제네릭 타입(generic type) : 다양한 타입을 한꺼번에 췩브할 수 있게 해준다.

  • 여러 가지 타입을 대상으로 동작할 수 있다.

5) 대수 타입

  • ADT : 추상 데이터 타입 (abstract data type)의 의미로도 쓰이지만, 대수 타입(algebraic data type)의 의미로도 쓰인다.

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

  • 종류

    • 합집합 타입(union 또는 sum type) -> |

    • 교집합 타입(intersection 또는 product type) -> &

01-3. 타입스크립트 개발 환경 만들기

1. scoop 프로그램 설치

  • 타입스크림트 개발 환경은 node.js 개발 환경과 똑같다.

  • node.js를 설치하고, visual studio code와 크롬 브라우저를 설치하면 바로 개발 가능

2. 타입스크립트 컴파일러 설치

bash
npm i -g typescript
tsc --version

  • 타입스크립트는 node.js 환경에서만 동작하므로, node.js의 패키지 관리자인 npm을 사용해서 설치한다.

  • i : install / -g : global(전역 공간)

  • typescript 패키지는 서버와 클라이언트로 동작하는 두 개의 프로그램을 포함하고 있다.

3. 타입스크립트 컴파일과 실행

1) 컴파일
: 컴파일을 하면 .ts 파일이 TSC에 의해 트렌스파일되어 .js 파일이 생성된다.

bash
tsc hello.tx

2) 실행

bash
node hello.js



4. ts-node 설치

  • tsc는 타입스크립트 코드를 ES5의 형식의 자바스크립트 코드로 변환만할 뿐, 실행하지는 않는다.

  • 만약 타입스크립트 코드를 ES5로 변환하고, 실행까지 동시에 하려면, ts-node라는 프로그램을 설치해야 한다.

1) 설치 명령어

bash
npm i -g ts-node

2) 변환 & 실행 명령어

bash
ts-node hello.ts
목차
  1. 01-1. 타입스크립트란 무엇인가?
  2. 01-2. 타입스크립트 주요 문법 살펴보기
  3. 01-3. 타입스크립트 개발 환경 만들기