3주차

기본 타입

- 1. boolean
    2가지의 상태를 표현 → `boolean`
    3가지 이상의 상태를 표현하고 싶은 경우 → `enum` or `string`
    ☑️ ex   

    function isValidPassword(password: string): boolean {
      return password.length >= 8;
    }
    
    const password = "q1w2e3r4!";
    const valid = isValidPassword(password);
    
    // 8자 이상의 문자열
    if (valid) {
      console.log("유효한 패스워드입니다!");
    } else {
      console.log("유효하지 않은 패스워드입니다!");
    }

- 2. number
    TypeScript에서는 number 타입이 정수, 실수 뿐 아니라 2, 8, 16진수까지 표현
    - 모든 수치 연산에 사용되는 값은 number 타입으로 명시.
    ☑️ ex - Math.PI * radius * radius와 같이 무리수와 정수를 곱한 값도 number로 취급  

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

     
- 3.string
  - 작은 따옴표(’), 큰 따옴표(”), 백쿼트(`) 를 사용하여 문자열을 표현.
    ☑️ ex

    function greet(name: string): string {
      return `안녕, ${name}!`;
    }
    
    const name = "Spartan";
    const greeting = greet(name);
    console.log(greeting);

- 4. 배열
    `기본타입에 []가 붙은 형태`의 타입    
    ☑️ ex

    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}`);

    
- 5. 튜플(tuple)    
    - `튜플`은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열.

    - 튜플과 배열의 차이    
      배열은 number[], string[] 처럼 동일한 타입의 원소만 가짐 .
        - `const testScores: number[] = [90, 85, 78, 92, “88”];`
            - 위의 코드처럼 마지막 원소를 string 타입으로 넣으면 에러가 발생.
      튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 됨.

    - 튜플은 정의된 데이터 타입의 개수와 순서에 맞추어 저장해야함.
    - 튜플에서도 배열의 메소드인 push를 사용하여 정의된 데이터 타입의 개수보다 더 저장할 수는 있으나 이렇게 데이터를 넣으면 튜플 구조가 내부적으로 변경이 되니 지양
            
    ☑️ ex - string, number, boolean이라는 3개의 각각 다른 타입의 데이터를 보관하게 정의.   

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

     
- 6. enum
    - enum은 열거형 데이터 타입으로 명확하게 관련된 상수 값들을 그룹화 하고자 할 때 사용.

        (ex - 핼맷, 중절모자, 캡 중에 선택 )
    - 값의 수가 많고, 값들 사이의 관계가 뚜렷한 경우 사용 
    - 다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입.
    - enum 안에 있는 각 요소의 default값 : 숫자 0
    - enum 안에 있는 요소에는 `number` 혹은 `string`타입의 값만을 할당
    ☑️ ex   

    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);

    
- 7. const, readonly
 const와 readonly는 불변성을 보장

 - 7-1. let    
    - `let`키워드를 사용하여 값을 변경할 수 있는 변수선언    
    ☑️ ex   

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

- 7-2. const       
    - `const`키워드를 사용하여 값을 변경할 수 없는 상수 선언
    ☑️ ex

    const num: number = 5;
    console.log(num);  // 출력: 5
    
    num = 10;  // 에러: 'num'은 const로 선언되었으므로 재할당 불가

    
- 7-3. readonly    
    - 클래스의 속성에 const 키워드를 사용할 수 없다(에러발생)
    - `readonly`는 TypeScript에서 객체의 속성을 불변으로 만드는 데 사용되는 키워드.
        클래스의 속성이나 인터페이스의 속성을 변경할 수 없게함
    ☑️ ex

    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 속성이라 재할당 불가

    
- 8. any와 unknown, union    
  - 일반적으로 가변적인 타입의 데이터 저장은 unknown
  - 가변적인 타입을 일일이 정의할 수 있다면 union

  - 8-1. any 타입
    - TypeScript에서 `any` 타입은 어떤 타입의 값이든 저장할 수 있는는 모든 타입의 슈퍼 타입.
    - any 타입은 코드의 안정성과 유지 보수성을 저해할 수 있어요. 가급적 지양
    - JavaScript의 `object` 타입과 같은 최상위 타입
    ☑️ ex

    let anything: any;
    anything = 5; // 최초에는 숫자
    anything = 'Hello'; // 문자열도 가능
    anything = { id: 1, name: 'John' }; // JSON도 가능

     
  - 8-2. unknown 타입
    - `unknown` 타입은 `any` 타입과 비슷한 역할(모든 타입의 값을 저장가능)을 하지만 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야하기에 더 안전한 방식으로 동작함.
    - `stringValue = unknownValue as string;` 코드를 Type Assertion(타입 단언)이라고 합니다.
    
    ☑️ ex   

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

    
    ☑️ ex - unkwown 타입의 변수를 다른 곳에서 사용하려면 타입 단언을 통해 타입 보장을 해야함.   

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

    - `typeof` 키워드를 이용하여 타입 체크를 미리한 후 unknown 타입의 변수를 string 타입의 변수에 할당할 수 있음

- 8-3. union    
    - unknown 타입은 재할당을 할 때 타입 체크가 되어서 안전함을 보장하나 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않음음 
    - `union` 은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용됩니다
    - union은 `|` 연산자를 사용하여 여러 타입을 결합하여 표현.
    ☑️ ex   

    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);