[SEB_FE] 내가 보려고 작성하는 TypeScript(2)

seunghyo·2023년 5월 31일
0

SEB_FE

목록 보기
31/38
post-thumbnail

📍Enum


특정 값의 집합을 정의할 때 사용한다. 숫자형은 디폴트 값으로 , 각 값은 자동으로 0부터 1씩 증가한다. 수동으로 값을 지정할 수도 있다. 열거형은 코드의 가독성을 높여주고, 오타와 같은 실수를 방지해준다.

🗝️숫자형, 문자형 열거형

enum Color {
  Red,
  Green,
  Blue,
}
//숫자형
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}
//문자형
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

🗝️역매핑

숫자형 열거형에만 존재. 열거형의 키로 값을 얻을 수 있다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

📍 Interface


Interface는 자주 사용하는 타입들을 object 형태의 묶음으로 정의해 새로운 타입을 만드는 기능이다.

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


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

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언됩니다.
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

TypeScript에서 인터페이스는 객체의 구조를 정의하기 위해 주로 사용되는 예약어이다.

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

모든 프로퍼티가 필요하지 않을 때 ? 연산자를 사용하여 선택적 프로퍼티를 작성할 수 있다.

📍 Type Aliases


타입의 새로운 이름을 만드는 것. 새로운 이름으로 기존 타입을 참조한다.

type 이라는 키워드를 통해 타입을 지정해 주는 변수를 따로 만들 수 있다.
가독성 높은 코드 작성 가능 , 복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용하는 등의 장점이 있다. 타입 별칭으로 만들어진 타입을 참조할 때는 내부에 정의된 프로퍼티를 전부 참조해야만 한다. 인터페이스는 확장이 가능하지만 타입 별칭은 타입에 새로운 이름을 부여하는 것에서 그치기에 확장이 되지 않는다. 인터페이스는 기존 인터페이스 및 타입별칭 둘 다 상속할 수 있다.

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",
    },
}

📍 Class


  • 클래스의 속성과 메서드에 대한 타입을 명시할 수 있다.
    - TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다.
    - contructor 내 인자로 받을 때도 정확히 타입을 명시해야 한다.
class Person {
  // constructor 위에 선언
  private name: string;
  public age: number;
  readonly log: string;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

public , private 키워드를 사용하여 외부로 공개, 비공개 여부를 명시적으로 표시해줄 수 있다. readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

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 키워드
class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

0개의 댓글