Typescript에 대해서

 

자바스크립트의 슈퍼셋(superset) 

 

Typescript는 단순한 프로그래밍 언어가 아니라 자바스크립트의 슈퍼셋이라 불린다. 슈퍼셋이란 기존 언어의 모든 기능을 포함하고 추가적인 기능을 제공하는 것을 말한다.

 

타입스크립트는 다음과 같은 특징을 가진다.

• 타입 안정성: 자바스크립트는 동적타입의 언어이다. 변수에 어떤 종류의 값이 오는지 확실히 알 수 없어서 때로는 예상하지 못한 버그를 만날 수 있다. Typescript는 이를 방지하기 위해 타입을 명시적으로 지정해줄 수 있다.
• 타입 정보를 통해 IDE와 텍스트 에디터는 더 나은 자동완성, 리팩토링 기능 등을 제공할 수 있다.
• 더 나은 문서화: 타입 정보는 다른 개발자들에게 코드의 의도를 명확히 전달하는 문서의 역할을 한다.
• 타입스크립트는 브라우저에서 직접 실행되지 않는다. 그래서 자바스크립트로 컴파일해야 한다.

이러한 타입스크립트는 .ts 확장자를 사용하며, 리액트의 컴포넌트에서 사용하는 경우 .tsx 확장자를 사용한다.

 

타입스크립트에서 타입 지정하는 방법

 

문자열, 숫자, 불리언 타입의 지정

타입스크립트에서는 위 이미지처럼 변수명에 콜론(:)을 붙이고 타입을 지정할 수 있다. 만약 지정된 타입에 어긋나면 값에 빨간 밑줄이 그어지면서 무엇이 잘못됐는지 알려준다. let age: number = 12; 식으로도 사용이 가능하다.

 

타입스크립트에서 타입명을 쓸 때는 앞 글자를 소문자로 써야한다. 왜냐면 바닐라 자바스크립트에 Number, String 등의 원시 객체가 있기 때문이다.

배열, 객체 타입의 지정

배열과 객체 타입을 지정할 경우 위 이미지처럼 문자열 배열인 경우 string[] 식으로 뒤에 대괄호를 붙여준다. 만약 숫자 배열이면 number[]로 지정하면 된다. 객체일 경우 값이 다양한 타입일 수 있고 타입스크립트도 그러한 특징을 알고 있기 때문에 중괄호 내에 다양한 타입을 지정해줄 수 있다.

 

만약 여러 개의 배열로 이뤄진 객체의 타입 지정은 중괄호 뒤에 대괄호를 붙여 지정할 수 있다.

타입 추론

타입스크립트에는 타입 추론이라는 기능이 있다. 단어에서 유추할 수 있듯 개발자가 명시하지 않아도 타입스크립트가 알아서 타입을 파악한다는 것이다. 

 

위 이미지에서는 course 변수에 문자열 값을 넣어주었는데, 타입을 직접 명시하지 않았는데도 마우스 hover 시에 string이라는 타입이 나오는 것을 확인할 수 있다. 만약 여기서 course의 값을 12345로 재할당을 하려하면 타입에 어긋나게 되어 오류가 발생하게 된다.

유니온 타입

타입스크립트에는 유니온 타입이라는 것도 있다. 변수에 어떤 타입이 지정될지 알 수 없을 때, 여러 타입을 | 기호로 구분하여 지정해주는 것이다. 위 이미지에서는 course2 변수에 string과 number 타입을 명시했고, 값에 문자열과 숫자를 입력했을 때 모두 오류가 발생하지 않는 것을 확인할 수 있다.

타입 별칭

타입은 개발자가 직접 명명할 수 있다. type 키워드를 통해 타입의 이름을 짓고, 타입을 지정하여 여러 곳에서 재사용할 수 있다. 위 이미지에서는 객체를 사용했지만 여러 방법으로 사용이 가능하다.

함수와 타입

함수에서의 타입 명시는 위 이미지처럼 반환값에 타입을 명시할 수도 있고, 아래처럼 매개변수에 명시할 수도 있으며, 함수 전체에 명시할 수도 있다.

 

특히, add 함수처럼 반환값에 명시했을 때, 타입 추론이 발생하여 return문에서 별도의 지정이 없어도 a + b가 number형이어야 한다는 것을 마우스 hover를 통해 확인할 수 있다. 그리고, printConsole 함수에 hover를 하면 void라는 게 나오는데, 이는 함수에 반환 값이 없다는 것을 뜻한다. 콘솔에 value를 표출하긴 하는데, 표출할 값이 없다는 것이다. 자바스크립트에서 undefined에 해당하는 경우이다.

제네릭 타입

위 이미지는 제네릭을 적용하기 전, updatedArray에서 insertAtBeginning 함수에 1, 2, 3이 있는 배열과 숫자 -1을 전달했는데, 이 경우 [-1, 1, 2, 3]이 결과로 출력되지만 타입을 확인했을 때 any[]를 추론했음을 확인할 수 있다. any는 어떤 타입이든 가능한 경우이기 때문에 오류를 확인할 수 없어서 타입스크립트의 도움을 받기 어려워진다.

 

실제로 위 이미지의 마지막 코드는 숫자 배열의 0번째 값에 split 메서드(문자열을 지정된 구분자를 기준으로 여러 부분 문자열로 나눠서 분리된 각 문자열로 구성된 배열을 반환)을 사용했다. 즉, 숫자 타입에 사용이 불가능함에도 불구하고 오류가 뜨지 않았다.

 

이러한 경우 제네릭을 사용한다. 제네릭은 타입을 매개변수로 가지는 것이다. 함수나 클래스의 정의 시점에 타입을 결정하지 않고 사용 시점에 타입을 결정하는 방법이다. 타입을 결정할 때는 타입스크립트의 타입 추론을 사용하게 된다.

 

함수에 <> 구문을 입력하고 내부에 Type의 첫 글자를 뜻하는 T를 적고(다른 값을 적을수도 있다), 이 T 타입을 사용할 곳에 위 이미지처럼 적용해주면 된다. 이렇게 하면 위 이미지에서 array와 value에 값이 들어왔을 때, 타입스크립트가 올바른 값을 추론해내도록 한다.