[TIL]231218_type vs interface

👩🏻‍💻 Today Learn

• 알고리즘 1문제
• Typescript과제 마무리 및 제출
• Next.js강의

---

🔐 알고리즘 문제풀이

문제) 행렬의 덧셈

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

풀이

function solution(arr1, arr2) {
    let answer = [[]];
    
    for (let i=0; i<arr1.length; i++){
       answer[i] = [];
     for (let j=0; j<arr1[i].length; j++){
        answer[i].push(arr1[i][j] + arr2[i][j])
        }  
      }
    return answer
    }


// push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
// answer를 [] 로 선언하면 배열변수를 하나 더 만들어야함..!

이 문제는 어떻게든 혼자 풀어보려고 하다가 결국 검색을 하고 말았다 ㅠㅠ

우선 배열안에 배열이라는 것이 어렵게 느껴졌고 answer를 이중배열로 선언해놓았는데 이걸 간과하고 첫번째 for문 다음에 let result = [] 를 또 넣은 후 push를 한번 더 해줬더니 맨 앞부분에 빈배열이 붙어서 나왔었다.

---

💡 알게된 내용

Typescript에서 객체타입 정의

- type

- interface

타입스크립트에서 타입을 정의하는 방법이 2가지 있는데 이 2가지는 비슷한 역할을 하지만 차이점이 존재한다.

(찾아보고 들은 내용을 적어보려고 하는데 틀린 부분이 있을 경우 댓글에 정정해주시면 감사할 것 같당 :)

공통점

// 대부분의 경우 구분하지 않고 사용해도 된다고 한다.
type Person = {
 name: string;
 age: number;
}

interface Person = {
 name: string;
 age: number;
}

// 둘 다 추가 속성과 함께 할당하면 동일한 오류가 발생한다.
const yeji: Person = {
 name: 'yeji',
 age: 20,
 email: 'yeahzzl@gmail.com'
};

// 이럴 경우 Person형식에 email이 없다는 오류가 발생한다

차이점

interface

1. 확장(상속)하는 법

• extends 키워드를 이용하여 확장할 수 있다.

interface Person = {
 name: string;
 age: number;
}

interface Adult extends Person {
 job: string;
}
  
const yeji: Adult = {
 name: 'yeji',
 age: 20,
 job: 'designer'
}

2. 선언적 확장

• interface는 선언적 확장이 가능하다.

interface Person {
  name: string;
  age: number;
}

interface Person { 
  gender: string;
}

const yeji: Person = {
  name: 'yeji',
  age: 20,
  gender: 'female'
}

3. 그 외 요약

• 객체에 대한 타입을 선언할 때만 사용할 수 있다.
• 확장 가능한 타입을 선언하고 싶을때 사용할 수 있다.
• 의도치 않게 암묵적으로 merge가 될 수 있다.
• 써야하는 코드가 길어진다.
• 불필요한 프로퍼티에 대한 접근이 여러페이지에서 한번에 될 수 있다.

---

type

1. 확장(상속)하는 법

• & 기호를 이용하여 확장할 수 있다.

type Person = {
 name: string;
 age: number;
}

type Adult = Person & {
 job: string;
}
  
const yeji: Adult = {
 name: 'yeji',
 age: 20,
 job: 'designer'
}

2. 선언적 확장

• type은 선언적 확장이 불가능하다.

type Person {
  name: string;
  age: number;
}

type Person { 
  gender: string;
}

// Error발생

3. 그 외 요약

• 모든 타입을 선언할 때 사용할 수 있다.
• 확장 불가능한 타입을 선언하고 싶을때 사용할 수 있다.
• 프론트엔드에서는 상태나 원시적인 타입을 중심으로 하기 때문에 type이 더 매력적으로 느껴질 수 있다.

---

✍🏻 회고

typescript이게 맞나..? 하고 있던 와중에 시작된 next.js.. 정신없지만 선택과 집중을 잘 해서 부족한 부분을 차근차근 채워넣어봐야겠다.
이것 저것 찍먹하다가 다 따라가기 버거워 하는 상황이 가장 최악일테니까