[typescript 열거형,인터페이스,type,class]

열거형

enum NumberColor  {
  RED = 0,
  GREEN = 1,
  BLUE = 2,
};

enum StringColor {
  RED =  'red',
  GREEN = 'green',
  BLUE = 'blue',
};

 

인터페이스

// Todo 인터페이스를 작성합니다.
interface Todo {
  id: number;
  content: string;
  isDone: boolean;
}
// Todo 인터페이스를 타입으로 받는 todos를 완성합니다.
let todos: Todo[] = [];

// Todo 인터페이스를 타입으로 받는 addTodo를 완성합니다.
function addTodo(todo: Todo) {
  todos = [...todos, todo];
}

// Todo 인터페이스를 타입으로 받는 newTodo를 완성합니다.
const newTodo: Todo = {
  id: 1,
  content: 'learn typescript',
  isDone: false,
};

addTodo(newTodo);

console.log(todos);

 

인터페이스 상속

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;

 

const food = {} as FoodFreshness;

이 코드는 타입 단언(type assertion)을 사용하여 변수 food를 FoodFreshness 타입으로 지정하는 것을 의미한다.

타입 단언은 개발자가 컴파일러에게 "나는 이 변수가 특정 타입이다"라고 확신할 때 사용한다.

위의 코드에서는 빈 객체 {}를 FoodFreshness 타입으로 단언하고 있다.

하지만 빈 객체에는 FoodFreshness 인터페이스에 정의된 프로퍼티들이 존재하지 않으므로, 나중에 프로퍼티들을 추가해도 컴파일러는 이를 감지하지 못한다. 따라서 타입 단언은 주의해서 사용해야 한다.

 

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

//Student 인터페이스를 작성합니다.
interface Student extends User {
  gradle: number;
}

//Student 인터페이스를 받는 kimcoding을 완성합니다.
//kimcoding의 이름은 김코딩이고, 나이는 20세이며, 학년은 1입니다.
const kimcoding: Student = { name: '김코딩', age: 20, gradle: 1 };

console.log(kimcoding);

interface Color {
  name: string;
  brightness: number;
}

interface ClothesType {
  kind: string;
  length: number;
}

//Closet 인터페이스를 작성합니다.
interface Closet extends Color, ClothesType {
  season: string;
}

//Closet 인터페이스를 받는 skirt를 완성합니다.
//skirt는 노란색이며, 밝기는 0이고, 종류는 치마이며 길이는 5 정도로 중간이며 여름용입니다.
const skirt: Closet = {
  name: 'skirt',
  brightness: 0,
  kind: '치마',
  length: 5,
  season: '여름',
};

console.log(skirt);

 

 

타입 별칭(Type Aliases)

: 타입 별칭(Type Aliases)은 타입의 새로운 이름을 만드는 것이다. 

(새로운 이름으로 기존의 타입을 참조하는 것을 의미)

타입 별칭을 이용하여 타입의 새로운 이름을 만들 때 키워드 type을 사용하여 작성한다.

 

 

인터페이스 vs 타입 별칭

: 타입 별칭 또한 인터페이스와 같은 특징이 있기 때문에, 인터페이스의 역할을 타입 별칭이 수행할 수도 있다.

그러나 인터페이스와 타입 별칭에는 미묘한 차이점이 있다.

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

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

let kimcoding: Person = {
    name: '김코딩',
    age: 30,
}

let coding: User = {
    name: '김코딩',
    age: 30,
}

각각 마우스를 올려보면 type으로 선언한 kimcoding은 Person 타입 내부 프로퍼티가 보이고

반면 interface로 선언한 coding은 User 내부에 어떤 프로퍼티가 있는지 보이지 않는다.

 

따라서 타입 별칭으로 정의한 타입으로 작성할 시에는 조금 더 편하게 코드를 작성할 수 있다.

 

하지만 타입별칭으로 작성한 코드는 extends로 확장할 수 없다. 그러나 인터페이스는 가능하다.

터페이스는 기존의 인터페이스 및 타입 별칭으로 만들어진 타입 둘 다 상속할 수 있기 때문에, 유연한 코드 작성을 위해서는 인터페이스로 만들어서 필요할 때마다 확장할 수 있다.

 

type Todo = {
  id: number;
  title: string;
  isDone: boolean;
};
//Todo 타입을 사용해 객체를 정의합니다.
const show: Todo = {
  id: 1,
  title: 'lotus',
  isDone: true,
};

//Todo 타입을 사용한 객체를 출력해봅니다.
function getTodo(todo: Todo) {
  console.log(todo);
}

getTodo(show);

 

 

 

---

 

 

 

타입 추론(Type Inference)

: TypeScript는 타입 추론(Type Inference)이라는 기능을 통해 코드 작성을 도와준다.

 

타입 추론(Type Inference)은 변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능이다.

let isNumber = 123;

타입스크립트는 isNumber의 타입을 자동으로 숫자(Number)로 추론한다.

 

 

최적 공통 타입(Best common type)

let x = [0, 1, null];

 x 타입을 추론하려면 각 배열 요소의 타입을 고려해야 한다. 여기서 배열의 타입을 고를 수 있는 후보가 number와 null이다.

최적 공통 타입 알고리즘은 각 후보의 타입을 고려하여, 모든 후보의 타입을 포함할 수 있는 타입을 선택한다.

 

 

 

문맥상의 타이핑(Contextual Typing)

또 하나의 타입의 추론하는 방법은 문맥상으로 타입을 결정하는 것이다. 문맥상의 타이핑(타입 결정)은 코드의 위치를 기준으로 일어난다.

function add(a, b) {
  return a + b;
}

매개변수 타입을 지정하지 않았지만, 만약 a와 b가 모두 number 타입이라면, add 함수 반환값도 number타입으로 추론할 수 있다.

 

 

 

클래스(Class)

JavaScript의 클래스

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

 

TypeScript의 클래스

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}살 입니다.`);
  }
}

 

javascript와의 차이점은 TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다. 또한 contructor 내 인자로 받을 때도 정확히 타입을 명시해 줘야 한다.

 

 

클래스와 상속(Inheritance)

: TypeScript의 클래스(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();

 

 

public, private 키워드

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

그러나 명시적으로 표시해야 할 경우 아래와 같이 작성할 수 있다.

class Person {
  public name: string;
  public age: number;

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

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

외부에 드러내지 않을 멤버가 있다면 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 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 한다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러

위의 코드는 name을 readonly 키워드를 사용하였기 때문에  값을 변경할 수 없다.