23.05.31 웹개발_Typescript (Enum, Interface, 타입별칭, 타입추론, Class)

회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각

웹개발_Typescript 수업 후기

Typescript를 공부하는것이 크게 어렵지 않아서 오늘도 괜찮았다. 내일 제내릭이남아있어서 복병이 되진 않을까 조금의 불안함은 있지만 그래도 오늘까지는 괜찮았기에 마음편히 넘어갈 수 있을거같다. 어제 공부했던 부분을 복습해보면서 공부를 하다보니 어제 공부한것도 잊지 않고 계속 생각할 수 있었다.

기억나는 단어들 나열해보기

1. Enum
2. Interface와 상속
3. 타입 별칭
4. 타입 추론
5. Class와 상속

1. Enum이란?

Enum(열거형)으로 불리며 Javascript에서는 지원하지 않지만 Typesctipr에서는 지원하며 특정 값의 집합을 정의할때 사용된다.
문자형, 숫자형 둘다 지원되며 디폴트 값으로는 숫자형을 사용하며 숫자를 수동으로 지정해주지 않으면 자동으로 0부터 시작하여 1씩 증가한다.

Typescript에서는 상수값을 직접 적는 대신 Enum 집합으로 정의하여 사용한다.
가독성을 높게 만들어주며 오타를 방지해준다.

문자형 Enum도 개념적으로는 거의 비슷하며 옳바르게 사용하기 위해서는 값을 전부 문자형으로 지정해줘야한다. 숫자형과 다르게 디폴트 값이 없으며 자동으로 지정되지도 않는다는게 차이점이다.
문자형 Enum은 주로 외부에서 가져온 값을 Typescript에서 다루기 위해 사용되는데 좋은 예시로는 HTTP요청 방식을 나타내는 정의를 할 수 있다.

2. Interface

Interface 또한 javascript에서는 지원하지 않지만 Typescript에서는 지원해주는 것이며 타입 체크를 위해 사용된다. Interface는 변수, 함수, 클래스에 사용할 수 있으며 선언된 프로퍼티, 메서드의 구현을 강제하여 일관성을 유지하도록 한다.
만약 정의된 프로퍼티보다 적게 작성하거나 많이 작성했다면 에러가 난다.

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

//정상적으로 선언되는 예시, 프로퍼티의 순서는 지키지 않아도 됨
const user: User = {
  name: "anna",
  age: 20
}

//정상적으로 선언되지 않는 예시
const user: User = {
  name: "anna"
}

const user: User = {
  name: "anna",
  age: 20,
  job: "developer"
}

//age에 ?연산자를 사용하여 선택적 프로퍼티를 작성할 수 있으며, 선언할때 없어도 정상 선언됨
interface User {
  name: string;
  age?: number;
}

const user: User = {
  name: "anna"
}

Interface로 함수를 정의할 수도 있으며 매개변수 타입과 반환 타입도 정의할 수 있다.

Interface로 메서드를 정의하고 Class에서 사용할 수 있다.

1) Interface의 상속

Javascript에서 클래스를 확장할때 extends 키워드를 사용해서 기존에 존재하던 클래스를 상속해 새로운 클래스를 정의할 수 있듯이 Typescript에서도 extends 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.

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

interface Developer extends Person {
  language: string;
}

const person: Developer = {
  language: "TypeScript",
  age: 20,
  name: "Anna",
}

//이처럼 여러 Interface를 상속받아서 확장할 수도 있다.
interface FoodStuff {
  name: string;
}

