[TS] TypeScript Object 다루기

//JAVASCRIPT
      let obj = {};
      obj["name"] = "pitter";

자바스크립트와 타입스크립트에서 쉽게 체감할 수 있는 눈에 띄는 차이점은 객체이다.

자바스크립트에서는 위와 같이 간단하게 객체를 선언하지만, 타입스크립트에서는 {}가 정확히 객체만을 의미하는 것이 아니라 사실

Non-nullable Any 타입정도로 생각할 수 있다. 타입스크립트에는 여러가지 객체 타입 선언 방법이 있으니 알아보자.

 

 

object 타입

var object: object;
//{}와 []가 할당 가능한 타입이다.
object = { prop: 0 };
object = []; 

//아래 형태의 변수는 할당 불가능하다
object = 42; // Error
object = "string"; // Error
object = false; // Error
object = null; // Error
object = undefined; // Error

가장 기본으로 사용 되는 타입이다. 다만, 배열 타입도 할당 가능함을 기억하자.

 

{} / Object 타입

var object: {};
var object: Object;

//null과 undefined를 제외한 모든 형식을 할당 가능
object = { prop: 0 }; 
object = []; 
object = 42; 
object = "string"; 
object = false;

//불가능
object = null;
object = undefined;

{} 혹은 대문자 Object 타입이다. 앞서 설명한 것처럼 Null을 제외한 모든 형식이 할당 가능하다.

 

내부 프로퍼티 타입 명시

//string 타입의 key, any 타입의 value를 삽입 가능한 객체
var object: { [key: string]: any } = {};
object["name"] = "pitter";

//타입이 지정된 객체, 이외의 것들은 삽입 불가능
var object: {name : string, number : number} = {name = "", number = 0};
object.name = "pitter";

//string 타입의 key, any 타입의 value를 삽입 가능하며, 기본적으로 명시된 속성이 초기화 되어야함
var object: { [key: string]: any; name: string } = { name: "default" };
object["name"] = "pitter";

내부 프로퍼티의 형태를 선언한 경우로, 해당 형식이 자주 사용된다면 Interface로 선언함이 바람직하다.

 

 

주의

  const [prices, setPrices] = useState<{ [key: string]: any }>({});

"noImplicitAny": true 인 경우, object나 {}로 타입을 선언하고 내부 프로퍼티를 참조하고자 할 때 string 형태의 Key를 사용한 참조가 되지 않는 경우가 있다. 객체 내부 프로퍼티 타입을 정확히 명시하거나, 위와 같이 Key 타입을 string으로 받겠다고 명시해주면 해결된다. object는 string 혹은 number 만을 key 값으로 가질 수 있으며 더 유연한 형태는 Map()이 있다.

 

아래는 해당 상황처럼 타입 에러가 발생한 경우이다. object이지만 string 타입의 key로 객체를 참조하지 못한다.

 

추가

해당 내용을 찾아보며 interface와 비슷한 type이 존재함을 알았는데, interface는 객체에만 사용이 가능하며 배열과 같은 다른 타입에는 사용할 수 없다.

 

typescript type과 interface의 차이