[TypeScript ] 쓰는이유? 사용해보기

Typescript

---

 

타입 스크립트는 마이크로소프트가 개발 유지하고 있는 오픈소스 언어로 2012 년 말 처음 발표되었습니다.

자바스크립트 대체 언어 중 하나이며 ESNext의 모든 문법을 포함하는 Superset입니다.

현재 표준 자바스크립트인 ES5, 매년 새로운 버젼을 발표하는 ESNext, 그리고 ESNext에 타입(Type)기능을 추가한 타입스크립트이다.

 

타입스크립트 관계도

 

 

Typescript 왜 쓰는 걸까?

---

여러 사람이나 팀이 협력해 하나의 제품을 개발하는데 이런 상황에서 항상 코드를 작성한 쪽과 사용하는 쪽 사이에 소통이 중요하다.

예를 들어서 A라는 개발자가 다음과 같은 코드를 만들었다고 가정해 보자.

 

function kimPerson(name, age) {

}

B라는 개발자는 이코드를 이용하려고 다음 코드를 만들어 실행했을 때 오류가 발생했다면 B개발자는 오류의 원인이 뭔지 찾기 어렵다.

 

kimPerson(29, 'Sung') // 타입 X

하지만 타입스크립트의 타입 기능을 이용해 구현한다면 어떻게 될까?

 

function kimPerson(name: string, age: number) {

}

함수에 타입을 명시하니 명확하고 잘못된 타입이 들어갔을때 타입스크립트 컴파일러는 문제의 원인이 어디에 있는지 알려준다.

이처럼 타입 기능을 잘 활용하여 사용한다면 큰 이점이 많기 떄문에 자바스크립트보다 타입스크립트를 더 선호하게 된다.

 

사용해보기

---

타입스크립트는 브라우저에서 동작하지 않고 타입스크립트 컴파일러를 이용하여 자바스크립트 파일로 변환하게 하여 사용하게 됩니다.

ESnext는 바벨이라는 트랜스파일러를 거치면서 ES5 자바스크립트 코드로 변환하게 됩니다. 이처럼 바벨과 유사하게 타입스트립트 

소스 코드는 TSC(TypeScript Compiler)라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환하게 됩니다.

주요 문법을 알아보기 전에 개발환경을 구축해보겠습니다.

 

설치

 

npm install -g typescript
 
tsc -v
// Version

TSC는 타입스크립트 ES5  형식의 코드로 변환해주지만 실행하지는 않아서 변환 후 실행까지 하려면 ts-node를 같이 설치합니다.

 

npm install -g ts-node

 

주요 문법

 

타입스크립트는 ESNext 문법을 지원하는데 타입스크립트를 다루려면 ESNext 문법을 알아야 합니다. 타입스크립트에만

고유한 문법도 있는데 여기선 타입스크립트 문법을 간단하게 알아 보도록 하겠습니다.

 

- 타입 주석과 타입 추론

 

let n : number = 1 // 타입 주석

let m = 2 // 타입 추론

 변수 n 뒤에는 콜론(:)과 타입 이름이 있습니다. 이것을 타입 주석이라고 합니다. 두번째 행처럼 타입 부분을 생략할 수도 있습니다.

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

이를 타입 추론이라고 합니다. 타입스크립트의 타입 추론 기능은 자바스크립트 소스코드와 호환성을 보장하는데 큰 역활을 하며

타입 추론 기능 덕분에 js파일 확장자만 ts로 바꾸면 타입스크립트 환경에서 바로 동작합니다. 

 

- 인터페이스

 

interface Person {
  name: string // 속성이름 [?] : 속성 타입 [,...]
  age?: number // ? = 선택 속성
}

let person: Person =  { name : 'kim'}

타입스크립트는 객체의 타입을 정의할 수 있게하는 interface라는 키워드를 제공합니다. 인터페이스는 객체의 타입을 정의하는 것이

목적이므로 중괄호{}로 속성의 이름과 타입을 나열하는 형태로 사용합니다. 인터페이스를 설계할 때 어떤 속성은 반드시 있어야 하지만,

어떤 속성은 있어도 되고 없어도 되는 형태로 만들고 싶을 때 선택 속성을 사용합니다. 속성 이름 뒤에 물음표 기호를 붙여서 만듭니다.

 

- 튜플

 

let numberArray: number[ ] = [1, 2, 3] // 배열

let tuple: [boolean, number, string] = [true, 1, 'OK'] // 튜플

파이썬과 같은 몇몇 프로그래밍 언어에는 튜플이라는 타입이 있는데 튜플은 물리적으로는 배열와 같습니다. 배열이 저장되는 아이템의

데이터 타입이 모두 같으면 배열, 다르면 튜플입니다. 위 행을 보면 배열같은 경우는 데이터 타입이 number로 모두 같으며 튜플은

타입이 모두 다르다.

 

- 제네릭 타입

 

class Container<T> {
  constructor(public value: T){ }
}

let numberContainer: Container<number> = new Container<number>(1) //number 
let stringContainer: Container<string> = new Container<string>('Hello world') //string

제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해주는데 Container클래스는 value 속성을 포함하고 있다.

이 클래스는 Contianer<number>, Container<string>, Container<number[]>, Container<bollean>처럼 여러 가지 타입을

대상으로 동작할 수 있는데 이를 '제네릭 타입'이라고 합니다.

 

- 대수 타입

 

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

대수 타입은 다른 자료형의 값을 가지는 자료형을 의미합니다. 크게 합집합 타입과 교집합 타입 두 가지가 있습니다.

합집합 타입은 '|' 기호를 , 교집합 타입은 '&' 기호를 사용해 여러 타입을 결합하여 만들 수 있습니다.

 

Exit

---

간단하게 타입스크립트 쓰는이유와 주요 문법에대해 살펴봤다. 타입스크립트를 배우기 좋은 핸드북들이 꽤 많은데 한글화 된것도 많다.

아래 링크를 참고하면 좀 더 깊게 학습할 수 있을거같다. 

 

https://www.typescriptlang.org/ko/docs/handbook/intro.html

Handbook - The TypeScript Handbook

https://typescript-handbook-ko.org/

타입스크립트 핸드북