TIW_220809

🦝 2022-08-09 (화)

오늘 한 것

• Bootstrap card css 생성 및 레이아웃 적용
• card header에 차트 드래그 앤 드랍 및 삭제 버튼 디자인 적용 및 기능 구현
• 차트 드래그시 놓여질 위치 css 적용 (className=draggable-source--is-dragging)

오늘 배운 것

TypeScript에 string key로 객체에 접근하는 방법

TypeScript에서는 기본적으로 객체의 프로퍼티를 읽을 때, string타입의 key 사용을 허용하지 않기에 아래처럼 코드를 작성하면 컴파일 에러를 만나게 된다.

const obj = {
  foo: "hello",
}

let propertyName = "foo"

console.log(obj[propertyName]) // compile error!

따라서 객체에 index signature를 추가하여 해결한다.

type ObjType = {
  [index: string]: string
  foo: string
  bar: string
}

const obj: ObjType = {
  foo: "hello",
  bar: "world",
}

const propertyName1 = "foo"
const propertyName2: string = "foo"

console.log(obj[propertyName1]) // ok
console.log(obj[propertyName2]) // ok

참고 자료(Reference)

TypeScript에서 string key로 객체에 접근하기