5.30 TypeScript의 타입 포팅

JavaScript로 작성되어 있는 해당 코드들을 TypeScript로 포팅

 

/* 작성 후 터미널에
1. tsc src/index.ts
2. node src/index.js
를 입력하시면 확인할 수 있습니다. */

/* boolean형 */
let isDone = false;
let isShow = true;

console.log(isDone);
console.log(isShow);

/* 숫자형 */
let num1 = 7;
let num2 = 0.6878;

console.log(num1);
console.log(num2);

/* 문자형 */
let str = 'hello';

console.log(str);

/* 숫자형 배열의 타입을 정하는 2가지 방법 */
let list1 = [1, 2, 3];
let list2 = [1, 2, 3];

console.log(list1);
console.log(list2);

/* 문자형 배열의 타입을 정하는 2가지 방법 */
let list3 = ['banana', 'apple', 'mango'];
let list4 = ['banana', 'apple', 'mango'];

console.log(list3);
console.log(list4);

/* 튜플 */
let list5 = [1, 'banana', true];

console.log(list5);

/* 객체형 타입을 정하는 2가지 방법 */
let obj = {};
let obj2 = {
  name: 'kimcoding',
  age: 20,
  isDeveloper: true,
};

console.log(obj);
console.log(obj2);

 

/* 작성 후 터미널에
1. tsc src/index.ts
2. node src/index.js
를 입력하시면 확인할 수 있습니다. */

/* boolean형 */
let isDone: boolean = false;
let isShow: boolean = true;

console.log(isDone);
console.log(isShow);

/* 숫자형 */
let num1: number = 7;
let num2: number = 0.6878;

console.log(num1);
console.log(num2);

/* 문자형 */
let str: string = 'hello';

console.log(str);

/* 숫자형 배열의 타입을 정하는 2가지 방법 */
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

console.log(list1);
console.log(list2);

/* 문자형 배열의 타입을 정하는 2가지 방법 */
let list3: string[] = ['banana', 'apple', 'mango'];
let list4: Array<string> = ['banana', 'apple', 'mango'];

console.log(list3);
console.log(list4);

/* 튜플 */
let list5: [number, string, boolean] = [1, 'banana', true];

console.log(list5);

/* 객체형 타입을 정하는 2가지 방법 */
let obj: object = {};
let obj2: { name: string; age: number; isDeveloper: boolean } = {
  name: 'kimcoding',
  age: 20,
  isDeveloper: true,
};

console.log(obj);
console.log(obj2);

 

출력

 

 

 

 

 

💁‍♀️ 다음은 JavaScript를 TypeScript로 변환한 코드입니다. 알맞게 변환이 되었나요?

let shoes: Array<string, number> = ["Nike", 78, "Asics", 34];

 

 

🔈 해설

정답 X

제네릭 타입으로 배열 타입을 작성할 때, <> 안에는 하나의 인자만 들어갈 수 있습니다. 따라서 해당 코드는 알맞게 변환되지 않은 코드입니다. 따라서 해당 코드는 다음과 같은 내용의 에러를 발생하게 됩니다. Generic type 'Array<T>' requires 1 type argument(s).

유니온 타입으로 맞게 수정

let shoes: Array<string | number> = ["Nike", 78, "Asics", 34];

---

💁‍♀️ 다음은 JavaScript를 TypeScript로 변환한 코드입니다. 알맞게 변환이 되었나요?

let person: {name: string, age: number} = {
    name: "anna",
    age: 15,
    isDeveloper: false
}

 

🔈 해설

정답 X

객체 리터럴은 명시한 프로퍼티만 지정할 수 있습니다. 현재 명시된 프로퍼티는 name과 age입니다. 따라서 isDeveloper는 명시된 속성이 아니므로 에러가 발생합니다.

올바른 출력

let person: {name: string, age: number, isDeveloper: boolean} = {
    name: "anna",
    age: 15,
    isDeveloper: false
}

---

 

 

 

 🥨 TIL 

첨에 무슨말인가 했는데 할수록 재밌음 타입스크립트는 이런 재미인걸까

잘한점 코드 보고 무서워하지 않고 잘 풀었음

개선점 오타개선, 오류보고 침착하게 다시 보기, 시간분배 개선

배운점 타입스트립트의 타입을 작성하는 코드가 정말 한눈에 보기 좋은 코드란걸 몸으로 느꼈다. 포기하지 않고 계속 나아가길 잘했다.