이 글은 아래 강의를 바탕으로 정리한 글입니다. 🤗
https://inf.run/UGoRu타입스크립트에는 자체적으로 제공하는 내장 타입들이 있습니다. 예를 들면 number, string 과 같은 타입을 말하며, 이들을 기본타입이라고 합니다.
타입스크립트에는 꽤 많은 기본 타입들이 제공되며, 각각의 기본 타입들은 서로 부모-자식 관계를 이루며 계층을 형성합니다.
기본 타입 중 원시 타입(Primitive Type)은 동시에 한개의 값만 저장할 수 있는 타입을 말합니다.
예를 들어 원시 타입이 아닌 배열이나 객체 같은 비 원시 타입들은 동시에 여러 개의 값들을 저장할 수 있는 반면, number, string, boolean 등의 원시 타입은 숫자면 숫자, 문자열이면 문자열 과 같이 딱 하나의 값만 저장할 수 있습니다.
// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;number 타입은 단순 정수 뿐만 아니라 소수, 음수, infinify, NaN 등의 특수한 숫자들도 포함합니다.
💡 참고로 변수 이름 뒤에 콜론(:) 과 함께 변수의 타입을 정의하는 문법을 타입 주석 또는 타입 어노테이션 이라고 합니다.
// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;// boolean
let bool1 : boolean = true;
let bool2 : boolean = false;// null
let null1: null = null;null 타입은 오직 null 값만 포함하는 타입입니다.
// undefined 타입
let unde1: undefined = undefined;string, number 같이 범용적으로 많은 값을 포함하는 타입 뿐만 아니라 딱 하나의 값만 포함하는 리터럴 타입이란 것도 존재합니다.
let numA: 10 = 10; // numA는 10 이외의 값을 저장할 수 없음
let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;타입스크립트에서는 배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의합니다.
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "J"];
let boolArr: Array<boolean> = [true, false, true];🔗 다양한 타입의 배열 요소를 갖는 배열의 타입을 정의하려면 다음과 같이
|를 이용해 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의하면 됩니다.
let multiArr: (number | string)[] = [1, "hello"];📊 다차원 배열의 타입도
[]를 연달아 작성해 정의할 수 있습니다.
let doubleArr: number[][] = [
[1, 2, 3],
[4, 5, 6],
];튜플은 JS에는 없고 TS에만 존재하는 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다.
이를 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있습니다.
예를 들어 튜플(배열) 타입은 아래와 같이 정의할 수 있습니다.
let tup1: [number, number] = [1, 2]; // 2개의 number 타입 요소를 가지고 있는 배열
let tup2: [number, string, boolean] = [1, "hello", true]; // 길이가 3이고 첫번째 요소는 number 타입, 두번째 요소는 string 타입, 세번째 요소는 boolean 타입을 가지고 있는 배열⚠️ 주의!
튜플 타입을 컴파일해보면 결국 JS의 배열로 변환 되기 때문에 배열 메서드인 push나 pop 을 이용해서 고정된 길이를 무시하고 요소를 추가하거나 삭제하지 않도록 주의해야 합니다.
타입스크립트에서는 2가지 방식으로 객체의 타입을 정의할 수 있습니다.
object 로 정의하기💬 타입스크립트에서 object 타입은 단순 값이 객체임을 표현하는 것 외에는 아무런 정보도 제공하지 않습니다.
따라서 이 타입은 객체의 프로퍼티에 대한 정보를 전혀 가지고 있지 않습니다.
그렇기 때문에 프로퍼티에 접근하려고 하면 오류가 발생하는데, 이럴 때에는 object가 아닌 객체 리터럴 타입을 사용해야 합니다.
객체 리터럴 타입은 다음과 같이 중괄호를 열고 객체가 갖고 있는 프로퍼티를 직접 나열해 만드는 타입입니다.
let user: { id?: number; name: string } = {
id: 1,
name: "John",
};
user = {
name: "Jane",
};🏗️ 여기서 한가지 알 수 있는 사실은 타입스크립트는 기존의 정적 타입 시스템을 따르는 C나 JAVA와는 달리 타입을 정의할 때, 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의한다는 점입니다.
TS의 이런 특징을 "구조적 타입 시스템"이라고 부릅니다.
특정 프로퍼티는 있어도 되고 없어도 되는 상황에서 사용
특정 프로퍼티를 상황에 따라 생략하도록 만들고 싶다면 다음과 같이 프로퍼티 이름 뒤에 ? 를 붙여주면 됨
let user: {
id?: number; // 선택적 프로퍼티가 된 id
name: string;
} = {
id: 1,
name: "이정환",
};
user = {
name: "홍길동",
};특정 프로퍼티를 읽기 전용으로 만들고 싶다면 다음과 같이 프로퍼티의 이름 앞에 readonly 키워드를 붙이면 됨
const config: { readonly apiKey: string } = {
apiKey: "1234567890",
};
// config.apiKey = "0987654321"; // 오류 발생. readonly 속성 사용 시 값 변경 불가타입 별칭은 type 타입_이름 = 타입 형태로 타입을 정의합니다.
이를 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있습니다.
// 타입 별칭
type User = {
id: number;
name: string;
nickname: string;
birth: string;
bio: string;
location: string;
};이렇게 만든 타입 별칭은 다음과 같이 변수의 타입을 정의할 때 타입 주석과 함께 이용할 수 있습니다.
const user: User = {
id: 1,
name: "John",
nickname: "Johny",
birth: "1990-01-01",
bio: "I am a developer",
location: "Seoul",
};인덱스 시그니처는 객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법입니다.
예를 들어 다양한 국가들의 언어 코드를 저장하는 객체가 하나 있을 때, 국가 코드에 100개의 프로퍼티가 추가 되어야 한다면 타입 정의에도 각 프로퍼티를 모두 정의해주어야 하기 때문에 매우 불편할 것입니다.
type CountryCodes = {
Korea: string;
UnitedState: string;
UnitedKingdom: string;
// (... 약 100개의 국가)
Brazil : string
};
let countryCodes: CountryCodes = {
Korea: "ko",
UnitedState: "us",
UnitedKingdom: "uk",
// (... 약 100개의 국가)
Brazil : 'bz'
};✨ 바로 이럴 때 인덱스 시그니처를 이용하면 다음과 같이 간단하게 타입을 정의할 수 있습니다.
type CountryCodes = {
[key: string]: string;
};
let countryCodes: CountryCodes = {
Korea: "ko",
UnitedState: "us",
UnitedKingdom: "uk",
// (... 약 100개의 국가)
Brazil : 'bz'
};📌
[key: string]: string은 "이 객체 타입에는 key가 string 타입이고 value가 string 타입인 모든 프로퍼티를 포함한다" 라는 의미를 갖고 있습니다.