Typescript - 04

이강민·2022년 7월 12일

Typescript

목록 보기

4/16

Typescript - 04

객체의 비구조화 할당문

구조화

let personName = 'Jack';
let personAge = 32;

let companyName ='Apple Company, Inc';
let companyAgeg = 42;

위와 같이 변수를 선언한다면 기능 확장도 어렵고 번거롭기까지 한다. 따라서 인터페이스나 클래스를 묶어서 새로운 타입으로 표현하는데 이를 구조화라고 한다.

//IPerson_ICompany.ts
//아래와 같이 공통된 부분을 변수로 만들고 
export interface IPerson{
  name : string
  age : number
}
export interface ICompany{
  name : string
  age:number
}
//index.ts
//아래에 사용하고자 하는 곳에서 구현한다.
import {IPerson, ICompany} from './IPerson_ICompany';

const jack : IPerson = {name : 'jack', age : 23},
    jane : IPerson = {name : 'jane', age : 32}

console.log(jack, jane);

const apple : ICompany = {name : 'Apple Computer. Inc', age : 42}, 
      ms : ICompany = {name : 'Microsoft', age : 44}

console.log(apple, ms);

위와 같이 인터페이스 타입으로 변수를 생성하고 객체를 만들면 유용하다.

비구조화 할당

구조화된 데이터는 어떤 시점에서 데이터의 일부만 사용해야 할 때가 있다. jack.name, apple.age와 같이 사용하지 않고 name, age만 사용하더라도 변수를 사용할 수 있는 것이 비구조화이다.
다시 말해, 구조화 된 데이터를 분해하여 변수에 할당하는 것을 비구조화 할당이라고 한다.

import {IPerson} from './IPerson_ICompany';
const jack : IPerson = {name : 'jack', age : 23}
let {name, age} = jack;
console.log(name, age) // jack 23

잔여 연산자

...은 전개 연산자 또는 잔여 연산자라고 부르는데 보통은 디스트럭쳐링할 때는 잔여 연산자라고 부르며 그 외에 전개 연산자라고 부른다.
다음은 잔여 연산자의 예시이다.

const address : any = {
   country : 'korea',
   city : 'Seoul',
   address1 : 'Gangnam-gu',
   address2 : 'Sinsa-dong 123-456',
   address3 : '789 street, 2 Floor KM building'
}

const {country, ...rest} = address
console.log(address);
//{country: "korea", city: "Seoul", address1: "Gangnam-gu", address2: "Sinsa-dong 123-456"…}

전개 연산자

앞서 이야기 했듯이 비구조화할당이 아닌 그외에서 사용할 때는 전개 연산자라고 한다.
다음은 각 객체를 하나로 합칠때 사용하는 전개연산자이다.

let part1 = {number : 23}, part2 = {age : 32}, part3 = {city : 'seoul'}
let merged = {...part1, ...part2, ...part3};
console.log(merged)
// {number: 23, age: 32, city: "seoul"}

객체의 타입 변환

타입 변환

타입이 있는 언어들은 특정 타입의 변수값을 다른 타입의 값으로 변환할 수 있는 기능을 제공하며 이를 타입변환(type conversion)이라 한다.

let person : object = {name : "jack", age : 32};
person.name; // 타입 체커에서 에러로 판정한다.

에러가 발생하는 이유는 object타입은 type속성을 가지지 않음으로 발생한다.

위와 같은 문제는 아래를 person 변수를 name 속성이 있는 타입으로 변환해서 person.name 에러를 발생시키지 않을 수 있다.

(<{name : string}>person).name

type conversion과 type casting, type coercion의 차이
다음 3가지는 동일하게 타입 변환으로 번역이 된다. type conversion은 type casting과 typse coersion을 모두 포함하는 의미로 사용된다.
type casting은 본문에 보인 명시적 타입 변환을 의미 하지만 type coercion은 암시적 타입 변환을 의미한다.

타입 단언

타입스크립트는 독특하게 타입 변환이 아닌 타입 단언이라는 용어를 사용한다. ES5 자바스크립트 구문이 아니라 자바스크립트의 타입 변환 구문과 구문하기 위해 타입 단언이라는 용어를 사용한다.

((<타입>)객체)
(객체 as 타입)

아래는 타입 단언의 예시이다.
인터페이스를 만들어 원하는 객체의 타입을 결정하고 object 타입의 객체를 인터페이스의 객체 타입으로 타입 단언하는 것이다.

//INameable.ts
export default interface INameable{
  name : string
  age : number
}

//index.ts
import INameable from './INameable';
const obj : object = {name : 'Jack', age: 32};

const name1 = (<INameable> obj).name;
console.log(name1);
const name2 = (obj as INameable).age;
console.log(name2);