Typescript Type Assertion. as 키워드 사용하기

Typescript Type Assertion. as 키워드 사용하기

 

안녕하세요!

오늘은 타입스크립트를 사용하다 보면 한 번씩 마주하게 되는 키워드 중 하나인 as 키워드에 관해서 말씀드리겠습니다.

타입스크립트는 자바스크립트와 거의 동일하지만 타입이 추가된 superset이라고 보시면 됩니다.

하지만 자유로운 자바스크립트와 달리 타입스크립트를 사용하면 자주 파라미터나 변수의 타입 때문에 머리가 아픈 경우가 한두 번이 아닙니다. 특히 한 오브젝트가 여러 가지 타입을 가질 수 있다면 더더욱 그렇습니다.

자 그럼 이제 as 키워드에 관해서 알아보겠습니다.

 

 

 

1. as 키워드란?
2. 사용방법?
3. 조심해야 되는 부분?
4. 마치며

 

 

1. as 키워드란?

 

as 키워드란 자바스크립트에는 없는 즉 타입스크립트에만 존재하는 키워드입니다.

타입스크립트에서는 Type Assertion이라고 칭하고 있습니다.

이는 변수나 오브젝트의 타입을 지정해 줄때 사용하게 됩니다.

특히 이 as 키워드는 컴파일러에게 직접적으로 이 변수 혹은 오브젝트의 타입은 이것이다!라고 명하는 것입니다.

앞서 언급하였듯이 가끔은 변수나 오브젝트가 여러 타입을 가지거나 혹은 A타입일수도 B타입 일수도 있는 경우가 있습니다.

아래의 코드를 보시겠습니다.

const arr: Array<string | number> = ['This is string', 1234];

위 코드의 경우 arr는 string 값을 가질 수도 혹은 number의 값을 가질 수도 있습니다.

const returnString = (arr: string[]) => {
    return arr.includes('This is string');
  };
  
  returnString(arr);

또한 위의 코드와 같은 함수가 존재하며 배열 arr는 함수의 파라미터로 값이 이용된다고 가정하겠습니다.

이러한 경우 위의 코드에서는 볼 수 없지만 분명 타입 에러를 나타낼것입니다.

그 이유는 즉 함수는 string으로 된 배열만 파라미터로 받고 싶어 하지만 배열 arr는 string일수도 혹은 number일수도 있는 애매한 타입이기 때문에 이러한 에러가 나타나게 될 것입니다.

이럴 때 사용 할 수 있는 키워드가 봐로 as입니다.

사용 방법을 보시겠습니다.

 

 

 

2. 사용방법?

 

as 키워드는 항상 값 혹은 오브젝트 뒤에 as라는 키워드를 사용하고 그다음 타입을 지정하시면 됩니다.

코드를 보겠습니다.

    const num = 10;
    const value = num as number;

자 위의 코드와 같이 num이라는 값 뒤 as 키워드를 사용하고 number라는 타입을 지정해 주었습니다.

이 경우 value는 num의 값을 number라는 타입으로 알고 받게 되며 컴파일 때에도 number라고 인식되고 사용됩니다.

하지만 이렇게 사용하지 않고 같은 결과를 가져올 수도 있습니다.

코드를 보겠습니다.

const num = 10;
const value = <number>num;

하지만 이 코드는 리액트와 같은 JSX를 사용하게 된다면 사용하지 않으시는 게 좋습니다.

제 컴퓨터의 경우 이를 타입으로 인식하지 않고 JSX Element로 인식하여 에러를 나타내기 때문입니다.

다른 컴퓨터에서는 어떻게 작동할지 모르겠지만 현재의 경우 as 키워드를 사용하는 것이 좀 더 모던한 방법이라고 할 수 있습니다.

 

또한 as 키워드는 여러 번 중첩되어 사용될 수 있습니다.

예를 들면 이렇게 말입니다.

const something = value as unknown as System;

이렇게 2번 3번의 여러 번의 as 키워드를 사용할 수도 있습니다.

하지만 실질적으로 그렇게 많이 사용되지는 않습니다.

 

 

 

3. 조심해야 되는 부분?

 

as 키워드가 타입을 지정해 준다는 것을 알았습니다.

