[2024.06.25 TIL] 내일배움캠프 49일차 (TypeScript 종합 강의, 기본 타입)

---

본 내용은 내일배움캠프에서 활동한 내용을 기록한 글입니다.

---

💻 TIL(Today I Learned)

📌 Today I Done

✏️ boolean 타입

• 참(True) 또는 거짓(False) 값을 나타냄

• 조건문, 비교 연산에서 주로 사용

function isValidPassword(password: string): boolean {
  return password.length >= 8;
}

const password = "q1w2e3r4!";
const valid = isValidPassword(password);

if (valid) {
  console.log("유효한 패스워드입니다!");
} else {
  console.log("유효하지 않은 패스워드입니다!");
}

✏️ number 타입

• 모든 숫자를 나타냄

• 정수, 실수 뿐 아니라 2, 8, 16진수까지 표현 가능

function calculateArea(radius: number): number {
  return Math.PI * radius * radius;
}

const radius = 5;
const area = calculateArea(radius);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);

✏️ string 타입

• 텍스트 데이터를 나타냄

• ``, '', ""를 사용해서 문자열 표현 가능

function greet(name: string): string {
  return `안녕, ${name}!`;
}

const name = "Spartan";
const greeting = greet(name);
console.log(greeting);

✏️ 배열(array) 타입

• 기본타입에 []가 붙은 형태의 타입

• 배열의 타입은 명시적으로 작성해 주는 것이 좋음

• 일반 변수에서는 특별히 값이 초기화되어 타입이 변하는 등의 일이 아니면 타입 추론에게 맡기는 편이 코드의 간결성과 가독성에 좋음

• 하지만 일반 변수도 그냥 초기화 선언할 때는 타입을 명시해줘야 함

• 물론, 매개변수는 반드시 타입을 명시하는 게 좋음

function calculateSum(numbers: number[]): number {
  let sum: number = 0;
  for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }
  return sum;
}

const testScores: number[] = [90, 85, 78, 92, 88];
const sumScore = calculateSum(testScores);
console.log(`점수의 총합: ${sumScore}`);

✏️ 튜플(tuple) 타입

• 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열

• 배열과는 타입을 명시하는 방법이 다름

• 명시한 타입의 수와 튜플 요소의 수가 일치해야 함

const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!

• 튜플에 데이터를 추가하는 것은 좋은 선택이 아님

✏️ enum 타입

• 열거형 데이터 타입

• 명확하게 관련있는 상수 값들을 그룹화할 때 사용

• 다양한 상수를 한 곳에서 관리하고 쉽게 접근하기 위해 사용

• enum 안에 있는 요소에 값을 설정하지 않으면 0부터 순차적으로 값을 가짐

enum UserRole {
  ADMIN = "ADMIN",
  EDITOR = "EDITOR",
  USER = "USER",
}

enum UserLevel {
  NOT_OPERATOR, // 0
  OPERATOR // 1
}

function checkPermission(userRole: UserRole, userLevel: UserLevel): void {
  if (userLevel === UserLevel.NOT_OPERATOR) {
    console.log('당신은 일반 사용자 레벨이에요');
  } else {
    console.log('당신은 운영자 레벨이군요');
  } 

  if (userRole === UserRole.ADMIN) {
    console.log("당신은 어드민이군요");
  } else if (userRole === UserRole.EDITOR) {
    console.log("당신은 에디터에요");
  } else {
    console.log("당신은 사용자군요");
  }
}

const userRole: UserRole = UserRole.EDITOR;
const userLevel: UserLevel = UserLevel.NOT_OPERATOR;
checkPermission(userRole, userLevel);

✏️ const 키워드

• 불변성을 보장하는 키워드

• const를 사용해서 선언한 변수는 상수가 됨 (값이 변할 수 없음)

• 즉, 연산자로 다시 할당이 불가능하다는 의미

const num: number = 5;
console.log(num);  // 출력: 5

num = 10;  // 에러: 'num'은 const로 선언되었으므로 다시 할당될 수 없어요!

const nums: number[] = [];
console.log(nums);  // 출력: []
nums.push(1); // 할당은 되지 않아도 배열에 데이터를 추가/삭제하는 것은 문제가 안됩니다!
nums.push(2); // 은근히 헷갈릴 수 있지만 = 연산자 기준으로만 생각하면 매우 쉬워요!
console.log(nums);  // 출력: [1, 2]

