타입 스크립트 - 타입 종류

문자, 숫자, 불린 타입

// 문자, 숫자, 불린 타입

let str: string = "Hello World!";
let num: number = 123;
let boo: boolean = true;

객체 타입

// 객체 타입

// 객체 내부에 타입을 명시해줘야 함
const obj: { a: number } = { a: 0 }; // 객체는 타입 선언에 맞게 초깃값을 지정해야 함
obj.a = 123;

배열 타입

// 배열 타입

// [] 앞에 배열 타입을 명시해줘야 함
const arr1: number[] = []; // 객체와 다르게 배열은 초깃값을 지정 안해도 됨
const arr2: Array<number> = []; // 위와 똑같음 하지만 위 패턴이 간단해서 더 많이 사용
arr1[0] = 123;
arr2[0] = 123;
arr1.push(456);
arr2.push(456);

함수 타입

// 함수 타입

// 화살표 함수 구조로 매개 변수의 타입과 반환값의 타입을 명시
// 매개변수의 순서가 존재하기 때문에 이름이 달라도 됨
const hello1: (msg: string, b: number) => string = (msg, num) => {
  // ...
  return msg;
};

// 매개변수에 직접 명시할 수도 있음
const hello2 = (msg: string, num: number): string => {
  // ...
  return msg;
};

function hello3(msg: string, xyz: number): string {
  return msg;
}

Enum 타입

// Enum 타입
// 타입 + 값(데이터)의 집합으로 역방향 매핑(reverse mapping) 가능.

// 일반적인 배열
const week = ["Sun", "Mon", "Tue", "wed", "Thu", "Fri", "Sat"];
console.log(week[0]); // "Sun"
console.log(week[6]); // "Sat"

// 에러 발생시 tsconfig.json의 "compilerOptions" 내부에
// "target": "ES2015" , "lib": ["ESNext", "DOM", "DOM.Iterable"] 작성
console.log(week.findIndex((d) => d === "Sun")); // 0
console.log(week.findIndex((d) => d === "Sat")); // 6

// Week 타입을 생성, enum은 타입이자 값
enum Week {
  Sun,
  Mon,
  Tue,
  Wed,
  Thu,
  Fri,
  Sat,
}
console.log(Week[0]); // "Sun"
console.log(Week[6]); // "Sat"
console.log(Week.Sun); // 0
console.log(Week.Sat); // 6

// index를 바꿀 수 있음, 바꾼 값의 다음 값들도 변경됨
enum Colors {
  Red,
  Green = 4,
  Blue,
}
console.log(Colors.Red); // 0
console.log(Colors[0]); // "Red"
console.log(Colors.Green); // 4
console.log(Colors.Blue); // 5
console.log(Colors[4]); // "Green"

// 숫자가 아닌 문자를 지정할 경우 역방향 매핑은 불가능
enum Colors2 {
  Red = "r",
  Green = 4,
  Blue,
}
console.log(Colors.Red); // "r"
console.log(Colors.r); // 불가능

Void 타입

// Void 타입
// 값을 반환하지 않는 함수의 반환 타입

const hello: (msg: string) => void = (msg) => {
  console.log(`Hello ${msg}`); // return 키워드를 사용하지 않는 함수는 void 타입을 반환
};

const hi: (msg: string) => undefined = (msg) => {
  return undefined; // return 키워드를 사용하여 명시적으로 undefined일 때는 반환 타입 지정이 undefined도 가능
};

hello("World");

Tuple 타입

// Tuple(튜플) 타입
// 고정된 길이(length)의 배열 타입

const arr: number[] = [4, 5]; // 일반적인 배열은 길이가 늘어남
arr[2] = 6; // [4, 5, 6]
arr[3] = 7; // [4, 5, 6, 7]

const tup: [number, number] = [4, 5]; // [] 내부에 타입을 지정, 길이를 2로 고정
tup[2] = 7; // 길이가 2이기 때문에 불가능
tup.push(6); // push로는 추가가 돼서 의도치 않은 문제가 발생할 수 있음
tup.splice(2, 0, 6); // splice를 사용하는 경우도 값이 추가됨

const userA: [number, string, boolean] = [1, "Heropy", true];
const userB: [number, string, boolean] = ["Neo", 2, false]; // 순서가 바뀌어서 불가능
const userC: [number, string, boolean] = [3, "Evan", true, "abc@gmail.com"]; // 길이가 3이기 때문에 불가능

Never 타입

// Never 타입
// 어떤 것도 할당할 수 없는 타입
// 혹은 정상적으로 종료되지 않는 함수의 반환 타입

// 타입을 생략하면 never 타입이 명시되어 있는 것임
const nev: [] = [];
nev.push(6); // 어떠한 값도 불가능

// 무조건 에러를 발생시키는 함수로 정상적으로 종료되지 않는다. 이 때 함수는 never 타입을 반환한다.
const myError: (m: string) => never = (msg) => {
  throw `에러! - ${msg}`;
};

try {
  myError("Never 타입..."); // 에러
} catch (err) {
  console.log(err);
}

Any 타입

// Any 타입
// 어떤 것도 할당할 수 있는 타입
// any 타입은 최대한 사용하지 않는 것이 좋음 (any를 쓰면 자바스크립트를 사용하는 것과 동일)

let anything: any = "Hello";
anything = 123;
anything = { a: "A" };
anything = [1, 2, 3];

const a: string = anything;
const b: number = anything;
const c: boolean = anything;

Unknown 타입

// Unknown 타입
// 어떤 것도 할당할 수 있지만, 정확히 무엇인지 알 수 없는 타입
// 다른 타입에는 할당할 수 없음
let anything2: unknown = "Hello";
anything2 = 123;
anything2 = { a: "A" };
anything2 = [1, 2, 3];

const d: string = anything2; // unknown 형식은 다른 타입에 할당 불가능
const e: number = anything2; // unknown 형식은 다른 타입에 할당 불가능
const f: boolean = anything2; // unknown 형식은 다른 타입에 할당 불가능

// 실제 사용할 때는 조건을 추가하여 엄격하게 사용할 수 있다.
if (typeof anything2 === "string") {
  const g: string = anything2;
}

// Any와 Unknown의 차이점
let any: any = "hello";
console.log(any.toUpperCase()); // OK!
any = 123;
console.log(any.toUpperCase()); // OK! - 런타임 에러 발생!

let unk: unknown = "hello";
console.log(unk.toUpperCase()); // OK!
if (typeof unk === "string") {
  console.log(unk.toUpperCase()); // OK!
}
unk = 123;
if (typeof unk === "number") {
  console.log(unk.toUpperCase()); // Error!
}

Union 타입

// Union(유니언) 타입
// 2개 이상의 타입이 허용되는 타입

let uni: string | number | number[];
uni = "Hello";
uni = 123;
uni = [1, 2, 3];

Intersection 타입

// Intersection(인터섹션) 타입
// 2개 이상의 타입이 병합된 타입

// type을 만듦
type UserA = {
  name: string;
  age: number;
};

type UserB = {
  isValid: boolean;
};

// name, age만 있어야 함
const user1: UserA = {
  name: "A",
  age: 12,
  isValid: true, // 불가능
};

// isValid만 있어야 함
const user2: UserB = {
  name: "B", // 불가능
  age: 85,
  isValid: false,
};

// Intersection 타입: name, age, isValid만 있어야 함
const user3: UserA & UserB = {
  name: "C",
  age: 40,
  isValid: false,
  email: "abc@gmail.com" // 불가능
};