그렇다면 항상 이러한 경우 as 키워드만 사용하는 것이 옳은 방법일까요?

as를 사용할 때 조심해야 되는 부분에 관해서 알아보겠습니다.

예를 들어 한 json 오브젝트를 생성하고 싶습니다.

이에 필요한 타입을 지정해 보겠습니다.

type SomeType = {
  a: number;
  b: string;
  c: boolean;
};

자 위의 코드를 보시면 json을 위해서 생성된 타입은 오브젝트이며 a, b 그리고 c라는 key를 가지고 있으며 각각의 값은 number, string 그리고 boolean입니다. 이때 타입에서 a,b 그리고 c 모두 optional이 아니기 때문에 이러한 타입을 활용한 json 오브젝트는 항상 3개의 값을 모두 가지고 있어야 합니다.

예시 코드를 보겠습니다.

const json: SomeType = { a: 10, b: 'hi', c: true };

이렇게 말입니다. 이때 a, b 그리고 c의 값이 모두 존재해야 하며 undefined일 수 없습니다.

이 중 하나의 값이라도 없거나 undefined라면 타입스크립트가 에러를 나타내게 될 것입니다.

 

하지만 이때 예시와 같은 as 키워드를 사용하여 작성한다면?

const json2 = { a: 10, b: 'hi', c: true } as SomeType;

const json3 = { a: 10 } as SomeType;

 

 

예상대로라면 json2는 문제없이 사용이 가능할 것입니다.

a, b 그리고 c의 값을 모두 가지고 있으며 as 키워드를 사용하여 타입을 someType으로 지정했기 때문입니다.

그리고 json3의 경우 에러가 떠야 합니다. 왜냐하면 someType이라는 타입은 a, b 그리고 c의 값을 모두 가져야 하는 타입이기 때문입니다.

하지만 실제로 코드를 작성하면 json3은 에러를 나타내지 않을 것입니다.

이게 as 키워드의 함정입니다. 실제로 이렇게 된다면 프로그램이 작동할 때 예상치 못한 에러를 마주하게 될 수 있으며, 이는 치명적일 수 있습니다. try 문법을 이용하여 문제가 발생 시 우회는 할 수 있겠지만 분명 이는 예상치 못한 버그를 불러올 수 있습니다.

자 IDE를 통하여 보더라도 json3는 a의 값만 충족하고 있지만 에러가 뜨지 않으며 실제로 json3가 가지고 있는 a의 값 이외에도 b와 c를 사용할 수 있다는 것을 알 수 있습니다. 이러한 함정은 알고 사용하는 것과 모르고 사용하는 것의 차이가 클 것입니다.

이렇기 때문에 사실상 as 키워드를 여기저기 남발하는 것보다는 좀 더 확실하고 명확한 타입들을 지정하여 as 키워드가 사용은 되더라도 그 빈도수가 많지 않게 하는 것이 좀 더 안전합니다.

 

 

 

4. 마치며.

 

자 오늘은 타입스크립트에서 사용되는  as 키워드에 관해서 알아보았습니다.

자바스크립트에서 타입스크립트로 넘어오면서 또한 ECMA 스크립트의 버전이 향상되면서 더 많고 생소하거나 처음 들어보는 키워드들이 많이 생기고 있습니다. 앞으로 이러한 새로운 키워드들도 조금씩 다루어 보도록 하겠습니다.

 

개발 실력이 하루아침에 일취월장할 수는 없겠지만, 꾸준히하시면 어느순간엔가 내가 짠 코드의 퀄리티가 높아졌다는 것을 아실 수 있으실 겁니다. 처음은 항상 어렵고 무섭습니다. 하지만 이러한 스트레스를 이겨내고 앞으로 나아갈지 아니면 그만두고 다른 일을 찾아볼지는 스스로의 마음가짐에 달렸다고 생각합니다. 스트레스를 이겨내고 앞으로 나아가는것도 그만두고 다른 일을 찾아 보는것도 그 중 어느것이 좋은방법이고 현명한 방법이다 라고 말할 수 는 없습니다. 하지만 스스로 결정할 수 있는 그 마음가짐이 항상 중요한 것 같습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.