특정 변수에 값들을 할당해놓고 그값들을 정해놓고 가져다 쓸때 유용한 것같다.
수정불가능한 객체를 값을 가져다 쓰는 느낌이다.
정해논 폼같은 느낌이다.
//예제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
객체의 키를 지정해놓고 키값의 타입또한 지정해 놓는 방법이라고 생각 할 수 있다.
함수의 타입이나 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
}