[TypeScript] 유데미 강의 "Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS" 정리(섹션 2: 기본 & 기본 타입)

섹션 2: 기본 & 기본 타입

📌 튜플(tuple)

• 독특한 배열
• 각 요소 별로 타입을 지정할 수 있으며, 고정된 길이 가짐
• push() 메서드로 요소 추가할 경우 길이 늘어남

const person: {
  name: string;
  age: number;
  hobbies: string[]; // 배열
  role: [number, string]; // 튜플
} = {
  name: "김일남",
  age: 99,
  hobbies: ["Squid Game", "Make Money"],
  role: [1, "businessman"],
};

// person.role[1] = 2; // 1번 인덱스는 string 타입 이므로 number 타입의 값으로 변경할 수 없다.
person.role[1] = "chairman"; // 변경하고자하는 값이 string 타입이기 때문에 가능
person.role.push("admin"); // 타입스크립트가 push() 메서드는 막지 않는다.

console.log(person);

 

📌 열거형(enum)

• 자바스크립트에는 없는 기능
• 튜플 개념과 비슷
• 특정 식별자를 몇 개 가지고 있음
• 애플리케이션에서 사용하는 전역 상수이며 숫자 값을 가짐
• 읽을 때는 사람이 읽을 수 있는 라벨 사용

// CASE1
// 식별자는 기본적으로 왼쪽에서 부터 0부터 시작하는 연속적인 정수 값을 가진다.
// enum Role {
//   ADMIN,        // 0
//   READ_ONLY,    // 1
//   AUTHOR,       // 2
// }

// CASE2
// 식별자에 특정 값을 할당할 수 있고, 정수인 경우 연속적인 값을 가진다.
// enum Role {
//   ADMIN = 5,    // 5
//   READ_ONLY,    // 6
//   AUTHOR,       // 7
// }

// CASE3
// 식별자에 문자열 값도 할당 가능하다.
enum Role {
  ADMIN = "ad", // ab
  READ_ONLY = "ro", // ro
  AUTHOR = "au", // au
}

const person = {
  name: "김일남",
  age: 99,
  hobbies: ["Squid Game", "Make Money"],
  role: Role.ADMIN,
};

// console.log(person.role); // CASE1: 0, CASE2: 5, CASE3: ab

if (person.role === Role.ADMIN) {
  console.log(person.name); // 김일남
}

 

📌 유니온(union)

• 하나 이상의 타입을 지정 가능

// | 연산자 사용해 하나 이상의 타입 지정
function combine(input1: number | string, input2: number | string) {
  let result;
  // 분기문 사용해 연산 가능 여부 체크
  if (typeof input1 === "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

const combinedAges = combine(99, 98);
console.log(combinedAges);

const combinedNames = combine("김일남", "김이남");
console.log(combinedNames);

 

📌 리터럴(literal)

• 리터럴을 타입으로 이용 가능
• 주로 유니언 타입과 함께 사용

// resultConversion: "as-number" | "as-text"가 리트럴 타입
function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: "as-number" | "as-text"
) {
  let result;
  if (
    (typeof input1 === "number" && typeof input2 === "number") ||
    resultConversion === "as-number"
  ) {
    result = Number(input1) + Number(input2);
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

const combinedAges = combine("99", "98", "as-number");
console.log(combinedAges);

 

📌 타입 별칭(type alias)

• type 키워드 사용한 별칭 지정 가능

// uniion 코드를 type alias 수정해봄
type Comabinable = number | string; // 별칭 지정
type CoversionDescriptor = "as-number" | "as-text"; // 별칭 지정

// [[ 별칭 적용
function combine(
  input1: Comabinable,
  input2: Comabinable,
  resultConversion: CoversionDescriptor
) {
// ]]
  let result;
  if (
    (typeof input1 === "number" && typeof input2 === "number") ||
    resultConversion === "as-number"
  ) {
    result = Number(input1) + Number(input2);
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

const combinedAges = combine("99", "98", "as-number");
console.log(combinedAges);

 

📌 함수 타입

// 반환값이 없는 경우
function printResult(num: number): void {
  console.log("Result: " + num);
}

function add(n1: number, n2: number) {
  return n1 + n2;
}

// 반환 값이 있는 경우
let combineValues: (a: number, b: number) => number;

combineValues = add;
console.log(combineValues(1, 1));

// 콜백 함수 타입
function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

addAndHandle(1, 2, (num) => {
  console.log(num);
});

 

📌 unknown

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = "김일남";

// 사용자가 무엇을 입력할지 아직 모르기 때문에 unknown이라고 함
// any는 타입스크립트에서 가장 유연한 타입, unknown은 any보다 조금 더 제한적

// userName = userInput; // userInput이 any 타입이면 에러가 없지만, unknown 타입이면 에러 발생

// if문으로 타입을 확인하면 에러 없이 사용 가능
if (typeof userInput === "string") {
  userName = userInput;
}

 

📌 never

// 의도적으로 예외를 일으키고 반환값을 만들지 않을 때 사용
function generateError(message: string, code: number): never {
  throw { message, errorcode: code }; // 에러를 일으키면 실행이 중단되기 때문에 void가 반환하지 않고 never를 반환(아무것도 반환하지 않음)
}

const result = generateError("An error occurred!", 500);
console.log(result);