[TypeScipt] typeof , keyof

typeof 연산자

개요

💡 객체 데이터를 객체 타입으로 변환해주는 연산자.

사용 예시

const martObj = {
   code: 'code',
   name: 'name',
   nickname: 'nickname',
};

// 위의 객체를 타입으로 변환하여 사용하고 싶을때
type Mart = typeof martObj;

const martObjCopy: Mart = {
   code: 'codeCopy',
   name: 'nameCopy',
   nickname: 'nicknameCopy',
};

keyof 연산자

개요

object가 가지고 있는 모든 key값을 union type으로 합쳐서 내보내준다.

💡 객체 형태의 타입을 따로 속성들만 뽑아 모아 유니온 타입으로 만들어주는 연산자.

사용 예시

// 'price' or 'name' 만 가능하다.
interface Mart {
	code: number;
    name: string;
}

type MartKeys = keyof Mart;

const martCode: MartKeys = 'code';
const martName: MartKeys = 'name';

// [key :string]으로 사용하면 키값에 모든 문자 key를 사용할 수 있다.
interface Mart {
	[key: string]: number;
}

type MartKeys = keyof Mart;

const martCode: MartKeys = 'code';
const martNickname: MartKeys = 'nickname';

keyof, typeof 사용법

const obj = {
    a: {
        text: 'a가 맞습니까?',
        url: `${path}/a`
    },
    b: {
        text: 'b가 맞습니까?',
        url: `${path}/b`
    },
    c: {
        text: 'c가 맞습니까?',
        url: ''
    }
};

const func = (type: string) => {
    const value = obj[type as keyof typeof obj];

    Modal.confirm({
        content: value.text,
        onOk: () => {
            value.url === ''
                ? history.push('/')
                : window.open(value.url, '_blank');
        }
    });
};