타입스크립트 기본

타입스크립트 기본

타입스크립트 기본 타입

number, string, boolean, null, undefined

// type annotation
// 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 관련 메서드만 사용 가능
num1.toFixed();

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

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

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

// 리터럴 타입 (값으로 만든 타입)
// 다른 값 넣을 수 없음
let numA: 10 = 10;

let strA: "hello" = "hello";

let boolA: true = true;

원시타입과 리터럴타입

// 배열
let numArr: number[] = [1, 2, 3];

let strArr: string[] = ["hello", "hi"];

// <> 제너릭
let boolArr: Array<boolean> = [true, false, true];

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

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

// 튜플
// JS x, TS에서만 지원
// 길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];

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

// 배열 메서드를 사용하면 TS 타입 체크 x => 사용 주의
tup1.push(1);
tup1.pop();
tup1.pop();
tup1.pop();

const users: [string, number][] = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
];

객체

// 객체 리터럴 타입
// 구조를 기준으로 타입 정의 => 구조적 타입 시스템 (= Property Based Type System)
// 이름만을 기준으로 타입 정의 => 명목적 타입 시스템 (C, Java 등)

let user: {
  id?: number;
  name: string;
} = {
  id: 1,
  name: "레이첼",
};

let cat: {
  name: string;
  color: string;
} = {
  name: "깜냥이",
  color: "black",
};

user.id;
cat.color;

user = {
  name: "김김김",
};

// readonly => Property의 값 수정 불가 ex) config.apiKey = "" 불가
let config: {
  readonly apiKey: "MY API KEY";
} = {
  apiKey: "MY API KEY",
};

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

// 타입 별칭
type User = {
  id: number;
  name: string;
  nickname: string;
  birth: string;
  bio: string;
  location: string;
};

function func() {
  // 함수 영역 내에서만 type 정의됨
  type User = {};
}

let user: User = {
  id: 1,
  name: "Rachel",
  nickname: "Rachel Pink",
  birth: "2023.06.30",
  bio: "안녕하세요",
  location: "South Korea",
};

// 인덱스 시그니처
// key, value type 기준을 이용해 객체 타입 정의
type CountryCodes = {
  [key: string]: string;
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
};

type CountryNumberCodes = {
  [key: string]: number;
  // 필수 명시
  Korea: number;
};

let countryNumberCodes: CountryNumberCodes = {
  Korea: 410,
  UnitedState: 840,
  UnitedKingdom: 826,
};

Enum 타입

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

const user1 = {
  name: "이정환",
  role: 0, // 0 <= 관리자
};

const user2 = {
  name: "Rachel",
  role: 1, // 1 <= 일반 유저
};

const user3 = {
  name: "아무개",
  role: 2, // 2 <= 게스트
};

// 위 코드를 enum을 활용해 표시, 숫자형 enum
// enum은 컴파일 결과 사라지지 x
enum Role {
  ADMIN = 0,
  USER = 1,
  GUEST = 2,
}

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

const user2 = {
  name: "Rachel",
  role: Role.USER,
};

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

console.log(user1, user2, user3);
// { name: '이정환', role: 0 } { name: 'Rachel', role: 1 } { name: '아무개', role: 2 }
// 잘 할당된 것을 확인할 수 있다.

// enum Role {
//     ADMIN,
//     USER,
//     GUEST,
//   }
// + 숫자 할당을 해주지 않아도 자동으로 0, 1, 2 할당된다.
// + ADMIN = 10으로 힐당해주면 밑은 자동으로 11, 12로 할당
// + 중간 USER = 10을 할당해주면 ADMIN = 0, GUEST = 11으로 자동 할당

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

const user4 = {
  language: Language.korean,
};

Any와 Unknown 타입

// any: 특정 변수의 타입을 우리가 확실히 모를 때 사용 => 어떤 타입이던지

let anyVar: any = 10;
anyVar = "hello";

anyVar = true;
anyVar = {};
anyVar = () => {};

// 런타임에 TypeError 발생 => TS 이점을 활용하지 못하므로 any 사용 주의
anyVar.toUpperCase();
anyVar.toFixed();

let num: number = 10;
num = anyVar;

// unknown, 아무 타입의 값이나 넣을 수 있음
let unknownVar: unknown;
unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

// any와 차이점: unknown타입에 모든 값을 저장할 순 있지만 반대로는 안된다
// 즉, unknown 타입의 값을 다른 곳에 집어 넣을 수 없음 + 메서드 사용 x + 연산(+, -, *, / 등) x
// num = unknownVar; (x)

// => unknown 타입의 값을 활용하고 싶다면 조건문으로 unknown 타입인 변수의 타입을 확실하게 확인했을 때만 사용 가능
// 이런 과정을 "타입 정제"라고 한다
if (typeof unknownVar === "number") {
  num = unknownVar;
}

// 변수의 타입이 확실하지 않다면 any타입보다 좀 더 안전한 unknown 타입을 사용하는 것이 좋다

Void와 Never 타입

// void => 공허 => 아무것도 없음을 의미하는 타입

function func1(): string {
  return "hello";
}

// 반환 x => void
function func2(): void {
  console.log("hello");
}

let a: void;

// a = 1;
// a = "hello";
// a = {};

// void타입은 오직 undefined만 담을 수 있다
a = undefined;
// (tsconfing.js) "strictNullChecks": false 하면 null도 집어넣을 수 있음

// never
// 존재하지 않는, 불가능한 타입, 모순

// 무한 루프 함수는 반환을 할 수가 없으므르(정상적으로 종료 x) never 타입 선언
function fun3(): never {
  while (true) {}
}

// 실행되면 바로 프로그램 종료하므로 never 타입 선언
function fun4(): never {
  throw new Error();
}

// 변수를 never로 설정하면 다른 모든 값(number, object, null, string, undefined 등)을 담을 수 없다
// + any 타입의 변수도 x
let b: never;
// b = 1;

---

[참고]

한 입 크기로 잘라먹는 타입스크립트

• Section 2. 타입스크립트 기본 강의를 듣고 정리한 내용입니다.