[TypeScript] 타입스크립트 기초 (4) - 이넘, 클래스

 

 이넘(enum)이란?

 

이넘은 특정 값들의 집합을 의미하는 자료형이다.

 

숫자형 이넘

enum Shoes {
  Nike,
  Adidas
}

var myShoes = Shoes.Nike;
console.log(myShoes); // 0

var myShoes2 = Shoes.Adidas;
console.log(myShoes2); // 1

문자형 이넘

enum Shoes {
  Nike = '나이키',
  Adidas = '아디다스'
}

var myShoes = Shoes.Nike;
console.log(myShoes); // '나이키'

이넘은 구체적인 값을 제안해줌으로써 이넘에서 제공되는 값만 넘겨 좀 더 정확한 코드, 예외처리 케이스가 줄어들 수 있다.

enum Answer {
 Yes = 'Y',
 No = 'N',
}

function askQuestion(answer: Answer) {
  if (answer === Answer.Yes){
    console.log('정답입니다');
  }
  if (answer === Answer.No){
    console.log('오답입니다');
  }
}

askQuestion(Answer.Yes);

//askQuestion('예스');
//askQuestion('y');
//askQuestion('Yes');

  파라미터 값을 두개 데이터 중 하나로 선택할 수 있게끔 도와준다.

 

 클래스(Class)

 

클래스는 인스턴스(new Person)를 만들어준다.

class Person {
  // 클래스 로직
  constructor(name, age) { // constructor() 초기화 메소드
    console.log('생성 되었습니다');
    this.name = name;
    this.age = age;
  }
}

var ian = new Person('이안', 28); // 생성 되었습니다
console.log(ian); // Person {name: '이안', age: 28}

프로토타입 상속

__proto__에서 상위 오브젝트 정보를 가지고 있다.

var user = { name: 'ian', age: 30 };
var admin = {};

admin.__proto__ = user; // { name: 'ian', age: 30}

admin.name // "ian"
admin.age // 100

admin // {} 빈객체, __proto__에서 name과 age의 정보 제공

admin.role = 'admin';
admin // {role: "admin"}, __proto__에서 name과 age의 정보 제공

Object.prototype 최상위 객체에 정의되어 있는 메소드와 속성들을 사용할 수 있다. (JavaScript Native API)

var obj = { a: 10 };
Object.keys(obj); // ["a"]
obj.hasOwnProperty('a'); // true

프로토타입(js)과 클래스(java)와의 관계

기존의 프로토타입 상속이 계속 유지가 된 것으로,

클래스를 이용하지 않고도 생성자 함수를 충분히 만들어 나갈 수 있다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

class Person{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

타입스크립트의 클래스 문법

class Person {
  // 클래스 최상단에 클래스 속성(멤버변수)의 타입 정의
  private name: string; // 유효범위: 클래스 안에서만
  public age: number;
  readonly log: string; // 접근만 가능, 읽기모드
  
              // 파라미터 타입도 구체적으로 정의 가능
  constructor(name: string, age: number) { 
    this.name = name;
    this.age = age;
  }
}

리액트

리액트에서도 클래스보다 함수형으로 넘어간 상황이다.

// 리액트 예전 문법 - 클래스 기반 코드
class App extends React.Component {

}

// 리액트 최신 문법 - 훅 기반의 함수형 코드
function App() {
  return <div>Hello World!</div>
}