타입을 미리 정하기 애매할때 시리즈입니다.
전에 string | number 와 같은 타입을 union type 이라고 했습니다.
두 자료형을 모두 허용합니다.(union Type 자체가 type 입니다. 두 자료형을 합친 개념이라고 쉽게 생각하면 쉽습니다.)
- union Type
let person: number|string = 20;
let person: number|string = '홍길동';
// object 예시
let obj: {a:string|number } = {a:'홍길동'}
let obj: {a:string|number } = {a:20}
// array 예시
let arr:(number|string)[] = [1,'2',3]
-
any
모든 자료형을 허용 해줍니다.
중요한 포인트는 , 컴파일러의 체크를 피해간다는 점입니다.
즉, 변수의 타입쉴드를 없앤다고 보면 됩니다. any를 쓰는순간 그냥 js가 되어버립니다.
어쩔수 없을때 사용합니다. any를 쓰면 타입스크립트를 쓰는 의미가 없으니까요!
- unknown
any랑 유사할수는 있지만 조금 더 안전합니다. 타입 쉴드가 동작하기 때문입니다.
let foo:unknown;
foo = 123; //가능
foo ='string' //가능
let foo2:string ;
foo2 = foo; // 불가능 string 자료형에 unknown자료형을 넣을수 없쥬
any를 사용하게되면 타입쉴드가 동작하지않습니다.
let foo:any;
foo = 123;
foo ='string'
let foo2:string;
foo2 = foo
any는 모든자료형이 가능하니까 대입이 되나보다~ 가 아니라 그냥 타입쉴드가 동작하지 않는구나 라고 생각하시면 됩니다!
타입스크립트는, 변수끼리 연산시, 엄격한 타입체크를 합니다.
예를들어, 자바스크립트 에서는, 1+'1' 과 , 1+1 모두 가능합니다.
그렇다면 아래 코드를 볼까요?
let age: string|number;
age+2 // 에러
그 이유는 , unionType은 string,number 둘중에 하나가 아닌, 그 자체가 자료형이기 때문입니다.
따라서 위 연산이 가능하려면 number인지 string 인지 타입을 명시적으로 지정해 주어야합니다.
이를 Narrowing, Assertion 을 통해 해결합니다.
애매~한 변수 타입을 한가지로 좁혀주는거죠!
Narrowing을 하기전 사전지식으로 함수는 어떻게 타입지정을 하는지 알아보겠습니다.
function foo(x:number):number{
return x*10
}
const foo = (x:number):number => {
return x*10
}
// 매개변수의 type, 함수 중괄호 전에 return type을 지정합니다. 매개변수가 들어올수도 있고, 안들어 올수도 있는경우는 ? 를 사용합니다.
const func = (x?:number):void => {
console.log(x)
}포인트! 옵셔널은 type | undefined와 같습니다.
즉, 위 의 옵셔널 코드는, 아래의 union type으로 번역됩니다.
const func = (x: number|undefined):void => {
console.log(x)
}
func(5)Q. 아래의 코드는 왜 안될까요?
const func = (x?:number):number => {
return x*20
}
func(5)맞습니다. x는 union type 이기 때문입니다.
간단히 함수까지 알아보았네요. 이제 Narowwing과 Assertion 을 해보겠습니다.
Narrowing
function func(x :number|string){
if(typeof x == 'number'){
return x+1
}else{
return x+'1'
}
}
function func(x :number|string){
let arr:number[] = [];
if(typeof x =='number'){
arr[0] = x;
}else {
}
}위의 예시처럼, x의 타입을 하나로 확실하게 정해줘야 에러가 뜨지않습니다.
현재 변수의 타입을 특정지을 수 있으면 모두 인정됩니다.
Narrowing을 판정해주는 대표적인 문법은 아래와 같습니다.
- typeof 변수
- 속성명 in object
- 인스턴스 instanceof 부모
Assertion
타입을 덮어씌우는것을 의미합니다.
function func(x :number|string){
let arr:number[] = [];
arr[0] = x as number; // if문을 안썼는데, 타입이 확정됩니다.
}Assertion의 용도는 아래와 같습니다.
1.Narrowing 할 때
따라서 아래와 같이 사용하면 안됩니다.
let num:number = 5;
num as string; //에러 마우스를 올리면 자세한 로그를 확인할수있음as 는 unionType과 같이 아직 확정되지않은 타입을 확정지을때 사용하는것 입니다.
2.무슨 타입인지 확실할 때
function func(x :number|string){
let arr:number[] = [];
arr[0] = x as number;
}
func('string')위 코드는 , 에러가 나야하지만 as로 number타입으로 덮어씌우기때문에,
에러캐치를 하지못합니다.
따라서 디버깅할때만 주로 사용하게 됩니다.
다음정리한 내용들은 다음 포스팅에서!
