[💻 코드스테이츠 FE 44기]TypeScript - 2

✔️ 시작

타입스크립트 문법 중 열거형, 타입 별칭, 타입 추론, 클래스에 대해 학습했다.

---

📍 알게 된 점

✔️ 숫자형 열거형(Enum)

• 특정 값의 집합을 정의할 때 사용된다.
• 숫자형, 문자열 또는 이 두가지의 조합으로 정의될 수 있다.
• 기본 값은 숫자 형을 사용한다.
• 각 값은 자동으로 0부터 시작해 1씩 증가한다. (수동으로 값을 지정할 수 있다.)

enum Figure {
  Circle,
  Triangle,
  Square,
}

//수동으로 값을 지정할 수 있다.
enum Figure {
  Circle = 1,
  Triangle = 3,
  Square = 4,
}
  
let f: Figure = Figure.Circle;
let triangleValue: number = Figure.Triangle;
let squareValue: number = Figure.Square;

console.log(d);          // 출력: 1
console.log(triangleValue);  // 출력: 3
console.log(squareValue);   // 출력: 4

• 일반적으로 상수값을 대신해 사용하므로 타입스크립트에서는 열거형을 많이 사용한다.
• 코드를 더욱 가독성 높게 만들어 주고, 오타와 같은 실수를 방지해 준다.

역 매핑 (Reverse mappings)

• 숫자형 열거형에만 존재하는 특징(문자형 열거형에서는 존재하지 않는다.)
• 열거형의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있다.

//열거형의 키로 값을 얻을 수 있지만, 값으로도 열거형의 키를 얻을 수 있다.
num Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

✔️ 문자형 열거형(Enum)

• 숫자형 열거형과 개념적으로 비슷하다.
• 열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 한다.

enum Figure {
  Circle = "Circle,
  Triangle = "Triangle",
  Square = "Square",
}

//myFigure를 Figure.Circle으로 초기화 하고 있다.
let myFigure: Figure = Figure.Circle;
console.log(myFigure); // 출력: "Circle"

문자열 기반의 열거형은 주로 외부에서 가져온 타입스크립트에서 다루기 위해 사용한다.
(ex - HTTP 요청 방식을 나타내는 열거형을 정의할 수 있다.)

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}
function makeRequest(url: string, method: HttpMethod) {
  // ...
}
//HTTP 요청 방식을 지정할 때는 HttpMethod.Post와 같이 열거형 값을 사용
makeRequest("/api/data", HttpMethod.Post);

✔️ 인터페이스(Interface)

• 일반적으로 타입 체크를 위해 사용된다.
• 변수, 함수, 클래스에 사용한다
• 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제해 일관성을 유지해 준다.
• interface를 사용해 타입스크립트 인터페이스를 생성할 수있다.
• 확장(상속)이 가능하다. (유연한 코드 작성을 위해서 인터페이스를 이용해 만들어 필요할 때 마다 확장 할 수 있다.)

변수

interface User {
	name: string;
	age: number;
}
const user: User = {
	name: "anna",
	age: 20
}

• 프로퍼티의 순서를 지키지 않아도 정상적으로 선언된다.
• 정의된 프로퍼티보다 적게 작성할 경우 에러가 난다.
• 정의된 프로퍼티보다 많이 작성해도 에러가 난다.
• 인터페이스의 이름은 대문자로 시작한다. (네이밍 컨벤션)

interface User {
	name: string;
	age?: number;
}
const user: User = {
	name: "anna"
}

• 인터페이스 안의 모든 프로퍼티가 필요한 것은 아니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있기에 ? 연산자를 사용하여 선택적 프로퍼티를 작성할 수 있다.

함수

• 객체의 프로퍼티 이름과 타입을 정의하고, 함수의 매개변수 타입과 반환 타입도 정의할 수 있다.

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

interface Greeting {
	(user: User, greeting: string): string;
}

