[Typescript] 객체(1)

객체 리터럴은 각자의 타입이 있는 키와 값의 집합이다.
객체 타입은 객체가 필요로 하는 것을 설명한다.

1️⃣객체타입

객체 타입은 객체 리터럴과 다르다.

객체타입은 필드 값 대신 타입을 사용해 설명한다.

코드작성 시 객체 타입을 선언할 때  : 으로 선언한다는 것을 유의하자.

/* 객체 타입*/
let object : {
    name : string;
    age: number;
};

/*객체 리터럴*/
let object2 = {
    name : "hello world",
    phone : 23
};

별칭 객체 타입

{name : string; age : number}과 같은 객체 타입을 계속 작성하는 일은 귀찮기 때문에 객체 타입에 타입 별칭을 할당해 사용하는 것이 일반적이다.

type Person = {
    name : string;
    age : number;
};

let you : Person;
you = {
    name: "honghonghong",
    age:23
};

2️⃣구조적 타이핑

TS의 타입시스템은 구조적으로 타입화되어 있다.

즉, 타입을 충족하는 모든 값을 해당타입의 값으로 사용할 수 있다.

구조적 타이핑은 두 객체가 그 구조적인 형태에 따라 호환되는지 여부를 확인하는 방식이다. 식

type WithFirstName = {
    firstname : string;
};
type WithLastName = {
    lastname : string;
};
const hasBoth = {
    firstname : "indigo",
    lastname : "child",
};

let first : WithFirstName = hasBoth;

let last : WithLastName = hasBoth;

위의 코드에서 hasBoth 변수는 명시적으로 선언되지 않았음에도 두 개의 별칭 객체 타입을 모두 가지므로 두 개의 별칭 객체 타입 내에 선언된 변수를 모두 제공할 수 있다.

 

구조적 타이핑  vs 덕타이핑

구조적 타이핑은 덕 타이핑과는 다르다.

⭐️타입스크립트의 타입 검사기에서 구조적 타이핑은 정적 시스템이 타입을 검사하는 경우이다.⭐️

interface Person {
    name: string;
    age: number;
}

let person: Person = {
    name: "John",
    age: 30
};

let person2 = {
    name: "Jane",
    age: 25,
    gender: "female"
};

person = person2; /* OK! */

위의 코드에서와 같이 person2는 Person 인터페이스를 직접 구현하지 않았지만, 구조적으로 필요한 속성과 메서드를 가지고 있으므로 person에 할당할 수 있다.

⭐️⭐️이것을 TS에서의 타입 검사기에서 정적 시스템이 타입을 검사하여 구조적인 형태가 호환되는지 검사한다.

타입스크립트는 정적 타입 언어로, 코드를 실행하기 전에 코드 내의 타입 에러를 잡을 수 있다. 이는 컴파일러가 코드를 분석하고, 변수, 함수 및 객체의 타입을 추론하고 검사하여 타입 안정성을 유지하는 것을 의미

 

반면 자바스크립트는 덕타입으로 런타임에서 사용될 때 까지 객체타입을 검사하지 않는다.

→자유도가 높아보이나 매우 위험한 방식임을 직감할 수 있다.

 

사용 검사

객체 타입으로 에너테이션된 위치에 값을 제공할 때 TS는 값을 해당 객체 타입에 할당할 수 있는지 확인한다.

할당하는 값에 객체 타입의 필수 속성들이 반드시 있어야 한다.

type Name = {
    first : string;
    last : string;
};

const myName : Name = {     /*OK*/
    first : "indigo",
    last : "child",
};

const yourName : Name = {
    first : "hello",
}

yourName을 보면 last 속성이 없다. 아래와 같이 error가 나오는 모습을 볼 수 있다.

error

당연하게도 요구받는 속성에 대한 값의 자료형도 일치해야 한다.

 

🚩초과 속성 검사

초과 속성 검사시 오류  발생 조건

1. 변수가 객체 타입으로 선언될 때

2. 초기값에 객체 타입에서 정의된 것보다 많은 필드가 있을 떄

type Name = {
    first : string;
    last : string;
};

const myName : Name = {     /*OK*/
    first : "indigo",
    last : "child",
};

const yourName : Name = {
    first : "hello",
    last : "world",
    likes : 2,			/*Error*/
}

error

하지만 1번의 조건이 지켜지지 않는 즉, 기존 객체 리터럴을 제공하면 초과 속성 검사를 우회한다.

type Name = {
    first : string;
    last : string;
};

const myName : Name = {     /*OK*/
    first : "indigo",
    last : "child",
};

const yourName = {
    first : "hello",
    last : "world",
    likes : 2,
}
const extraName : Name = yourName; /*OK*/

🚩중첩된 객체 타입

객체 타입 안에 객체 타입을 넣을 수 있다.

아래의 코드를 보자.

type Name = {
    first : string;
    last : string;
};
type Person = {
    name : Name; /*이 부분*/
    age : number;
};
const You : Person = {
    name : {
        first: "hello",
        last : "world",
    },
    age : 23
};

🚩선택적 속성

모든 객체에 객체 타입 속성이 필요한 건 아니다.

타입의 속성 에너테이션에서 : 앞에? 를 추가하면 선택적 속성임을 나타낼 수 있다.

type Name = {
    first : string;
    last : string;
    third?:string;
};
type Person = {
    name : Name; /*이 부분*/
    age : number;
};
const You : Person = {
    name : {
        first: "hello",
        last : "world",
    },
    age : 23
};

위의 코드에서 보이듯이 third 속성을 선택적 속성으로 지정한 모습이다. 

이전 포스팅에서 다뤘던 선택적 속성과 undefined를 포함한 유니언 타입의 속성 사이에는 차이가 있다는 것을 헷갈려서는 안 된다.

선택적 속성은 존재하지 않아도 되나 "필수로 선언된 속성 | undefined "는 반드시 존재해야 한다.

type Name = {
    first : string;
    last : string;
    third?:string;
};
type Person = {
    name : Name; 
    age : number;
    school : string | undefined /* undefined를 포함한 유니언 타입 속성 */
};
const You : Person = {
    name : {
        first: "hello",
        last : "world",
    },
    age : 23
};