[Typescript] 기본적인 타입 정리

Primitive Type

기본 타입입니다 간단함

• Number

let 나이: number = 30;

• String

let 이름: string = '엄준식';

• Boolean

let 여친여부: boolean = false;

Structural Type

자료구조, 함수등을 나타내는 타입입니다

• Object

// object는 Interface라는 문법으로 데이터타입 선언

interface UserType {
  name: string;
  age: number;
}

const user1: UserType = {
  name: "엄준식",
  age: 30,
};

const users: UserType[] = [
  {
    name: "엄준식",
    age: 30,
  },
  {
    name: "엄준석",
    age: 31,
  },
];

• Literal

// 해당 문자열인지 아닌지 타입으로 감별하는 것
// 자세한 내용은 >> https://toss.tech/article/template-literal-types

type Toss = 'toss';
// type TossPayments = 'toss payments';
type TossPayments = `${Toss} payments`;

// 이런식으로 Union Type이랑 만나면 For문처럼 돌아버림
type Toss = 'toss';
type Companies = 'core' | 'bank' | 'securities' | 'payments';
// type TossCompanies = 'toss core' | 'toss bank' | ...;
type TossCompanies = `${Toss} ${Companies}`

• Array

// 타입 1개
let string_arr: string[] = ["엄", "준", "식"];
let number_arr: number[] = [1, 2, 3];

// 타입 2개
let mix_arr: (number | string)[] = ["엄", 1, "준"];

• Tuple

// 개수, 타입이 확실할 때만 ㄱㄱ

let person: [number, string] = [30, "엄준식"];
let persons: [number, string][] = [
  [31, "엄준식1"],
  [32, "엄준식2"],
  [33, "엄준식3"],
  [34, "엄준식4"],
  [35, "엄준식5"],
  [36, "엄준식6"],
];

• Enum

// 열거형, 반드시 문자 or 숫자만 가능
// 자동으로 Literal Type으로 추론이 되며, 바로 앞의 갚을 따름
// Literal Type으로 자동추론은 좋지만 문자 숫자밖에 안됨 

enum Direction {
  Up = 1,
  Down, // 2
  Left, // 3
  Right, // 4
}

// 앞에 암것도 없으면 0부터 ㄱㄱ
enum Direction {
  Up, // 0
  Down, // 1
  Left, // 2
  Right, // 3
}

enum Example {
  A = getUserInfo(),
  B, // 오류! 앞에 나온 A가 계산된 멤버이므로 초기화가 필요합니다.
}

여기서 잠깐

Any는 죄악입니다

• Any

// 이건 타입 아무거나 들어와도 괜찮다는거
// 이거 알려는 주는데 쓰지 마십쇼
// 이거 쓸거면 자바스크립트 그냥 하지 왜 타입스크립트 함

let pig: any = "돼지";
pig = 1;
pig = false;

• Union (합집합)

// 변수의 값이 여러 타입을 가지는 경우 
// 얼핏 보면 Enum과 똑같아보이지만 Enum은 컴파일이 끝나도 잘 살아있지만
// 이건 타입이라서 사라짐

let age: number | string; // Primitive Type

age = 10;
age = '15';

type Color = "Red" | "Black" | "White"; // Literal Type

let color: Color;
color = "Red";

• Function

// 2가지 방법이 존재합니다 취향에 따라 사용하시길
// const 함수이름 = (매개변수: 그것의타입): 함수리턴값타입 => {}
// const 함수이름: (매개변수: 그것의타입) => 함수리턴값타입 = (매개변수) => {}
// 없을 수도 있는 값은 ? 붙이기

const myAdd = (x: number, y: number): number => {
  return x + y;
};

const myAdd2: (baseValue: number, increment: number) => number = (x, y) => {
  return x + y;
};

const myName = (firstName: string, lastName?: string): string => {
  if (lastName) return firstName + " " + lastName;
  return firstName;
};

const myName2: (firstName: string, lastName?: string) => string = (
  firstName,
  lastName
) => {
  if (lastName) return firstName + " " + lastName;
  else return firstName;
};

• Void

// return값이 없을 때 사용한다.
// 함수랑 같이 쓰임

const printN: (n: string) => void = (n) => {
  console.log(n);
};
const printN2 = (n: string): void => {
  console.log(n);
};

• Never

// 틱틱거리면서 Never 이외 그 어떤 타입도 안받아줌
// 유효하지 않거나 도달할 수 없는 분기 표시할때 쓰임

function fn(input: never) { return input }

// 오직 `never` 만 받는다.
declare let myNever: never
fn(myNever) // ✅

// 아무 값이나 전달하거나 아무 값도 전달하지 않으면 타입 에러 발생
fn() // ❌ 인자 'input'에 아무 값도 주어지지 않음
fn(1) // ❌ 'number' 타입은 'never' 타입에 할당할 수 없음
fn('foo') // ❌ 'string' 타입은 'never' 타입에 할당할 수 없음

// `any`도 통과할 수 없다.
declare let myAny: any
fn(myAny) // ❌ 'any' 타입은 'never' 타입에 할당할 수 없음