2023_12_22 TIL

Node.js 주특기 플러스주차 [4일차]

 

오늘 한 일

 

지난 3일 + 반나절동안 스파르타 코딩클럽의 Typescript강의와 Nest.js 강의를 모두 완강하고 오늘 남은 반나절은 Udemy의 typescript 강의를 들으며 typescript를 복습하는 시간을 가졌다.

 

typescript를 다시 복습하며 확실하게 몰랐던 부분을 다시 짚으며 정리해보려고 한다. (강의 듣는 중간 중간 적어둔 부분이라 파편화되어 있긴 하다..)

 

 

TypeScript 강의 중 알게된 부분

 

• 터미널에 tsc <파일명.ts>하면 ts 파일을 컴파일해서 js 파일로 바꿔준다. 이 때, 타입스크립트에서 명시해뒀던 type은 사라지고 오래된 프로젝트와도 호환이 되는 js파일이 생성된다(babel 패키지와 비슷한 기능을 typescript에서 기본적으로 제공한다)
  이 과정에서 오류가 발생한다면 터미널에서 오류를 보여준다. 이 때, 컴파일이 중간에 멈추는 것이 아니라 컴파일은 그대로 실행된다.
  따라서 오류가 수정된 js파일을 만들고 싶으면 오류를 수정 / 저장하고 터미널에서 똑같이 tsc <파일명.ts>를 하면 된다.
•  

const $input = document.getElementById("num1");

위와 같이 html의 태그를 ts로 가져와서 사용할 때 쓸 수 있는 문법이 있다. 

const $input = document.getElementById("num1")! as HTMLInputElement;

typescript에서는 타입을 명시해주는 것이 중요하다. 

우선 HTML 태그를 가져오는 코드에서 " ! "를 붙이게 되면 무조건 값을 받아온다는 의미이다. 

추가적으로 as HTMLInputElement라는 것을 적어주게 되면 형태가 html의 input이라는 것을 명시적으로 나타내주는 것이다.

 

• 타입스크립트는 완벽하게 타입 추론이 가능하기 때문에 매개 변수나 함수 외에 함수 내의 동작구문에서 타입을 따로 할당하는 것은 좋은 방법이 아니다.
  
  
• string과 number를 가지고 있는 객체 타입을 object로 주면 에러가 난다. 객체 내부의 타입들은 value 값을 보고 자동으로 추론하는데 그냥 객체 전체를 object로 정의함으로써 구체적인 객체 내부의 타입들을 할당하지 않았기 때문이다.
  따라서 객체의 타입을 object로 줬을 경우에는 person.name처럼 person 객체안에 name 키가 있을 경우에도 그 값을 뽑아내지 못한다.
  따라서 객체 타입을 정의하고 싶을 때는 다음과 같은 두 가지 방법이 있다.
  첫 번째 방법은 직관적으로 볼 수 있게 객체의 타입을 볼 수 있게 정의해 놓았지만 좋은 방법이 아니다. 
  객체의 경우 Typescript가 자동으로 타입 추론을 해주기 때문에 굳이 써줄 필요가 없다(두 번째 방법이 더 좋다)
  
  

const person: {
  name: string;
  age: number;
} = {
  name: 'Maximilian',
  age: 30,
};

console.log(person.name);

const person = {
  name: 'Maximilian',
  age: 30,
};

console.log(person.name);

 

• 튜플
  : 데이터 타입, 배열의 길이가 고정된 배열 [2,"author"]이라고 했을 때 배열의 길이는 2로 고정되어야 하고, 0번 인덱스는 number, 1번 인덱스는 string이어야 한다.
  튜플의 type을 나타내고 싶다면 다음과 같이 쓰면 된다.

const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: [number, string]; // 튜플을 명시적으로 정의
} = {
  name: 'Maximilian',
  age: 30,
  hobbies: ['Sports', 'Cooking'],
  role: [2, 'author'], // 명시적으로 정의해주지 않았을 때는 (number |string)[]이라는 union 타입으로 타입스크립트가 자동으로 인식한다.
};

person.role[1] = 10;// 이런 코드에서 이와 같이 1번 인덱스에 숫자값을 넣으려고 하면 오류가 발생한다.

person.role.push('admin'); 
// 하지만 타입스크립트는 튜플에서의 push 오류를 인지하지 못한다.
// 튜플의 정의 상 배열의 길이가 고정되어야해서 push 메서드는 사용할 수 없지만
// 컴파일이 전혀 오류를 잡아내지 못한다.

person.role = [0,"admin", "user"] // 왼쪽과 같이 배열의 길이를 넘게 설정하는 오류는 잡아낸다.

 

하지만 push의 경우에도 오류를 방지하는 방법이 존재한다.

 

 

 

오늘의 과제

 

https://yoonchan1121.tistory.com/126

[디자인 패턴] 3가지 디자인 패턴으로 TypeScript 코드 작성해보기