[Typescript]Enum, Interface

홍인열·2022년 1월 1일
0

Enum

특정 변수에 값들을 할당해놓고 그값들을 정해놓고 가져다 쓸때 유용한 것같다.
수정불가능한 객체를 값을 가져다 쓰는 느낌이다.
정해논 폼같은 느낌이다.

//예제1
enum FruitsColor {
  apple = 'red',
  banana = 'yellow',
  pech = 'pink'
}

const appleColor:FruitsColor = FruitsColor.apple;
console.log(appleColor) // => 'red'
const bananaColor:FruitsColor = FruitsColor.banana;
console.log(bananaColor) // => 'yellow'
const peachColor:FruitsColor = FruitsColor.peach;
console.log(peachColor) // => 'pink'

console.log(FruitsColor)
// => {"apple": "red", "banana": "yellow", "peach": "pink"}
// Enum type으로 설정된 객체는 js에서 일반적인 object이다.
FruitsColor.apple ='blue' 
// 위의 코드를 작성하면 아래의 error를 보여준다. ts문법상 Enum type은 read-only 속성을 갖는다.
// Cannot assign to 'apple' because it is a read-only property.(2540)
console.log(FruitsColor.apple)
// 그럼에도 불구하고 위의 코드를 실행해보면 FruitsColor.apple ='blue' 라는 값을 얻을수있다.
// Typescript는 문법에의한 에러를 보여주긴하지만 실행을 막아주지는 못한다. 


//예제2 애매한 부분을 정리하는데 정확한지는 공부를 더해 봐야 할 것 같다.
enum Brands {
    nike,
    adidas,
    fila
}
console.log(Brands)
//=> {
//  "0": "nike",
//  "1": "adidas",
//  "2": "fila",
//  "nike": 0,
//  "adidas": 1,
//  "fila": 2
//} 

let userShoseBrand1:Brands = Brands[1];
// 이 경우 error 발생
// Type 'string' is not assignable to type 'Brands'.(2322)
// 예제 1의 경우에서는 변수 type을 Enum으로 지정하고 해당 Enum 객체의 값을 할당하면 문제 없었다. 하지면 Enum 객체의 key 값이 number 인경우 error를 발생시키는 것 같다.
console.log(userShoseBrand1) // => 'adidas'


let userShoseBrand2:string = Brands[1];
// 변수 타입을 enum값이 아닌 string으로 지정하면 error없이 Brands[1]의 값을 가져온다.
console.log(userShoseBrand2) // => 'adidas'



let userShoseBrand3:Brands = Brands.nike;
// 이 경우 key값이 string이며, 변수에 enumtype 지정시 문제가 발생되지 않는다.
console.log(userShoseBrand3) // => 0

Interface

객체의 키를 지정해놓고 키값의 타입또한 지정해 놓는 방법이라고 생각 할 수 있다.
함수의 타입이나 class도 지정이 가능하다.



//예제1
type Score = 'A' | 'B' | 'C' | 'F'; // type keyword를 이용하여 custom type을 생성할 수 있다.

interface User {
  name : string,
  age : number,
  gender? : string // key값 뒤에 '?'는 해당 key는 옵션이라는 의미다. 있어도되고, 없어도된다.
  readonly birthYear : number, // key 앞에 readonly keyword가 있을 경우 최초 할당된 값에서 수정이 불가하단 의미이다.
  [step:number] :Score // key number type이고 값이 string타입인 값을 여러개 가질수 있다는 의미. 옵션처럼 없어도된다. 'step'은 의미가 따로없고 아무말이나 사용할수 있음.
  
}

let user:User ={
  name: '홍개발',
  age: 201, // 장수..
  birthYear: 1900
}
// gender가 없어도 error 미발생, interface User의 gender뒤에 '?'가 없다면 user에 밑줄이 그어질 것이다.
// Property 'gender' is missing in type '{ name: string; age: number; birthYear: number; }' but required in type 'User'.(2741)


user.name = '홍노력' // 재할당가능
user.birthYear = 2000 // Cannot assign to 'birthYear' because it is a read-only property.(2540)
  
//예제2 함수 타입 지정
interface Add {
  (a:number, b:number): number; // 인자는 number type으로 a,b를 받고 반환값의 type이 number인 함수.
}

const add : Add = function(x, y){ // (x:number, y:number) : number
  return x + y 
}

//화살표함수도 동일
const multiple: Add = (x, y){ // (x:number, y:number) => number
  return x * y
}

//! Class의 타입지정시 :type 가아니고, implements를 이용한다.

interface Reset {
  name : string,
  length : number
}

class newclass implements Set {
 ...
}
 
// interface는 extends도 가능하다. 여러개도 가능하다.
interface ResetOption {
    size?: number
}

interface NewReset extends Reset, ResetOption {
  height : number
}


const newReset:NewReset = {
    name: '멋진네모',
    length : 88,
    height:30
}

const nextReset:NewReset = {
    name: '멋진네모',
    length : 88,
    height:30,
    size: 99
}



profile
함께 일하고싶은 개발자

0개의 댓글