타입스크립트에 관심이 가서 2주간 커리큘럼을 짜서 타입스크립트를 공부하고자 한다. 교재는 'Do it!타입스크립트 프로그래밍'을 참고하였다.

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

1-1.typescript

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 확장된 언어라고 볼 수 있다.

타입스크립트는 자바스크립트와 달리 브라우저에서 JS만 실행할 수 있으므로 TS를 사용하려면 TS ➡️ JS로 컴파일하는 과정이 필요하다.

TS는 동적타입언어인 JS의 약점을 보완하기 위해서 타입을 지정해주는 것이다.

1-2.typescript는 왜 쓰는가?

위에서 말했듯이 JS는 동적타입의 언어이다. 자율성을 가지지만 아래와 같은 버그가 발생하여 우리를 오류로부터 보호해주지 못한다. 두 숫자를 더하는 log를 만들 때 number 대신 string이 들어간 경우, JS에서는 에러를 발생시키지 않고 두 string을 concat하여 "32"를 출력한다.

console.log(3 + 2) // 5
console.log("3" + "2") // "32"

이렇게 의도치 않은 방식의 버그가 발생할 때 코드를 보호하기 위해 강력한 타입 안정성이 필요하다.

2.typescript 고유의 문법

2-1.타입 주석과 타입 추론

01행의 변수 n 뒤에는 콜론(:)과 타입 이름이 명시되어 있다. 이것을 타입 주석이라고한다.
TS는 02행처럼 타입부분을 생략할 수도 있는데 TS에서는 타입 부분이 생략되면 =의 오른쪽 값을 분석해 왼쪽 변수 타입을 결정한다. 이것을 타입 추론이라고 한다.

01: let n : numer =1
02: let m = 2

TS의 타입 추론 기능은 JS와 호환성을 보장하는데 큰 역할을 한다. 타입 추론 덕분에 자바스크립트로 작성된 '.js'파일을 확장자만 '.ts'로 바꾸면 타입스크립트 환경에서도 바로 작동된다.

2-2.인터페이스

TS는 객체의 타입을 정의할 수 있게 하는 interface 키워드를 제공한다.
객체의 타입을 정의 하는 것이 목적이므로 객체를 의미하는 중괄호{}로 속성의 이름과 타입을 나열하는 형태로 사용한다.

interface IPerson{
name : string
age : number
} //name과 age 속성을 포함하는 IPerson 인터페이스

2-3.튜플

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

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

2-4.제네릭 타입

제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해준다. 다음 코드의 Container클래스는 value 속성을 포함한다. 이 클래스는 Container, Container, Container<number[]>, Container처럼 여러가지 타입을 T(다른 문자도 가능)대상으로 동작할 수 있다.

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

2-5.대수 타입

다른 자료형의 값을 가지는 자료형을 의미한다. 대수 타입에는 크게 합집합 타입과 교집합 타입 두 가지가 있다. 합집합 타입은 | 기호를, 교집합 타입은 &기호를 사용해 다음 코드 처럼 여러 타입을 결합하여 사용 가능하다.

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