타입스크립트 TS 공부 #3 interface, function, enum

Interface

interface TV{
    turnOn(): boolean;
    turnOff(): void;
}

const myTV: TV = {
    turnOn(){
        return true;
    },
    turnOff(){
    }
}

function tryTurnOn(tv : TV){
    tv.turnOn();
}

tryTurnOn(myTV);

ts에는 인터페이스가 있지만 js에는 없음 따라서
js로 넘어가면 사라져서 실제로 실행될 때 안무거워짐 !

보드 만들기

//인터페이스 정의

interface Cell { //말이 움직일수있는 칸
    row: number;
    col:number;
    piece?: Piece; //? 옵션으로 있을 수도있고 없을수도 있는 cell의 타입
} //행위가 없고 데이터타입만 있는 정의

interface Piece { //움직이는 말
    move(from: Cell, to: Cell): boolean;
}


function createBoard(){ //보드 만드는 함수
    const cells: Cell[] = [];
    for (let row=0; row <4; row++){
        for (let col=0; col <4; col++){
            cells.push({
                // row: row, - 이름이 같으면 아래처럼 표현가능 
                row, 
                col: col
            })
        }
    }
    return cells;
}

const board = createBoard();

board[0].piece ={ //피스는 무브라는 행위를 꼭 해야함 !
    move(from: Cell, to: Cell){
        return true;
    }
}

말을 움직일 수 있는 칸(행위가 없고 데이터타입만 있는 인터페이스)를 만들고
움직이는 말(움직이는 행위를 정의한 인터페이스)를 만들어서

보드 만드는 함수를 만들어 실행한다.

회원가입에서 받아올 정보 타입 알기

//회원가입
interface SignUp {
    email: string;
    id: string;
    password: string;
}
function ajaxSignup(data: SignUp){
}


ajaxSignup({
    email //이렇게 속성을 넣는거를 넣는다 
})
 

서버로부터 받아야하는 값을 js에서는 인지못하는데 ts에서 확인가능

function

function add(x: number,y: number): number { //타입정의 하기
    return x+y;
}

// add(1,"2") - 에러남
const result = add(1,2);

const add2 = (a:number,b:number): number => a+b; //이렇게도 표현 가능

파라미터와 리턴값의 타입 정의하기

// function buildUserInfo(name= "-", email?: string){
function buildUserInfo(name= "-", email = "-"){ //초기값 정의하기 
    return { name, email};
}
const user = buildUserInfo();

파라미터에 타입대신 값을 넣으면 초기값으로 설정됨!

함수 오버로드 시그니처

interface Storage{
    a: string;
}
interface ColdStorage{
    b: string;
}

//함수 오버로드 시그니처
function store(type: "통조림"):  Storage
function store(type: "아이스크림"):  ColdStorage

//함수 실제 구현
function store(type: "통조림" | "아이스크림") { //두타입에 따라 반응을 정해놔야함
    if(type === "통조림") {
        return { a: "통조림"}
    } else if (type === "아이스크림"){
        return { b: "아이스크림"}
    } else {
        throw new Error('unsupported type');
    }
}

const s = store('아이스크림');
s.b ///s안에 b가 생김 -> '아이스크림'

함수 오버로드 시그니처 - 인터페이스 들고오기
실제 구현 - 타입에 따라 반응을 정해놔야함

Enum 열거형 - 상수들의 집합

ex) 회원의 등급, 플랜의 종류

enum StarbuksGrade {
    WELCOME = "WELCOME",
    // DDDD, 이게 중간에 끼면 밑에 것들의 순서가 중요해서 바뀜 그래서 값을 초기에 할당하는게 좋다
    GREEN = "GREEN",
    GOLD = "GOLD"
}

function getDiscount(v: StarbuksGrade): number{ //등급에 따라 할인율
    switch (v){
        case StarbuksGrade.WELCOME:
            return 0;
        case StarbuksGrade.GREEN:
            return 5;
        case StarbuksGrade.GOLD:
            return 10;
    }
}

console.log(getDiscount(StarbuksGrade.GREEN)); //5
console.log(StarbuksGrade);
/* 콘솔 결과
{
  '0': 'WELCOME',
  '1': 'GREEN',
  '2': 'GOLD',
  WELCOME: 0,
  GREEN: 1,
  GOLD: 2
}
 */

console.log(StarbuksGrade.GREEN === "GREEN"); //true
console.log(StarbuksGrade["0"]); // WELCOME이 출력됨 (값 정의가 안되어있었을때)
console.log(getDiscount(StarbuksGrade["GREEN"]));