이정환 님의 한 입 크기로 잘라먹는 타입스크립트 를 수강한 내용 입니다.
객체
객체 타입 정의 방법
2가지 방식으로 객체의 타입을 정의 할 수 있습니다.
1. object 정의
잠깐, 위와 같이 정의하게 되면 한 가지 허점이 존재 합니다.
자바스크립트에서 객체에 접근 할 때 점 표기법을 사용해서
user.id로 접근이 가능 합니다.하지만 위의 코드로 접근을 시도하면 오류가 발생 합니다.
이유는 타입스크립트의 object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않는 타입이기 때문입니다.
object타입은 객체의 프로퍼티에 대한 정보를 전혀 가지고 있지 않습니다.프로퍼티에 접근하려고 하면 오류가 발생 합니다.
이럴 때에는 object가 아닌 객체 리터럴 타입을 이용해야 합니다.
2. 객체 리터럴 타입
객체 리터럴 타입은 다음과 같이 중괄호를 열고 객체가 갖는 프로퍼티를 직접 나열해 만드는 타입입니다.
객체 리터럴 타입으로 정의하면
타입 내에 정의 되어있는 프로퍼티에 이상 없이 접근할 수 있게 됩니다.
점 표기법으로 접근했지만 괄호 표기법을 사용할 때에도 동일하게 잘 접근됩니다.
특수한 프로퍼티 정의
1. 선택적 프로퍼티
프로퍼티의 이름 뒤에 ? 를 붙여주면 됩니다.
2. 읽기 전용 프로퍼티
프로퍼티의 이름 앞에 readonly 키워드를 붙이면 됩니다.
- 이를 통해 의도치 않은 프로퍼티의 수정을 방지할 수 있습니다.
타입 별칭(Type Alias)
타입 별칭은 타입 정의를 마치 변수처럼 하게 해주는 문법 입니다.
type 타입_이름 = { 타입 정의 }형태로 타입을 정의 합니다.동일한 스코프에 동일한 이름의 타입 별칭을 선언하는 것은 불가능합니다. (마치 변수 선언과 유사)
인덱스 시그니처(Index Signature)
인덱스 시그니처는 객체 타입을 유연하게 정의 할 수 있도록 돕는 문법 입니다.
인덱스 시그니처 예시
만약 100개의 프로퍼티가 추가 되어야 한다면 타입 정의에도 각 프로퍼티를 모두 정의 해주어야 하기 때문에 매우 불편할 것 입니다.
- 해당 타입 별칭을 인덱스 시그니처로 바꾼 예시 입니다.
[key : string] : string 은 인덱스 시그니쳐 문법으로
이 객체 타입에는 key가 string 타입이고
value가 string 타입인 모든 프로퍼티를 포함된다 라는 의미입니다.
Korea : “ko” 나 Brazil : “bz” 처럼 key와 value가 모두 string 타입인 이런 프로퍼티들 이 타입에 자동으로 모두 포함됩니다.
- 굳이 일일이 이런 타입들을 직접 명시할 필요가 없습니다.
만약 숫자로 보관하는 객체가 더 필요하다거나, 반드시 포함해야 하는 프로퍼티가 있다면 다음과 같이 할 수 있습니다.
⚠️ 인덱스 시그니처 주의점
인덱스 시그니처를 사용하면서 동시에 추가적인 프로퍼티를 또 정의할 때에는
- 인덱스 시그니쳐의 value 타입과 직접 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 합니다.
따라서 다음과 같이 서로 호환되지 않는 타입으로 설정하면 오류가 발생합니다.