const greet: Greeting = (user, greeting) => {
	return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

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

const message = greet(user, "Hi");

console.log(message);

상속

• extends 키워드로 기존에 존재하던 인터페이스를 상속해 확장이 가능하다.
• 기존에 존재하던 인터페이스의 프로퍼티를 다른 인터페이스에 복사하는 것이 가능하고, 인터페이스의 재사용성을 높여준다.

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

interface Developer extends Person {
    language: string;
}

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

• 여러 인터페이스를 상속 받아 확장 할 수도 있다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

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

✔️ 타입 별칭(Type Aliases)

• 타입의 새로운 이름을 만드는 것이다.(새로운 이름으로 기존의 타입을 참조하는 것을 의미)
• type사용한다.

type MyString = string;

// myString과 string은 동일한 의미를 갖게 된다.
// string 타입처럼 사용 가능
let str: MyString = 'hello world!';

• 코드를 더 간결하고 가독성 좋게 만들 수 있다.
• 복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용해 가독성을 높일 수 있다.
• interface와 달리type으로 작성된 경우 어떤 프로퍼티들이 정의 되어 있는지 확인할 수 있다.

✔️ 타입 추론(Type Inference)

• 변수나 함수의 타입을 선언하지 않아도 타입스크립트가 자동으로 유추하는 기능이다.

//타입스크립트는 자동으로 문자열로 추론한다. 
let isString = "Hi";

• 최적 공통 타입 (Best common type)
  여러 표현식에서 타입 추론이 발생할 때 해당 표현식의 타입을 사용해 최적 공통 타입(Best common type)을 계산한다.
• 문맥상의 타이핑(Contextual Typing)
  문맥상으로 타입을 결정하는 것 (코드의 위치(문맥)를 기준으로 일어난다.)

장점

• 코드 가독성 향상
  타입 추론 사용 시 코드의 가독성이 향상된다.(명시적으로 타입을 지정하지 않아도 코드에서 변수의 타입을 알 수 있기 때문)
• 개발 생산성 향상
  코드 작성 시간을 단축할 수 있다.(명시적으로 타입을 지정하지 않아도 타입스크립트가 자동으로 타입을 추론하기 때문)
• 오류 발견 용이성
  코드의 오류를 반견하는 것이 쉬워진다.(타입스크립트는 변수나 함수의 타입을 추론해 타입 검사를 수행하기 때문)

단점

• 타입 추론이 잘못될 경우 코드 오류 발생
  타입 추론은 타입스크립트가 자동으로 수행하는 것이기에 추론이 잘못 될 경우 코드 오류가 발생한다.
• 명시적인 타입 지정이 필요한 경우가 있다.
  타입 추론만으로 부족한 경우가 있다. 복잡한 함수나 객체의 경우에는 명시적인 타입 지정이 필요하다.

✔️ 클래스(Class)

• JavaScript의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다.
• 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.
• constructor를 이용해 초기화하는 멤버들은 전부 상단에서 정의해야 한다.
• contructor 내 인자로 받을 때 정확한 타입을 명시해야 한다.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`${this.name}이고, ${this.age}살 입니다.`);
  }
}

상속(Inheritance)

• interface와 동일하게 기존에 존재하던 클래스를 상속받아 확장해 새로운 클래스를 만들 수 있다.
• extends를 사용해 상속한다.

//Animal = 기초 클래스, 상위클래스
class Animal {
    move(distanceInMeters: number): void {
        console.log(`${distanceInMeters}m 이동했습니다.`);
    }
}

//Animal클래스를 Dog클래스가 상속
//Dog 클래스는 Animal 클래스 부터 프로퍼티와 메서드를 상속
//Dog = 파생 클래스, 하위클래스
class Dog extends Animal {
    speak(): void {
        console.log("멍멍!");
    }
}

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

public, private, readonly

public, private

기본적으로 클래스 내에 선언된 멤버는 외부로 공개되는 것이 기본 값이다.

• 공개 된다고 명시적으로 표시해 줄 수 있는데 이 때 public을 사용한다.
• 외부에 드러내지 않을 멤버가 있는 경우 private를 사용한다.

class Person {
  public name: string; //공개할 경우
  private age: number; //공개하지 않을 경우

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`${this.name}이고, ${this.age}살 입니다.`);
  }
}

readonly

• 프로퍼티를 읽기 전용으로 만들 수있다.
• 읽기 전용 프로퍼티는 선언이나 생성자에서 초기화해야한다.
• 변경되면 안 될 값을 readonly로 명시하여 보호할 수 있다.

//name은 readonly로 명시되어 있기에, 변경할 수 없다.
class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

---

✏️ 마치며

짧은 시간 내에 학습하려고 하니 잘 이해가 되지 않는 부분이 많고
그냥 아 그런 식으로 진행이 되는 구나... 정도로 학습했다.
시간 투자를 해서 제대로 공부해야할 것 같다...ㅠ