타입스크립트 중급(옵셔널 프로퍼티,인터페이스,타입)

옵셔널 프로퍼티(optional property) :객체 안에서 name? 이렇게 쓰는 것이다.

요소를 필수요소가 아닌 옵션인 요소로 만들 수 있다.

 

병합(Interface merging)

interface User {

name: string;

age: number;

gender: string;

height: number;

}

const obj6: User = {

name: "김과장",

age: 50,

gender: "몰루",

height: 12,

};

똑같은 인터페이스 이름이 정의가 되면 , 인터페이스는 합쳐지게 된다.

interface User , interface User 이렇게 두개가 있으면 두개 조건들이 합쳐지는 거임.

 

확장(extneds)

기존에 선언한 interface를 확장시킬 수 있다.

//extends(확장)

interface Job extends User {

money?: string;

job?: string;

}

const jobObj: Job = { name: "박과장", age: 60, gender: "남자", height: 40 };

interface User를 가져와서 , 중복해서 코드를 안쳐도 되는 편리한 기능이다.

 

 

타입 별칭(Type Alias)

새로운 타입을 정의하는 방법

기존에 있던 자료형(string,number ~~~)뿐만이 아니라 , "kim"타입만 들어와줘.

이런식으로 내가 타입을 지정할 수 있다.

"type T"로 시작하는게 관례다.

type TPhoneColor =

| "black"

| "red"

| "orange"

| "red"

| "blue"

| "violet"

| "red";

const phoneColor: TPhoneColor = "blue";

이렇게 타입을 지정하면 내가 지정한 색깔만 값으로 들어올 수 있다.

 

type , interface 유사점 및 차이점

공통점 : 객체타입 정의 가능 , 확장 가능

 

차이점 :

1.선언방식 ,

2.확장방식 , 유니언타입(Type Alias) 및 인터섹션(Type Alias) 타입

3.Type Alias는 병합이 안됨.

4.interface는 유니언 타입이 안됨.(string|number) 이런거.

5. 인터페이스는 class가 구현이 가능하지만, type은 class가 구현이 안된다.

 

정석 : 객체 쓸 때 인터페이스 , 아니면 Type

상속이 안되고 , 자동병합이 안되는 것 빼곤 타입이 좀 더 좋다.

왜냐면 마우스 툴팁으로 어떤 타입인지 띄워주기 때문이다. (병합된 걸 찾는 것도 상당히 불편하다.)

 

--

제네릭 (Generic)

타입을 미리 지정하지 않고 | 사용하는 시점에서 타입을 정의해서 쓸 수 있는 문법

function firstElements(elements: number[] | string[]) {

return elements[0];

}

console.log(firstElements([1, 2, 3]));

console.log(firstElements(["aa", "dd"]));

//1.등호 오른쪽에 , <T>를 해준다.

const firstElements2 = <T>(elements: T[]) => {

return elements[0];

};

//2.함수<자료형>(매개변수)

console.log(firstElements2<number>([1, 2, 3]));

console.log(firstElements2<string | number>(["dd", 2, 3]));

//타입의 공통처리를 위해서 , 제네릭 문법을 사용한다.

//제네릭은 "넘겨주는 타입이 치환이 되는거구나!"

type TCar<T> = {

name: string;

option: T;

};

const car1: TCar<string> = {

name: "sonata",

option: "auto",

};

const car2: TCar<number[]> = {

name: "sonata",

option: [1, 2, 3],

};

//제네릭에 제약을 거는 방법

//extends를 사용하면 제네릭에 제약을 걸 수 있다.

//이번거는 length속성이 있는 놈만 가능하도록 제약을 건 것이다.

const getLength = <T extends { length: number }>(item: T): void =>

console.log(item);