[엘리스 SW트랙 4기] 5주차 - Day 24 : 타입스크립트...

타입스크립트 너란놈... 
중독되면 못빠져나온다는데 난 중독 단계에 가기까지 한참 멀고 멀었다.

그래도 또 새로운거 배우니 신나는데, 머리에 집어넣을 양이 너무 많다. 허허허 24시간이 모자라
커피도 하루에 2잔~2.5잔씩 마시니까 뭔가 속이 울렁거린다. 근데 안마시면 졸려서 못견디겠다 어흑

tsconfig.json

• 타입스크립트 설정 파일 => 타입스크립트 코드를 ECMAScript버전으로 컴파일할 때 대상으로 할 ECMAScript 버전을 지정함.
• target : 타입스크립트 코드를 ECMAScript 버전으로 컴파일 할 때 대상으로 할 ECMAScript 버전을 지정
• compilerOptions : 타입스크립트 컴파일러의 옵션을 설정
• include :컴파일할 타입스크립트 파일의 경로 지정
• exclude: 컴파일하지 않을 타입스크립트 파일의 경로를 지정
• files : 컴파일할 타입스크립트 파일의 목록을 직접 지정
• extends: 다른 tsconfig.json파일에서 설정을 상속받음
• references: 프로젝트 간 종속성을 지정함.

선택적 매개변수

• 파라미터 중 맨 마지막에 두어야함.

초기화 매개변수

• 선택적 매개변수와 다르게 순서는 상관 없고, ?와 함께 쓸 수는 없음.

나머지 매개변수

• 마지막 매개변수에 위치해야함

클래스

• 오브젝트 말고 왜 클래스 쓰나요? >
  • 코드의 재사용성 높이기 위함
  • 구조가 동일한 객체를 복사하면? 단순히 복사되지 않고 참조가됨. 서로의 변경된 값이 반영됨.
• 함수가 리턴하지 않더라도, :void는 명시적으로 명세해주는 것이 좋음.

클래스 상속

• Class 클래스명 extends 부모클래스명 { }
• 장점
  • 코드 간결, 코드 재사용 가능
  • 유지 보수 용이
  • 계층 관계 표현 가능(B클래스가 A클래스에서 확장된 것이군!~)
• super
  • 자식 클래스의 생성자 코드에서 ㅎ사용함.
  • 생성자 뿐만 아니라, super.필드명, super.메소드명 으로 부모 클래스의 멤버에 접근 가능.
• 오버라이딩 : 자식 클래스는 부모 클래스의 필드나 메소드 재정의 가능.

class Base {
  greet() {
    console.log("Hello, world!");
  }
}
class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
} }
}
const d = new Derived();
d.greet();
d.greet("reader");

• 단, 부모클래스의 로직과 다른 타입이 지정되거나 할 경우는 규칙에 위배되어 에러 발생.

추상 메소드

• 자식 클래스에서 반드시 오버라이딩 해야만 사용할 수 있는 메소드
  -> 모듈처럼 중복되는 부분, 공통적인 부분은 미리 다 만들어진 것을 사용하고, 이를 받아 사용하는 쪽에서는 자신에게 필요한 부분만을 재정의하여 사용함으로써 생산성이 향상되고 배포 등이 쉬워진다.
• 선언은 되어있지만, 구현은 되어있지 않다.
• 메소드명, 파라미터, 접근제어자, 반환타입은 정의되어있음.
• abstract 키워드를 사용함.

추상 클래스

• abstract키워드를 사용.
• 추상 메소드도, 일반 메소드도 가질 수 있음.
• 바로 객체로 만들수 없으며, 이 추상 클래스를 extends한 클래스의 객체로 만들 수 있음.
• 추상 클래스를 extendsgks 클래스는 추상클래스의 추상 메소드를 모두 구현해야함.

인터페이스

• 변수나 함수, 그리고 클래스가 만족해야하는 최소 규격을 지정할 수 있게 해주는 도구 (설계도)
• 인터페이스에 선언된 멤버 또는 메소드를 무조건 구현해야함. -> 일관성 유지를위한것.
• 모든 메소드는 추상메소드임. 그러나 abstract 키워드를 사용하진 않음.
• 함수 파라미터의 타입으로 쓸수도 있음.

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}
let todos: Todo[] = [];
function addTodo(todo: Todo) {
  todos = [...todos, todo];
}

const newTodo: Todo = { id: 1, content: 'typescript', completed: false }; addTodo(newTodo);
console.log(todos)
// [ { id: 1, content: 'typescript', completed: false } ]

• 인터페이스는 직접 인스턴스를 생성할 수 없음.
• implements를 이용해서 구현.
• class 자식클래스명 implements 인터페이스명

• 선택적으로 필드를 가질수도 있음.

interface UserInfo {
  username: string;
  password: string;
  age?    : number;
  address?: string;
}
const userInfo: UserInfo = {
  username: 'ungmo2@gmail.com',
  password: '123456'
}

• 인터페이스는 인터페이스/클래스를 상속받을 수도 있음.

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

interface Student extends Person {
  grade: number;
}
const student: Student =  {
  name: 'Lee',
  age: 20,
  grade: 3

• 복수의 인터페이스 상속도 가능

interface Person {
  name: string;
  age?: number;
}
interface Developer {
  skills: string[];
}
interface WebDeveloper extends Person, Developer {}
const webDeveloper: WebDeveloper =  {
  name: 'Lee',
  age: 20,
  skills: ['HTML', 'CSS', 'JavaScript']
}

type과 interface의 차이

• 동일한 방법으로 선언 가능 (타입에 넣기)

• 동일한 방법으로 구현 가능 (implements)

• 확장(상속) : 둘 다 가능, 그러나 인터페이스는 선언적 확장이 가능.

• type vs interface?
  -> 복잡하게 확장에서 설정하겠다 --> 타입
  -> (현재는 복잡하지 않지만, 추후에 속성이 추가될 수 있다.) -> Interface

우아한 형제들 기술블로그 읽어보기.

extends vs implements

• extends : 원하는 클래스를 명시하면, 해당 클래스의 프로퍼티와 메서드를 따로 구현하지 않아도 인스턴스에서 자유롭게 사용 가능함. (이미 상위 클래스의 멤버가 포함되어있음!)

class Parent {
  public lastName: string = "An";
public speakKorean() { console.log(" ");
}
public eatWithChopsticks() { console.log(" ");
} }

class Child extends Parent {}

let child = new Child();
console.log(child.lastName); //안녕하세요
child.speakKorean(); //
child.eatWithChopsticks(); //젓가락으로 먹기

• implements

• 미리 추상화되어있는 인터페이스를 채택하여 사용하는 것
• 상속과는 다르게 implements로 어떤 인터페이스를 채택하면, 추상화 된 메서드나 프로퍼티를 반드시 구현해줘야함!!!!!

interface Person {
  name: string;
  think(): void;
  walk(): void;
  eat(): void;
}

class Child implements Person {
  name: string = "Fomagran";
  think(): void {
    console.log("생각한다");
  }
  walk(): void {
    console.log("걷는다");
  }
  eat(): void {
    console.log("먹는다");
  } 
}

• 면접 단골질문...!!!
  • class extends class => 가능
  • class extends interace => 불가능
  • interface extends interface => 가능
  • interface extends class => 가능(제약은 있음)
  • class implements class => 불가능.
  • class implements interface => 가능
  • interface implements interface => 불가능. 인터페이스가 구현되면 해당 메소드를 정의해야하는데 인터페이스는 정의할 수 없기 떄문..

• 내일 아침에 일어나서 마저 작성하기!