2.4 객체 타입
7가지 원시 타입에 속하지 않는 값은 모두 객체 타입
자바스크립트 : 이런 값을 모두 객체
타입스크립트 : 다양한 형태를 가지는 객체마다 개별적으로 타입 지정 가능
.
.
.
1. object
function isObject (value: object) {
return (
Object.prototype.toString.call(value).replace(/\[|\]|\s|object/g, "") === "Object"
)
}
// 객체, 배열, 정규 표현식, 함수, 클래스 등 모두 object 타입과 호환된다
isObject({});
isObject({ name: "KG" });
isObject ([O, 1, 2]);
isObject (new RegExp("object");
isObject(function () {
console. log("hello wolrd");
});
isObject(class Class {});
// 그러나 원시 타입은 호환되지 않는다
isObject(20); // false
isObject("KG"); // false: 가급적 사용하지 말도록 권장.
나중에 다룰 any타입과 유사하게 개체에 해당하는 모든 타입 값을 유동적으로 할당... -> 정적 타이핑 의미 퇴색
다만, any 타입과 다르게 원시 타입에 해당하는 값은 object 타입에 속하지 않는다. (object의 광범위함.)
2. {}
// 정상
const noticePopup: { title: string; description: string } = {
title: "IE 지원 종료 안내",
description: 2022.07.15일부로 배민상회 IE 브라우저 지원을 종료합니다.",
};
// SyntaxError
const noticePopup: { title: string; description: string } = {
title: "IE 지원 종료 안내",
description: 2022.07.15일부로 배민상의 T5 브라우저 시원을 좋료합니다.",
startAt: 2022.07.15 10:00:00, // startat은 지정한 타입에 존재하지 않으므로 오류
};자바스크립트 : 빈객체 생성 -> const obj = {};
타입스크립트 : 빈객체 생성 -> {} (어떤 값도 속성을 할당 x)
빈 객체 타입 지정 -> {} x 유틸리티 타입으로 Recordsctring, never>
처럼 사용하는 게 바람직.
let noticePopup: {} = {};
noticepopup.title ="IE 지원 종료 안내"; // (x) titLe 속성을 지정할 수 없음
{}타입으로 지정된 객체 : 완전히 비어있는 순수한 객체x
자바스크립트 : 프로토타입 체이닝 - Object 객체 래퍼에서 제공하는 속성에는 정상적으로 접근 o
타입스크립트 : 객체 래퍼를 타입으로 지정할 수. ㅇㅆ는 데도 소문자로 된 타입 체계를 사용하는 게 일반적
console. log(noticePopup.toString0); // [object Object]3. array
타입스크립트 : 자바스크립트 객체를 세분화 -> 타입 지정할 수 있는 타입 시스템 가짐.
각각의 객체에 타입을 지정.
자바스크립트의 배열 자료구조 : 원소 자유롭게 추가 제거 - 타입 제한 없이 다양한 값o
...but, 타입스크립트가 추구하는 정적 타이핑 방향과 맞지 않는다.
타입스크립트 : 배열 -> array라는 별도 타입으로 다룸
원소개수는 영향 x
Array 키워드 선언 or 대괄호[]를 사용해서 선언
const getCartList = async (cartId: number[]) => {
const res = await CartApi.GET_CART_LIST(cartId);
return res.getData();
};
getCartList([]); // (0) 빈 배열도 가능하다
getCartList ([1001]); // (0)
getCartList((1001, 1002, 1003]; // (0) number 타입 원소 몇 개가 들어와도 상관없다.
getCartList([1001, 1002"]): // (x) '1002'는 String 타입이므로 불가하다주의 ) 튜플타입도 대괄호로 선언.
튜플의 대괄호 내부 : 선언 시점에 지정해준 타입 값만 할당
원소 개수도 타입 선언 시점에 미리 정해짐.
( 객체 리터럴에서 선언 x 속성 할당 or 선언한 속성을 할당 x : 에러 발생 )
const targetCodes: ['CATEGORY", "EXHIBITION"] = ['CATEGORY", "EXHIBITION"]; // (0)
const targetCodes: ['CATEGORY", "EXHIBITION"] = [
"CATEGORY",
"EXHIBITION",
"SALE",
]; // (x) SALE은 지정할 수 없음4. type과 interface 키워드
타입스크립트 : object 대신 오직 배열임을 나타내는 타입스크립트만의 배열 시스템 사용 o
- 객체 타이핑
: type / interface -> 중복없이 해당 타입 사용 가능
type NoticePopupType = {
title: string;
description: string;
};
interface INoticePopup {
title: string;
description: string;
}
const noticePopup1: NoticePopupType = { ... };
const noticePopup2: INoticePopup = { ... };타입스크립트 : 컴파일러가 자동으로 타입 추론 -> 모든 변수에 명시 선언 필요 x
5. function
함수 = 일종의 객체로 간주
typeof 연산자 : 함수 타입을 출력 -> 자바사크립트는 함수를 function이라는 별도 타입으로 분류
function add (a, b) {
return a + b;
}
console.log(typeof add); // 'function'= 타입스크립트
1. 자바스크립트에서 typeof 연산자로 확인한 function이라는 키워드 자체 != 타입
2. 함수 : 배개변수 목록 받기 가능 -> TS에서는 매개변수도 별도 타입 지정 o
3. 함수가 반환하는 값o 일 때 -> 반환값에 대한 타이핑도 필요
function add(a: number, b: number): number {
return a + b;:number <- 다시 타입 반환값 지정
type add = (a: number, b: number) => number호출 시그니처를 들여댜보면 자바스크립트의 화살표 함수와 맥락이 유사
<-> 타입스크립트 : 함수 자체의 타입을 명시할 때는 화살표 함수방식으로만 호출 시그니처를 정의
호출 시그니처 : 타입스크립트에서 함수 타입을 정의할 때 사용하는 문법
함수 타입은 해당 함수가 받는 매개 변수와 반환하는 값의 타입으로 결정.
도서 참조 : 우아한 타입스크립트 with 리액트
