Learning TypeScript 4장

객체 타입

• {...} 구문을 사용해서 객체 리터럴을 생성
• 값의 속성에 접근하려면 value.멤버 | value['멤버']

let spring = {
	flower: "Cherry Blossom",
  	month: 4
};
spring['flower'];   // type: string
spring.month;   	// type: number

spring.end;
// Error : Property 'end' does not exist on type '{ flower: string; month: number; }`.

1.객체 타입 선언

let myState: {
	name: string;
    age: number;
};

// ok
myState = {
  name: "hazel",
  age: 22,
};

별칭 객체 타입

let MyState: {
	name: string;
    age: number;
};

let myState: MyState;

myState = {
  name: "hazel",
  age: 22,
};

구조적 타이핑

• 타입을 충족하는 모든 값을 해당 타입의 값으로 사용할 수 있다.
• 매개변수나 변수가 특정 객체 타입으로 선언되면 타입스크립트에 어떤 객체를 사용하든 해당 속성이 있어야 한다.

type FirstNmae = { firstName: string };
type LastName = { lastName: string };

const fullName = {
  firstName: "Lee",
  lastName: "hazel",
};

// firstName
let firstName: FirstName = fullName;
// lastName
let lastName: LastName = fullName;

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

• 타입스크립트의 타입 검사기에서 구조적 타이핑은 정정 시스템이 타입을 검사하는 경우이다.
• 덕 타이핑은 런타입에서 사용될 때까지 객체 타입을 검사하지 않는 것을 말한다.
  => 자바스크립트 덕타입인 반면 타입스크립트는 구조적으로 타입화 된다.

1.사용 검사

1) 객체 타입으로 값을 해당 객체 타입에 할당 할 수 있는지 확인
2) 할당하는 값에는 객체 타입의 필수 속성이 있어야 한다.

• 객체 타입은 필수 속성 이름과 해당 속성이 예상되는 타입을 모두 지정.
• 일치하지 않으면 타입스크립트는 타입 오류 발생

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

const hasBoth: FirstAndLastNames = {
  first: "Lee",
  last: "hazel",
};

const hasOnlyOne: FirstAndLastNames = {
  // Error : Property 'last' is missing in type '{ first: string }'
  // but required in type 'FirstAndNames'.
  first: "Lee"
};

2. 초과 속성 검사

• 변수가 객체 타입으로 선언하고, 초깃값에 객체 타입에서 정의된 것보다 많은 필드가 있다면 타입스크립트에서 타입 오류가 발생한다.

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

// ok: Person의 필드와 일치함
const person1: Person = {
  born: 2007,
  name: "Anna"
};

type Author = {
  firtsName: string;
  lastName: string;
};

type Poem = {
	author: Author;
  	name: string;
};

const poemMismatch: Poem = {
  author: {
    name: "hazel",
    //Error: Type { name : string } is not assignable to type 'Author'.
    // Object literal may only specify known properties.
    // and 'name' does not exist in type 'Author'.
  },
name: "Tulips",
};

3. 선택적 송성

• 중첩된 객체 타입을 고유한 이름으로 바꿔서 사용하면 코드와 오류 메시지가 더 읽기 쉽다.
• 타입의 속성 애너테이션에서 : 앞에 ? 를 추가하면 선택적 속성임을 나타낼수 있다.
• 선택적 속성은 존재하지 않아도 되고 undefined를 넣어줘도 된다.
• 즉, undefinex를 유니언으로 선언시 속성 값을 반드시 선언해줘야 한다.

type Writers = {
  author: string | undefined;
  editor?: string;
};

// ok : author 는 undefined으로 제공
const hasRequired: Writers = {
  author: undefined,
},
      
const missingRequried: Writers = {};

// ERROR : Property 'author' is missing in type {} but required in type 'Writers'.

객체 타입 유니언

1. 유추된 객체 타입 유니언

const bts = Math.random() > 0.5
? { name: "taetae", age:29}
: { name: "RM", gender: true};

// type:
{
  name: string;
  age: number;
  gender?: undefined;
} | {
  name: string;
  age: undefined;
  gender: boolean;
}
bts.name;   //string
bts.agel;   // number | undefined
bts.gender;   // boolean | undefined

2. 명시된 객체 타입 유니언

• 값의 타입이 객체 타입으로 구성된 유니언이라며, 이런 모든 유니언 타입에 존재 하는 속성에 대한 접근만 허용한다.
• 속성 name에 접근하는 것은 name 속성이 항상 존재하기 때문에 허용되지만 age와 gender 는 항상 존재한다는 보장이 없다.

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

type Person2 = {
  name: string;
  gender: boolean;
};

let pernson: Person1 | Person2;

const personL Person = Math.random() > 0.5 
	? { name: "taetae", age: 29} 
 	: { name: "RM", gender: true};

person.name;
person.age;  // Error : Property 'age' does not exist on type "Person1 | Person 2'.
person.gender; 
// Error : Property 'gender' does not exist on type "Person1 | Person 2'.

if('age' in person) {
  person.age;
} else {
  person.gender;
}
  

교차 타입

• & 교차타입(intersection type) 사용해 여러 타입을 동시에 나타낸다.
• 일반적으로 여러 기존 객체 타입을 별칭 객체 타입으로 결합해 새로운 타입을 생성.

type Person1 = {
	name: string'
  	age: number;
};
type Person2 = {
  name: string;
  gender: boolean;
};

type Persons = Person1 & Person2;
//
{
  person.name;
  person.age;
  person.gendr;
}

1. 교차 타입의 위험성

• 긴 할당 가능성 오류 : 복잡할수록 타입 검사기의 메시지도 이해하기 더 어렵다.
• 타입의 일련의 별칭으로 된 객체 타입으로 분할하면 읽기가 훨씬 쉬워진다.

type ShortPoemBase = { author: string};
type Haiku = ShortPoemBase & { kigo: string; type: "haiku" };
type villanelle = ShortPoemBase & { meter: number; type: "villanelle" };
type ShortPoem = Haiku | Villanelle;

const oneArt: ShortPoem = {
  
 // Error : type ' { author: string; type: "villanlle"; }'
  // is  not assignable to type 'ShortPoem'
  // type '{author: string; type: "villanlle";}' is not assignable to type 'villanelle'.
  // Property 'meter' is missing in type '{ author: string; type: "villanelle"}
  // but required in type '{meter: numberl type: 'villanelle'}
author: "Elizabeth Bishop",
type": 'villanelle',
};

1-1 never

• 교차 타입은 잘못 사용하기 쉽고 불가능한 타입을 생성한다.
• 두 개의 원시 타입을 함께 시도하면 never 키워드로 표시되는 never 타입이 된다.

type MySpring = number & string;   // type: never

[Reference]
1. Learning typeScript(조시 골드버그/고승원/한빛미디어_2023)