TypeScript : 지연된 초기화 및 암묵적 Any : 개념, 예제, 설명

지연 초기화와 암묵적 Any

타입 애너테이션이 필요하거나 유용한 경우에 대해 다뤄보겠습니다. 초기화와 별도로 변수를 선언하는 경우입니다. 이미 이런 경우를 보셨거나 직접 마주하셨을 수도 있습니다.

 

 

const movies = ["Arrival", "The Thing", "Aliens", "Amadeus"];
let foundMovie: string;

for (let movie of movies) {
  if (movie === "Amadeus") {
    foundMovie = "Amadeus";
  }
}

 

예시

영화의 목록을 검색하는 변수가 하나 있다고 해봅시다. movies라는 변수를 만들고 여기에 문자열을 배열로 추가해 줍니다. 이전에 사용한 Arrival부터 The Thing과 Aliens 그리고 진짜 명작인 Amadeus도 추가해 줍니다.  이제 이 영화 목록에서 검색을 통해 Amadeus를 찾습니다. 이를 위해 foundMovie라는 변수를 추가합니다. 그럼 처음에 어떤 타입의 값을 할당해 줄까요?

빈 문자열이나 숫자 불리언 값을 넣을 수도 있지만 값을 지정하지 않는 경우도 많으니 정의하지 않은 변수로 진행해 보겠습니다. 그러면 변수 아래 어느 부분에서는 값을 주게 될 텐데 상황을 억지로 만드는 것 같긴 하지만 for 문과 if 문으로 Amadeus 문자열과 동일한 경우를 써봅니다. 

foundMovie와 movie에 둘 다 Amadeus 문자열과 같습니다. 앞서 변수를 애너테이션 처리하지 않았습니다. TypeScript가 무슨 타입으로 추론하는지 마우스를 올려봅니다. any 타입이라고 추론하고 있습니다. 아래에서 문자열로 설정했지만 처음에 설정된 것처럼 any 타입인 것입니다.

물론 any 타입이기 때문에 foundMovie 변수를 함수처럼 호출하거나 문자열이 아닌 타입을 할당하거나 존재하지 않는 메서드에 접근하는 코드를 작성할 수는 있지만 실제로 JavaScript로 컴파일하고 실행하게 되면 오류가 발생합니다.

TypeScript이 이런 오류를 막지 못합니다. TypeScript의 핵심 기능인 타입에 관한 기능을 놓치는 것입니다. TypeScript이 타입 문제를 다시 해결할 수 있게 하려면 어떻게 해야 할까요?  우선적으로 타입 확인을 막는 근원인 any 타입의 사용을 멈춰야 합니다. 그리고 마우스를 올리면 약간에 힌트가 나옵니다. 변수가 암시적으로 any 타입이라 추론하고 있으니 직접 할당하는 게 더 좋아 보입니다. TypeScript의 현재 추론의 결과가 별로여서 이렇게 말합니다. 

이 때 필요한 게 타입 애너테이션입니다. foundMovie를 문자열이라고 할당합니다. 그리고 이제 마우스를 변수에 다시 올려보면 문자열이라고 나옵니다. 이제 TypeScript은 정상적으로 오류가 발생하면 표시해 줍니다. 문자열이니까 숫자와 같다고 할 수 없고 함수로도 호출할 수 없습니다. 즉, 암시적으로 any 타입으로 할당을 막기 위해서 타입 애너테이션이 중요하게 작동합니다.

 

TypeScript : 지연된 초기화 및 암묵적 Any : 개념, 예제, 설명