코딩애플 Typescript -타입을 미리 정하기 애매할 때

문자 or 숫자 들어올수 있는 변수는 어떻게 만드나?

let 회원 : number | string = 123;
let 회원 : (number | string) = 123;

이런식으로 지정해주면 되는데 이걸 Union Type이라고 정한다. 타입을 2개 이상 합친 새로운 타입이다.

Union Type 으로 지정을 하고 값을 넣게 되면 회원이라는것은 더 이상 number 또는 string이 아니라 하나로 확정이된다.

하지만 회원1 =123 이런식으로 숫자값을 다시 넣어주면 타입은 number로 바뀔것이다.

숫자 or 문자가 가능한 array 타입 지정은?

1.let members :(number|string) [] = [1,'2',3];

2.let members :number|string [] = [1,'2',3];

let objects : {a:string|number} ={a:'123'};

1번처럼 소괄호로 묶어주면 number 또는 string만 넣어줄수있고 2번처럼 하면
number도 들어올수있고 혹은 string[] 즉 array가 들어올수도 있다는 뜻으로 되기때문에 소괄호를 잘 넣어줘야한다. 1번은 배열안 값이 문자 혹은 숫자가 가능이라는 뜻이고 , 2번은 숫자 혹은 문자배열이 들어간다 라는 뜻이 되기에 숫자와 문자가 같이 들어가지 못한다.

마지막 object값은 우리가 배운대로 | 을 이용해 변수 타입을 넣어주면 된다.

---

위 모든 과정이 귀찮다면? any라는 타입이 있다.

any라는 타입으로 설정해주면 모든 자료형을 허용해준다.즉 어떤 값이든 다 넣을수 있다는건데 간단한 변수에 설정하면 좋을거라고 생각할수도 있지만 이렇게 되면 Ts를 사용하는 의미가 없게 된다.

이렇게 되면 방패를 쓰지 않는것이다. any를 사용하면 버그가 생기거나 이상한 값이 넣게되면 캐치를 할수 없게된다.

이와 비슷한 unknown 이라는게 있는데 any보다 안전한 이유는 마지막에 넣은 값이 타입이된다.
현재 위 이미지는 {} 라는 오브젝트 값을 마지막에 대입했는데 만약 저기에
let 변수1 : string = 이름; 이런식으로 값을 대입하면 에러가 발생한다.

이렇게 이름이라는 변수는 오브젝트로 되어있는데 string값에 넣으려 하니 에러가 발생하는것이다.

---

js에서는 문자에서 숫자를 빼도 가능했는데 ts는 unknown타입이라도 연산은 되지 않는다 .엄격하게 검사하기 때문에 number타입이 아닌 unknown은 연산이 되지 않는다고 알려준다.

TS로 코드를 구성할때는 이상한 현상이 발생할수 있다. 이런식으로 나이라는 변수에 문자 또는 숫자가 들어간다고 설정했는데 에러가 발생한다 .

나이라는 변수는 number라는 타입이 아니라 string 또는 number라는 새로운 타입이 만들어진 거기 때문에 실행이 안된다. 두번째 또한 number타입이 아니라 불가능 하게 된다.

---

애플선생님의 참고..

(참고) 그래서 unknown 타입인 변수를 조작하려면
내가 조작할 변수의 타입이 무엇인지 확실하게 체크하는 narrowing 또는 assertion 스킬을 사용해야합니다.
그것이 타입스크립트의 근간이 되는 코딩방법이고
변수에 뭐가 들어있을지 아직 모르는데 그 변수를 사용하고 조작해야하는 경우
narrowing 또는 assertion을 반드시 사용해야 에디터가 지랄하지 않습니다.
좀 길어서 그건 뒤에 나오는 강의에서 알아봅시다.

숙제1) 다음 변수 4개에 타입을 지정해봅시다.

let user = 'kim';
let age = undefined;
let married = false;
let 철수 = [user, age, married];

let user:string = 'kim';
let age:undefined = undefined;
let married:boolean = false;
let 철수:(string|number|undefined|boolean)[] = [user, age, married];

---

숙제2) 학교라는 변수에 타입지정해보십시오

let 학교 = {
score : [100, 97, 84],
teacher : 'Phil',
friend : 'John'
}
학교.score[4] = false;
학교.friend = ['Lee' , 학교.teacher]

let 학교:{
    score : (number|boolean)[],
    teacher:string,
    friend:string|string[]
} = {
    score : [100, 97, 84],
    teacher : 'Phil',
    friend : 'John'
}

학교.score[4] = false;
학교.friend = ['Lee' , 학교.teacher]