TypeScript : 타입 애노테이션 : 개념, 예제, 설명

타입

이제 TypeScript에 다양한 타입이 존재합니다. 가장 먼저 볼 거는 TypeScript 코드 어디에서 타입을 사용하는지입니다. 기본적으로 함수에서부터 여러 상황들이 존재하는데 예시가 있습니다.

어떤 함수는 불리언 값이어야 하는 경우가 있습니다. 단일 불리언 값이나 불리언 배열 혹은 문자열이 될 수도 있습니다. 또 어떤 함수는 숫자 두 개를 인수로 받고 하나의 숫자만 반환하는 경우도 있습니다.

또, 패턴이나 객체의 형태도 특정할 수 있습니다.  어떤 객체가 colors이라는 특정 프로퍼티를 갖고 프로퍼티가 문자열의 배열이어야 한다고 지정할 수 있습니다. 아니면 매우 간단하게 설정할 수도 있는데 TypeScript의 타입을 변수로 지정할 수도 있습니다.

 

 

가변 타입

 

TypeScript : 타입 애노테이션 : 개념, 예제, 설명 1

 

예를 들어 영화 제목이라고 부르는 변수가 문자열이라고 지정합니다. 타입 애너테이션(annotation)으로 타입을 선언해 줄 수 있습니다. 보시다시피 직관적입니다. 변수 이름 뒤에 콜론(:)을 적고 타입을 적어주면 됩니다. 첫 번째로 볼 타입은 문자열(string)입니다. 즉, const myAwesomeVariable: string은 TypeScript에게 이 변수가 문자열이라는 걸 알려주고 'So Awesome!'과 같다고 말해줍니다.

다시 말하자면 이 구문에서 등호 왼쪽에 타입을 써줍니다. let, const, var 등으로 변수의 이름을 선언하고 그 뒤에 콜론(:)과 타입을 씁니다. 타입은 숫자, 불리언, 문자열이나 undefined 등 원하는 걸 쓰면 됩니다.

 

 

TypeScript : 타입 애노테이션 : 개념, 예제, 설명 2

 

문자열은 JavaScript에서와 마찬가지로 텍스트를 의미합니다. 주의하실 점은 모두 소문자여야 한다는 것 뿐입니다. string의 s는 대문자 아니라 소문자여야 됩니다. VS Code에 variables.ts라는 파일을 하나 생성해 줍니다. 그리고 첫 번째 변수를 만들어 봅니다. let movieTitle을 적어주고 타입으로 string을 적습니다. 

이제 등호(=)와 "Amadeus"를 써줍니다. 여하튼 이렇게 movieTitle을 하나 적어줬는데, 마우스를 올려보면 VS Code 편집기가 문자열이라는 걸 알려줍니다. 원한대로 movieTitle이 문자열 변수가 됩니다. "Arrival"과 같이 다른 문자열로 영화 제목을 바꿀 수도 있습니다. 하지만 문자열이 아닌 숫자를 적으면 오류를 표시하지 않는 JavaScript와 달리 TypeScript은 오류가 있다고 표시합니다.

경고하는 빨간 밑줄을 표시하고 '숫자 타입은 문자열 타입에 배정할 수 없다'라고 알려줍니다. '왜 문자열이라고 해놓고 숫자를 적는 거야?'라고 물어봅니다.

 

// String Variable With Explicit Annotation
let movieTitle: string = "Amadeus";
movieTitle = "Arrival";
movieTitle = 9; //This results in an error!
movieTitle.toUpperCase();

 

변수를 만들고 콜론(:)을 사용해서 문자열 타입을 지정합니다. 이렇게 하면 TypeScript이 인식하고 지정한 타입과 다른 걸 쓰면 오류가 있음을 알려줍니다. 추가로 TypeScript은 이제 해당 변수에 문자열이 들어가야 함을 알고 문자열 타입에 쓸 수 없는 메서드나 프로퍼티를 쓰면 오류를 표시합니다.

예를 들어 Python에서 쓰이는 upper 메서드를 써봅니다. 다시 upper 메서드를 쓰면 빨간 줄로 오류가 있음을 알리고 '문자열 타입에는 없는 프로퍼티'라고 오류 내용을 알려줍니다. TypeScript에서 문자열이라는 걸 지정하면 어떤 게 가능한지 알려줍니다.  upper은 안되고 toUpperCase는 되지만 여기에도 오타를 만들어주면 오류를 표시하면서 오타가 있지 않냐고 물어봅니다.