변수 안에 값의 타입이 여러개 올 수 있다면 |
연산자를 사용하여 타입을 지정한다.
or
연산자 같은 느낌인데 이런 타입을 union type
이라고 부른다.
let name: string | number = 'jinkyung' ;
let name: string | number = '325' ;
let name: string | number = true ; 😡
위처럼 할당하는 순간 타입은 string 또는 number 중 하나로 변하고 두 타입만 타입으로 지정 가능하다.
let age: string | number
age + 1 ; 😡
자바스크립트에서는 문자에서도 +1이 가능하고 숫자에서도 +1이 가능하지만 위의 코드에서 오류가 난다. 그 이유는 타입스크립트는 굉장히 엄격하기때문에 변수의 타입이 확실해야 연산을 수행해준다.
⭐️ 변수 ? :number는 사실상 변수 : number | undefined와 같은 의미이다.
let member: (string | number)[] = [1, '2', 3];
let member1: string | number[] = [1, '2', 3]; 😡
배열에서 사용할때는 꼭 소괄호
로 union type을 묶어줘야된다. 그렇지 않으면 위에 예시를 봤을때 string타입 또는 number타입의 배열만 입력 가능하다는 의미가 되기때문이다.
let object: {a: string | number} = {a: 123};
object에서는 일반적으로 |
을 사용해서 union type을 사용하면 된다.
let 학교:
{score: (boolean | number)[];
teacher: string;
friend: string | string[]} = {
score: [100, 97, 84],
teacher: 'Phil',
friend: 'John',
};
학교.score[4] = false;
학교.friend = ['Lee', 학교.teacher];
boolean
도 들어가기때문에 (boolean | number)[]으로 지정해줬다.string
도 들어가지만 ['Lee', 학교.teacher]
이라는 string
타입의 배열도 들어가기때문에 string | string[]으로 지정해줬다.any타입은 모든 자료형을 다 허용해준다. 그치만 any를 사용하면 타입스크립트를 사용하는 의미가 없고, 타입관련 버그가 나도 잡아주지 않는다. 그래서 사용을 지양하는 것이 낫다.
any타입을 사용할때는 타입실드 해제문법이라고 생각하면 되고 일반 자바스크립트 변수처럼 만들고 싶을때 사용하면 된다.
let name :any;
name = 'jinkyung' ; 😙 -> string type
name = [] ; 😙 -> array type
any type과 비슷하게 모든 자료형을 허용해준다. 유연한 변수를 만들고 싶을 때 주로 사용하고, any type 보다 안전하다.
unknown 타입에 모든 자료를 다 집어 넣어도 그대로 unknown type을 유지하기때문 unknown type을 다른 곳에 넣으려고 하면 에러가 발생한다 (any type은 그렇지 않음)
let name :unknown;
name = 'jinkyung' ; 😙 -> unknown type
name = 12345 ; 😙 -> unknown type
위에 union tyoe에서 설명한 것처럼 타입스크립트는 엄격한걸 좋아해서 숫자 unknown type에서는 연산을 해주지 않는다.