본문 바로가기
Web Front 개발공부/React.js

타입스크립트 기본 - Class와 Enum 타입

by 슬기로운 동네 형 2024. 7. 14.
반응형

 회사에서 다음 프로젝트로 리액트를 사용하기로 했는데... 오잉 타입스크립트를 함께 사용한다.

 타입스크립트가 무엇인지는 5~6년 전에 얕게 흩어보아 잘알고 있다.

 리액트에서 사용할 때 큰 문제가 없도록 간단하게 공부하고 메모를 남긴다.


1. Class

티스트토리 코딩 첨부하기에 TypeScript가 생기다니 이런 좋은일이~~~

자바와 별반 다르지 않다. 다만 this 를 반드시 써야 에러가 안난다.

interface IUser{
    name:string;
    age:number;
    sayHello:()=> string; //인수 없이 문자열 반환
}

class User implements IUser{
    name: string;
    age: number;

    constructor(){
        this.name = '';
        this.age = 0;
    }

    sayHello(): string {
        return `안녕하세요 저는 ${this.name} 이고 나이는 ${this.age} 입니다.`;
    }
}

const user = new User();
user.name = 'Hana';
user.age = 30;

console.log(user.sayHello());

2. Enum 타입 열거형

 

Enum 역시 자바와 유사하다.

수치 기반 이외에 문자열 기반의 Enum을 사용할 때는 각 멤버를 특정한 문자열의 상수로 초기화해야 한다.

enum Direction2{
    up,
    Down,
    Left,
    Right
}

let direction: Direction2 = Direction2.Left;

//2 라는 숫자가 출력된다.
console.log(direction);

//문자사용시는 상수를 초기화한다.
enum Direction{
    up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right ='RIGHT'
}

// 예를 들어, API의 파라미터로 문자열이 전달된 경우를 가정한다.
const value = 'DOWN';

// 문자열에서 Enum 타입으로 변환한다.
const enumValue = value as Direction;

if(enumValue === Direction.Down){
    console.log('Down is selected');
}

 

반응형

댓글