[ TS ] 점 표기법으로 객체에 접근 할 수 없는 이유

정기 배포가 나가야 하는데 빌드중에 eslint 에러로 멈춘 적이 있다.

해당 파일은 tsx 이고, 점 표기법으로 객체를 조회하는 부분에서 나는 에러였다. 

 

해당 에러를 수정한 PR을 코드 리뷰하며 처음에서는 객체 조회 형식 간의 차이 때문인가? 싶었는데 찾아보니 타입스크립트에서 객체를 조회할 때의 문제였다.

 

Aㅏ..늘 새로워..⭐

 

 

위 코드를 보면 target.childNodes를 복사하여 내부 배열을 순회한다. 이때 각 배열에는 객체가 들어있는데 이 객체를 가리키는게 cur이다. 하지만 cur에 대한 어떠한 타입 정의도 되어있지 않다. 

 

타입스크립트에서는 객체에 대한 타입 정의를 type 또는 interface를 통해서 제공하는데 타입이 명시되어 있지 않은 경우 점 표기법을 통해 객체를 조회하면 에러를 뿜는다. 

 

바닐라 자바스크립트에서의 점 표기법과 대괄호 표기법은 기능적으로 동일하다. ( 때에 따라 대괄호 표기법을 써야 하기도 한다. ) 하지만 타입스크립트에서는 조금 더 강한 제약을 줌으로서 발생할 수 있는 사이드 이펙트를 방지해준다. 

 

 

참고한 사이트

https://stackoverflow.com/questions/30089879/typescript-and-dot-notation-access-to-objects

TypeScript and dot-notation access to objects

 

https://www.bennadel.com/blog/3126-object-access-bracket-notation-vs-dot-notation-with-typescript-in-angular-2-rc-4.htmhttps://stackoverflow.com/questions/30089879/typescript-and-dot-notation-access-to-objects

Object Access: Bracket-Notation vs. Dot-Notation With TypeScript In An