nums = [];  // 에러: 'nums'는 const로 선언되었으므로 다시 할당될 수 없어요!

✏️ readonly 키워드

• TypeScript에서 등장한 키워드

• const와 동일하게 불변성을 보장하는 키워드

• 객체의 속성을 불변으로 만드는 데 사용되는 키워드

• 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만듦

class Person { // 클래스는 다른 강의에서 자세히 설명해드릴게요!
  readonly name: string;
  readonly age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('Spartan', 30);

console.log(person.name);  // 출력: 'Spartan'
console.log(person.age);   // 출력: 30

person.name = 'Jane';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없어요!
person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없어요!

✏️ any 타입

• 모든 타입의 슈퍼 타입

• 어떤 타입의 값이든 저장할 수 있다는 의미

let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' }; // JSON도 들어가네요

• 굉장히 편리해 보이지만 가급적 사용하면 안됨

• TypeScript는 프로그램의 타입 안정성을 확보하기 위해서 사용하기 때문에

• any 타입으로 인해 코드의 안정성과 유지 보수성이 떨어질 수 있음

✏️ unknown 타입

• any 타입의 대체제

• any 타입과 비슷한 역할이지만 더 안전한 방식으로 동작함

• unknown 타입의 변수를 정의할 때는 그냥 unknown를 명시하고 작성하면 됨

• 하지만 그 변수를 다른 곳에 할당하거나 재할당하는 경우에는 어떤 타입인지 구체적으로 명시해야 함

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string;
console.log(stringValue); // 나는 문자열이지롱!

let unknownValue: unknown = '나는 문자열이지롱!';
let stringValue: string;

if (typeof unknownValue === 'string') {
  stringValue = unknownValue;
  console.log('unknownValue는 문자열이네요~');
} else {
  console.log('unknownValue는 문자열이 아니었습니다~');
}

✏️ union 타입

• unknown 타입도 결국 재할당이 일어나지 않으면 안정성이 보장되지 않음

• 그런 한계를 위해 union 타입을 사용

• 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용

• 즉, 해당 변수가 될 수 있는 타입들을 명시해 두는 것

• | 연산자를 이용해 여러 타입들을 결합하여 표현

type StringOrNumber = string | number; // 원한다면 | boolean 이런식으로 타입 추가가 가능해요!

function processValue(value: StringOrNumber) {
  if (typeof value === 'string') {
    // value는 여기서 string 타입으로 간주됩니다.
    console.log('String value:', value);
  } else if (typeof value === 'number') {
    // value는 여기서 number 타입으로 간주되구요!
    console.log('Number value:', value);
  }
}

processValue('Hello');
processValue(42);

---

📌 Tomorrow's Goal

✏️ TypeScript 문법 종합 강의 시청

• 오늘 미처 끝내지 못한 TypeScript 강의를 끝내고 내용을 정리할 예정

• 객체지향 설계 쪽 내용이 조금 어렵지만 조금 더 내용을 찾아보면서 진행할 예정

✏️ Nest.js 강의 시청

• TypeScript에 대한 강의 시청과 정리가 끝나면 시청할 예정

• Nest.js는 TypeScript 내용을 기반으로 한다고 하기에 TypeScript를 먼저 시청했음

• 새로운 웹 프레임워크인데 Express에 Spring의 구조가 약간 섞여 있다고 들음

• 요즘 취업 시장에서 Nest.js에 대한 질문이 많기 때문에 이번에 확실히 학습할 예정

• 그리고 강의 예제 말고도 혼자서 예제를 만들어서 실습하는 것이 중요하다고 함

---

📌 Today's Goal I Done

✔️ TypeScript 문법 종합 강의 시청

• 오늘은 TypeScript의 타입에 대한 내용을 학습함

• 타입을 명시하는 것도 규칙이 존재하고 잘 명시된 코드는 가독성과 유지 보수 향상에 도움이 됨

• 어떻게 명시하는 게 좋은지는 예제나 과제를 통해서 조금 더 학습할 예정

• 초반에는 아는 내용이 많아서 수월했지만, 뒤로 갈 수록 어려운 타입에 대해 배우니 강의 말고 구글링을 통해서 조금 더 학습함