✅ 아래의 코드를 숫자 or 문자가 가능한 array/object 로 지정해보시오.
let member :number[] = [1,'2',3];
let object :{a:string} = {a:'123'}
💻My Code
let member: (number | string)[] = [1, "2", 3];
let object: { a: string | number } = { a: "123" };
let str: any = 'hi'
let num: any = 10;
let arr: any = ['a',2, true];
let name: any;
name = 123;
name = {};
let name: unknown;
name = 123;
name ={};
let name1:string = name; // error. name1은 string만 가능하다. type shield가 발동하기 떄문.
let name: unknown;
name - 1 //error. unknown은 number type이 아님.
let name : string | number;
name +1; // error
let name1 :unknown =1;
name -1; // error
타입스크립트는 앞서 말했던대로 매우 엄격하다📐
변수 name의 타입은 string 혹은 number인 것이 아니라, string | number라는 또 다른 type을 만들어 낸것이다 (custom hook처럼?)
물론 string | number 타입일 때 string 혹은 number 타입이 허용되는것은 맞다.
또한 +연산자는 string, number type에서 모두 가능하므로 error가 발생하지 않을것 같다.
하지만 변수의 type이 string인지 number인지 확실히 정해지지 않은 상황에서 +1을 하니 error가 발생되는 것이다. 이 부분에서 새삼 엄격하다고 느꼈다...🤣
js에서는 "문자" + 숫자일 경우 문자 type이 되지만 TypeScript에서는 "문자" +숫자가 된다.
name1은 unknown 타입이기 때문에 error가 발생한다.
✅ Q1. 변수 4개에 타입을 지정해보시오.
let user = 'kim';
let age = undefined;
let married = false;
let 철수 = [user, age, married];
💻First Code
let user: string = "kim";
let age: unknown = undefined;
let married: boolean = false;
let name: [string | unknown | boolean] = [user, age, married];
export {};
💻Second Code
let user: string = "kim";
let age: undefined = undefined;
let married: boolean = false;
let name: (string | undefined | boolean)[] = [user, age, married];
export {};
✅ Q2. 학교라는 변수에 타입을 지정해보시오.
let 학교 = {
score : [100, 97, 84],
teacher : 'Phil',
friend : 'John'
}
학교.score[4] = false;
학교.friend = ['Lee' , 학교.teacher]
💻First Code
let 학교: {
score: (number | boolean)[];
teacher: string;
friend: string;
} = {
score: [100, 97, 84],
teacher: "Phil",
friend: "John",
};
학교.score[4] = false;
학교.friend = ["Lee", 학교.teacher];
export {};
💻Second Code
let 학교: {
score: (number | boolean)[];
teacher: string;
friend: string| string[];
} = {
score: [100, 97, 84],
teacher: "Phil",
friend: "John",
};
학교.score[4] = false;
학교.friend = ["Lee", 학교.teacher];
export {};
✅ string type일 때는 +연산자만 가능하다.
✅ union type을 사용하더라도 변수를 해당 union type에 맞는 type으로 확실히 지정해줘야 error를 방지할 수 있다.
✅ union type이 지정된 경우의 연산에 대한 개념이 헷갈렸다.
직접 코드를 치고 error를 확인해보니 헷갈렸던 개념을 다시 이해할 수 있었다.