interface FoodAmount {
  amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount {
  isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

타입 단언이라고 하는 {} as를 사용하여 객체를 특정한 타입으로 타루고 있다는것을 알려주는것이다.
컴파일러가 해당 객체에 대해 해당 타입의 프로퍼티와 메서드를 사용할 수 있다고 가정하도록 하는것이다.
타입 단언은 일반적으로 컴파일러가 타입을 추론할 수 없는 상황에서 사용되며, 개발자가 타입을 명시적으로 지정하고 싶을 때 유용하게 사용할 수 있다. 하지만 타입 단언을 남용하면 타입 안정성을 저하시킬 수 있으므로 신중하게 사용하는것이 좋다.

3. 타입 별칭

타입 별칭은 타입의 새로운 이름을 만드는 것이다.굳이 사용할 필요가 있을까? 라고 생각할 수 있지만 아래의 예시를 본다면 사용하므로서 가독성을 높일 수 있다는것을 알 수 있을것이다.

type Person = {
  id: number;
  name: string;
  email: string;
}

//Commentary 인터페이스에서 Person 타입을 참조
interface Commentary {
  id: number;
  content: string;
  user: Person;
}

//객체에서 Commentary 인터페이스를 참조
let comment1: Commentary = {
  id: 1,
  content: "뭐예요?",
  user: {
      id: 1,
      name: "김코딩",
      email: "kimcoding@codestates.com",
  },
}

이렇게 보면 Interface와 다를게 없다고 생각할 수 있지만 미묘한 차이점이 있는데 Type을 참조한 객체에 마우스를 올리면 내부에 어떤 프로퍼티들이 정의되어 있는지 보이지만 Interface를 참조한 객체는 보여주지 않는다.

또한 타입 별칭은 말 그대로 타입에 새로운 이름을 부여하는것이기에 확장이 되지 않는다 하지만 Interface는 확장이 가능하며 타입 별칭으로 만들어진 타입 또한 상속할 수 있어서 보다 더 유연한 코드 작성을 할 수 있다.

4. 타입 추론

타입 추론이란 Typescript의 기능으로서 코드 작성에 도움을 준다.
쉽게 말하면 Typescript가 똑똑하다고 할 수 있다 작성한 코드를 통하여 어떤 값이 출력될지 유츄하는것이다.
하지만 추론이 잘못될 경우에는 코드 오류가 발생할 수 있으며, 명시적인 타입 지정이 필요한 경우에 타입 추론만으로 부족한 경우가 있다. 특히 복잡한 함수나 객체의 경우에는 명시적인 타입 지정이 필요하다.
따라서 타입 추론은 Typescript의 장점 중 하나이지만 때에 따라 명시적인 타입 지정이 필요한 경우도 있다.

5. Class와 상속

Javascript와 동일하게 Typescript에서도 클래스(Class)를 사용하여 객체를 생성하고 속성과 메서드를 정의할 수있다.

class Person {
  //상단에 정의를 해줘야 함.
  name: string;
  age: number;
  //constructor 내부 인자로 받을 때도 정확히 타입을 명시해줘야 함.
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // "안녕하세요, 제 이름은 Alice이고, 30살 입니다."

1) Class의 상속

Interface와 마찬가지로 기존에 존재하던 클래스를 상속받아 확장하여 새로운 클래스를 만들 수 있다.
이때도 extends 키워드를 사용하면 된다.

class Animal {
  move(distanceInMeters: number): void {
      console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

class Dog extends Animal {
  speak(): void {
      console.log("멍멍!");
    }
}

const dog = new Dog();
dog.move(10);
dog.speak();

여기서 Animal 클래스는 기초클래스, 상위클래스라고 불리며 Animal 클래스로 부터 프로퍼티와 메서드를 상속받은 Dog 클래스는 파생 클래스, 하위클래스라고 불린다.

public, private 키워드

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 디폴트 값이다. 공개됨을 명시적으로 표시해줄 수 있는 키워드가 public 키워드이며, 외부로 드러내지 않고싶은 멤버가 있다면 private 키워드로 명시해주면 된다.

readonly 키워드

readonly 키워드를 사용하면 읽기 전용으로 만들 수 있으며 선언 또는 생성자에서 초기화해야하므로 변경되면 안될 값을 보호할 수 있다.

오늘은 어제에 이어서 Typescript를 공부하였다. 헷갈리는 부분들은 있었지만 완전히 새로운 개념처럼 느껴질 정도로 어렵지 않았고 오히려 javascript의 한계를 도와주기위해 자연스럽게 등장했다는것이 이해가 되었다. 내일 Typescript를 공부하는 마지막날이니 내일까지 화이팅!