이번 포스팅에서는 자바스크립트에는 없는 타입스크립트의 기본 타입 중 하나인 any 와 unknown 에 대해 설명해보겠습니다.
any와 unknown 타입은 안에 값이 유동적인 부분이 있다는 공통점을 가지고 있지만, 각각의 사용 목적과 특징이 다릅니다. 먼저 any 타입부터 알아보겠습니다.
🎯 any 타입
any 타입은 특정 변수의 타입을 우리가 확실히 모를때 사용할 수 있는 타입입니다.
예시와 함께 설명하겠습니다.
let anyVar = 10;
anyVar = "hello";이렇게 anyVar라는 변수의 값을 숫자 10으로 선언해줍니다. 그 나중에는 "hello"라는 문자열을 값으로 넣어준다는 가정하에 값을 넣어줍니다. 위의 코드를 복붙해서 한 번 확인해볼까요? 이러면 anyVar = "hello"; 이 부분에서 오류가 나는 것을 볼 수 있습니다. 왜냐하면 변수의 타입을 지정하지 않아도 초기화 하는 값의 타입으로 변수의 타입을 추론하기 때문입니다. 그래서 anyVar의 변수의 타입을 숫자로 추론하기 때문에 문자열을 넣으면 오류가 나는 것 입니다.
💡 그럼 여기서 자바스크립트처럼 타입에 상관 없이 변수를 담고 싶으면 어떻게 코드를 바꿔줘야할까요?
주목해주세요 ❗❗
let anyVar:any = 10; // <-- any 타입을 지정해줍니다.
anyVar = "hello";이런식으로 anyVar의 변수에 any을 지정해주면, anyVar = "hello";에서 났던 오류가 사라진 것을 볼 수 있습니다. 그래서 anyVar라는 변수에
anyVar = true;
anyVar = {};
anyVar = () => {};boolean이나 객체나 함수까지 넣을 수 있습니다. 심지어 모든 타입이 될 수 있기 때문에 문자열에서만 쓸 수 있는 toUpperCase()나 숫자형에만 있는 toFixed() 등 메서드도 자유롭게 쓸 수 있습니다.
anyVar.toUpperCase();
anyVar.toFixed();그리고
let num : number = 10;
num = anyVar;이렇게 넘버 타입의 변수를 만들어준 다음에 넘버 타입의 변수에 anyVar를 넣어줘도 오류가 나지 않습니다.
✔️ 정리하자면 any 타입은
- any 타입을 변수에 지정할 경우 모든 타입의 값을 할당 받을 수 있습니다.
- 반대로 모든 타입의 값에 any 타입을 넣을 수 있습니다.
하지만 모든 타입에 값을 넣을 수 있다고 해서 아무곳에서나 다 쓰면 타입스크립트를 하는 의미가 없겠죠? any 타입은 가능하면 최대한 사용하지 않는 것이 좋습니다.
이렇게 any 타입에 대해서 알아봤습니다.
이제 unknown 타입에 대해서 알아보도록 하겠습니다.
🎯 unknown 타입
unknown 타입은 기본적으로 any 타입과 비슷하지만 조금은 다릅니다.
예시와 함께 살펴 보겠습니다.
// unknown
let unknownVar : unknown;먼저 변수 unknownVar를 선어하여 unknown으로 지정해줍니다. 이제 unknownVar에 값을 할당해 볼까요?
// unknown
let unknownVar : unknown;
unknownVar = "";
unknownVar = 1,
unknownVar = () => {};위에 보시다시피 문자열이나 숫자 혹은 객체도 심지어 함수도 들어갈 수 있습니다. 이렇게 any 타입과 마찬가지로 어떤 타입이든 들어갈 수 있습니다. 만약 우리가 타입에 어떤 타입을 넣어야할지 모르겠다하면 any 타입을 쓰든 unknown 타입을 쓰든 둘 중 하나를 쓸 수 있습니다. ❗❗ 그럼 any 타입이랑 unknown 타입이랑 어떤 점이 다른 걸까요?
👉️ unknown 타입은 any 타입이랑 좀 다르게 모든 값을 저장할 수 있지만 반대로는 안됩니다.
무슨말인지 예시와 함께 더 살펴보겠습니다.
let num : number = 10;
num = unknownVar; // 오류가 남.아까 any 타입은 이렇게 써도 오류가 안났지만, unknown 타입은 이런식으로 다른 타입에 넣을 수 없습니다. 그리고
unknownVar.toUpperCase(); // 오류가 남.
unknownVar.toFixed(); // 오류가 남.이런식으로 문자열에서만 쓸 수 있는 toUpperCase()나 숫자형에만 있는 toFixed() 등 메서드, 그 외의 덧셈, 뺄셈 등 연산 자체도 쓸 수 없습니다. 만약 우리가 unknown 타입의 값을 활용하고 싶으면
if (typeof unknownVar === "number") {
num = unknownVar;
}이렇게 조건문으로 unknownVar 변수가 넘버 타입임을 밝혀주었을 때만 이런식으로 정제해서 사용할 수 있습니다.
✔️ 정리하자면 unknown 타입은
- unknown 타입은 모든 타입의 값을 할당 받을 수 있지만 반대로 다른 타입의 값에 unknown 타입을 넣을 수 없습니다.
- toUpperCase()나 toFixed() 등 메서드도 사용할 수 없습니다.
- 위와 같은 것을 사용하고 싶다면 if문으로 타입을 정제한 후에 사용할 수 있습니다.
⭐ 표로 한눈에 보기
| ---- | any | unknown |
|---|---|---|
| 모든 타입의 값을 할당 | o | o |
| 모든 타입의 값에 할당 | o | x |
| toUpperCase()나 toFixed() 등 메서드 사용 | o | x |
아무튼 any 타입과 unknown 타입은 변수의 타입으로 지정하면 모든 타입의 값을 할당 받을 수 있지만 any 타입은 반대로도 모두 가능하지만 unknown 타입은 반대로는 다 안됩니다. 그래서 만약 우리가 변수에 저장할 값의 타입이 확실하지 않다면 any 타입보다는 조금 더 안전한 unknown 타입을 사용하는 것이 좋습니다.
이렇게 any 타입과 unknown 타입에 대해서 정리해봤습니다.
이것으로 오늘 포스팅을 마치겠습니다.
위의 내용은 <한 입 크기로 잘라먹는 타입스크립트> 강의 내용을 참고하면서 작성했습니다.
