[리액트 공부하기] typescript에 대해서 익숙해지기

let arr: [number, string, boolean] = [30, "따르릉", true];

console.log("<h3>배열 값 가져오기-1</h3>");
console.log(arr[0], "<br>");
console.log(arr[1], "<br>");
console.log(arr[2], "<br>");


console.log("<h3>배열 값 가져오기-2 </h3>");

for(var i : number = 0 ; i < arr.length; i++)
{
    console.log(arr[i], "<br>");
}


console.log("<h3>배열 값 가져오기-3</h3>");

for(const i in arr)
{
    console.log(arr[Number(i)], "<br>");
}

다음과 같은 typescript코드를 작성한다.

타입스크립트라는 것은 엄격한 타입검사를 거친 JS를 최종 결과로 제공한다.

결국, JS를 만드는 것이다.

npm install -g typescript

로 설치한 후

tsc -v

로 설치되었는지 확인해보자.

tsc --init

를 치면 tsconfig.json파일이 자동적으로 생성된다.

tsc -w

를 사용하면 감시모드로 파일의 변경을 감시하고 파일이 수정됨에 따라 자동적으로 재컴파일 하는 모드를 사용하게 되는 것 같다.

결과는 다음과 같다.

var arr = [30, "따르릉", true];
console.log("<h3>배열 값 가져오기-1</h3>");
console.log(arr[0], "<br>");
console.log(arr[1], "<br>");
console.log(arr[2], "<br>");
console.log("<h3>배열 값 가져오기-2 </h3>");
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i], "<br>");
}
console.log("<h3>배열 값 가져오기-3</h3>");
for (var i_1 in arr) {
    console.log(arr[Number(i_1)], "<br>");
}
변환된 JS는 위와 같다.

let arr_1 : [string, string , string, string] = ["사당", "교대", "방배", "강남"];
let arr_2 : (string)[]  = ["사당", "교대", "방배" , "강남"];
let arr_3 : any[] = ["사당", "교대", "방배", "강남"];

interface DataPoint{
    id: number; 
    name: string;
    isActive : boolean;
    meta: Record<string, any>;
}



let arr_4 : DataPoint[] = 
[
    {id : 1, name : "사당", isActive : true, meta: {line:2}},
    {id: 2, name: "교대", isActive: false, meta: { line: 3, openedAt: "1983-09-01" } },
    {id : 3, name: "방배", isActive: true, meta : {배고파: true, 치킨사줘: "good!"}},
];

console.log(arr_4[2]?.meta["배고파"]);
console.log(arr_4[2]?.meta["치킨사줘"]);

type Student = "초등학교" | "중학교" | "고등학교" | "대학교";

let 공교육 : Record<Student, number> = {
    초등학교 : 6,
    중학교 : 3,
    고등학교 : 3,
    대학교 : 4,
}



// 바깥 루프: 단계, 안쪽 루프: 연차
for (const 단계 in 공교육) {
    const 년수 = 공교육[단계 as Student]; // 타입 단언 필요
    for (let i = 1; i <= 년수; i++) {
        console.log(`${단계} ${i}년 소요`);
    }
}

as는 타입 단언이라고 한다.

for(const 단계 in 공교육)에서 단계는 항상 string 타입으로 추론됨.

(왜냐면 JS의 for … in은 객체의 키를 전부 “문자열”로 다루기 때문임.)

그런데 공교육의 키 타입은 “초등학생” | “중학생” | “고등학생” | “대학생” 이라는 리터럴 유니온 타입

TypeScript는 string이 “초등학생” | “중학생” | “고등학생” | “대학생”에 꼭 들어간다고 장담할 수 없음.

따라서 해결법은 여기서 "이 문자열은 Student 타입(초딩/중딩/고딩/대딩) 중 하나다"라고 개발자가 직접 보증하는 것

type Fruit = "apple" | "banana" | "orange";

let fruitPrices: Record<Fruit, number> = {
  apple: 1000,
  banana: 800,
  orange: 1200,
};


type Student = "초등학교" | "중학교" | "고등학교" | "대학교";

let 공교육 : Record<Student, number> = {
    초등학교 : 6,
    중학교 : 3,
    고등학교 : 3,
    대학교 : 4,
}



// 바깥 루프: 단계, 안쪽 루프: 연차
for (const 단계 in 공교육) {
    const 년수 = 공교육[단계 as Student]; // 타입 단언 필요
    for (let i = 1; i <= 년수; i++) {
        console.log(`${단계} ${i}년 소요`);
    }
}

for (const [단계, 년수] of Object.entries(공교육)) {
  console.log(단계, 년수);
}

for (const [단계, 년수] of Object.entries(공교육)) {
  for (let i = 1; i <= 년수; i++) {
    console.log(`${단계} ${i}년 소요`);
  }
}