[TypeScript] 1. 타입스크립트 기본

기본 타입

타이브크립트가 자체적으로 제공하는 타입

 

1) 원시 타입 (Primitive Type)

하나의 값만 저장하는 타입 ex. number, string, boolean, null, undefined

 

number

// 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;

 

string

// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${num1}`;

 

boolean

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

 

null

// null
let null1: null = null;

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,            // strict 옵션의 하위버전
    "strictNullChecks": false, // 엄격한 null 검사
    "moduleDetection": "force",
    "skipLibCheck": true,
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

// index.ts
// tsconfig.json의 "strictNullChecks": false
// null 타입이 아닌 변수에 null 허용
let numA: number = null;

 

리터럴

타입 자체에 값을 넣어서 그 값 이외의 값이 들어오면 오류

// 리터럴

let numA: 10 = 10;
numA = 12; // 오류

 

 

---

 

2) 배열과 튜플

 

배열

// 배열

// 1번 방식
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "ayeong"];

// 2번 방식
let boolArr: Array<boolean> = [true, false, true];

// 배열에 들어가는 요소들의 타입이 다양할 경우
let multiArr: (string | number)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5]
];

 

튜플

// 튜플
// 길이와 타입이 고정된 배열

let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "2", true];

// 배열 메서드를 사용할 때 길이 달라져도 오류 발생하지 않음
// ex. push, pop
tup1.push(3);
tup2.pop();

// 사용 예시
const users: [string, number][] = [
  ["진아영", 1],
  ["이승민", 2],
  ["차유림", 3],
  // [4, "김오류"] // 오류
]

 

 

---

 

3) 객체

 

타입스크립트 : 구조적 타입 시스템

property를 기준으로 타입 결정
cf. 명목적 타입 시스템 : 이름을 기준으로 타입 결정 (ex. C)

 

객체

// object타입
// peoperty나 메서드에 접근하면 오류

let user: object = {
  id: 1,
  name: "진아영"
};

// user.id; // 오류

// 객체 리터럴 타입 사용

let user: {
  id?: number;  // 선택적 property (optional property)
  name: string;
} = {
  id: 1,
  name: "진아영"
};

user.id;

// readonly property

let config: {
  readonly apiKey: string;  // 읽기 전용 property
} = {
  apiKey: "MY API KEY",
};

config.apiKey = "NEW KEY";  // 변경시 오류

 

4) 타입 별칭과 인덱스 시그니처

 

타입 별칭

공통적으로 사용하는 타입일 경우 타입 별칭 선언

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

let user: User = {
  id: 1,
  name: "이정환",
  nickname: "winterlood",
  birth: "1997.01.07",
  bio: "안녕하세요",
  location: "부천시",
};

let user2: User = {
  id: 2,
  name: "홍길동",
  nickname: "winterlood",
  birth: "1997.01.07",
  bio: "안녕하세요",
  location: "부천시",
};

• 동일한 스코프 내에 중복 타입 선언 불가능
• 스코프가 다르면 중복된 이름으로 여러개의 별칭 선언 가능

type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

function test() {
  type User = string;
}

• 컴파일하면 자바스크립트 문법에 따라 타입 별칭은 다 사라짐

let user = {
    id: 1,
    name: "이정환",
    nickname: "winterlood",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location: "부천시",
};
let user2 = {
    id: 2,
    name: "홍길동",
    nickname: "winterlood",
    birth: "1997.01.07",
    bio: "안녕하세요",
    location: "부천시",
};
function test() {
}
export {};

 

인덱스 시그니처

인덱스 시그니쳐는 객체 타입을 유연하게 정의할 수 있도록 돕는 특수한 문법

// 사용전

type CountryCodes1 = {
  Korea: string;
  UnitedState: string;
  UnitedKingdom: string;
  // (... 약 100개의 국가)
  Brazil : string
};

let countryCodes1: CountryCodes1 = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

// 사용후

type CountryCodes2 = {
  [key: string]: string;
};

let countryCodes2: CountryCodes2 = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

• 반드시 포함해야하는 프로퍼티가 있다면 따로 명시 가능

type CountryNumberCodes3 = {
  [key: string]: number;
  Korea: number;
};

• 인덱스 시그니쳐를 사용하면서 동시에 추가적인 프로퍼티를 또 정의할 때에는 인덱스 시그니쳐의 value 타입과 직접 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 함

type CountryNumberCodes4 = {
  [key: string]: number;
  Korea: string; // 오류
};

 

5) enum 타입 (열거형 타입)

 

enum

열거형 타입은 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입

여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

컴파일 결과 자바스크립트의 객체로 변환

• 숫자 할당 가능

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

• 다음과 같이 enum의 멤버들을 값으로 활용
• 여러개의 값을 숫자로 표기할 때 enum을 이용해 보다 안전하고 직관적으로 관리

// enum 타입

enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 0
};

const user2 = {
  name: "홍길동",
  role: Role.USER, // 1
};

const user3 = {
  name: "아무개",
  role: Role.GUEST, // 2
};

• enum 멤버에 숫자 값을 직접 할당하지 않아도 0 부터 1씩 늘어나는 값으로 자동으로 할당
• 자동 할당되는 값은 기본적으로 0부터 시작

enum Role {
  ADMIN, // 0 할당(자동)
  USER,  // 1 할당(자동)
  GUEST, // 2 할당(자동)
}

• 자동 할당 값을 변경하고 싶다면 첫번째 값 설졍

enum Role {
  ADMIN = 10, // 10 할당
  USER,       // 11 할당(자동)
  GUEST,      // 12 할당(자동)
}

 

문자열 열거형

enum Language {
  korean = "ko",
  english = "en",
}

enum Role {
  ADMIN,
  USER,
  GUEST,
}

enum Language {
  korean = "ko",
  english = "en",
}

const user1 = {
  name: "이정환",
  role: Role.ADMIN, // 0
  language: Language.korean,// "ko"
};

 

enum은 컴파일 결과 객체가 된다

enum은 컴파일될 때 다른 타입들 처럼 사라지지 않고 자바스크립트 객체로 변환 (따라서 우리가 위에서 했던 것 처럼 값으로 사용 가능)

// tsc 결과

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "en";
    Language["japanese"] = "jp";
})(Language || (Language = {}));
const user1 = {