DAY3

2025년 2월 26일

✨ 배열

• 배열 타입을 정의하는 방식은 두가지임

  • 타입[]
  • Array<타입> (제네릭)

  // 배열
  let numArr: number[] = [1, 2, 3];
  let strArr: string[] = ['hello', 'im', 'winterlood'];
  let boolArr: Array<boolean> = [true, false, true];
  
  // 배열에 들어가는 요소들의 타입이 다양할 경우
  let multiArr: (number | string)[] = [1, 'hello'];
  
  // 다차원 배열의 타입을 정의하는 방법
  let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5]
  ];

✨ 튜플

• 길이와 타입이 고정된 배열

• 별도로 존재하는 자료형이라 보기는 어렵고 사실은 그냥 배열임

• 따라서, 배열의 메서드를 사용할 수 있음 but, 배열 메서드를 사용할 경우 튜플의 길이 제한이 발동하지 않음 -> 따라서 튜플을 사용해서 배열 메서드를 사용할때는 주의해야함!!!!!!
  e.g) push(), pop()

• 튜플을 언제 사용할때 유용할까?

• 인덱스별로 다른값을 넣어야할때 그 인덱스의 순서와 위치가 헷갈릴 때 사용하면 유용

  // 튜플
  // 길이와 타입이 고정된 배열
  let tup1: [number, number] = [1, 2];
  // tup1 = [1, 2, 3]; 오류
  // tup1 = ['1', '2']; 오류
  
  let tup2:[number, string, boolean] = [1, '2', true];
  // tup2 = ['2', 1, true]; 오류
  // tup2 = [1]; 오류
  
  tup1.push(1);
  tup1.pop();
  tup1.pop();
  tup1.pop();
  
  const users: [string, number][] = [
    ['이정환', 1],
    ['이아무개', 2],
    ['김아무개', 3],
    ['박아무개', 4],
    [5, '최아무개'], // 오류
  ];

✨ 객체

• 타입스크립트에서 객체의 타입을 지정할때 :object만 써주면 프로퍼티를 알 수 없다고 함

  • 따라서, object를 쓰지 않고, 객체 리터럴 타입을 활용해야함

• 객체 리터럴 타입을 쓰고, 프로퍼티의 타입까지 모두 정의해줘야함

• 객체의 구조를 기준으로 타입을 정의 : 타입스크립트의 특징 -> 구조적 타입 시스템 (프로퍼티를 기준으로 타입을 결정하는 시스템. Property Based System)

  • c언어나 Java는 이름을 기준으로 타입을 정의 -> 명목적 타입 시스템

• 선택적인 프로퍼티를 작성하기 위해서는 ?: 사용

  • 선택적 프로퍼티(optional property)

• 프로퍼티 수정을 하지 못하도록 막고 싶다면 readonly 사용 (읽기 전용 프로퍼티)
  e.g) apiKey

  // 객체
  
  let user: {
    id?: number;
    name: string;
  } = {
    id: 1,
    name: '이정환,
  }
  
  user.id;
  
  let dog: {
  name: string;
  color: string;
  } = {
    name: '돌돌이',
    color: 'brown'
  }
  
  let config: {
    readonly apiKey: string;
  } = {
    apiKey: 'MY API KEY'
  }
  
  config.apiKey = 'hacked'; // 오류

✨ 타입 별칭

• 위에서 본 객체를 리터럴 타입을 사용해서 여러 개의 객체를 타입 정의한다면 일일이 하나씩 추가해줘야하므로 귀찮음

  • 따라서, 타입을 마치 변수처럼 정의해서 사용할 수 있는 타입 별칭을 사용하면 좋음

• 타입 별칭을 선언할때, 같은 스코프 내에서 중복되지 않게 해야함

  • 그러나 함수 내에서 같은 이름의 타입을 선언하면 다른 타입임

• 타입 별칭으로 만든 타입도 자바스크립트 코드로 변환하면 없어짐

  // 타입 별칭
  
  type User = {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
  };
  
  function func() {
    type User = {
      id: number;
      name: string;
      nickname: string;
      birth: string;
      bio: string;
      location: string;
    };
  }
  
  let user: User = {
    id: 1,
    name: '이정환',
    nickname: 'winterlood',
    birth: '1997.01.07',
    bio: '안녕하세요',
    location: '부천시',
  };
  
  let user2: User = {
    id: 2,
    name: '홍길동',
    nickname: 'gildong',
    birth: '1997.01.18',
    bio: '안녕하세요',
    location: '광명시',
  };

✨ 인덱스 시그니처

• key와 value의 규칙을 기준으로 객체의 타입을 정의할 수 있는 문법

• countryNumberCodes의 값이 빈 객체가 될 수 있음 (오류 발생하지 않음)

  • 인덱스 시그니처의 문법을 위반할 프로퍼티가 없으므로 규칙을 위반할 것이 없음
  • 만약, Korea: number 프로퍼티가 있어야 한다면 추가할 수 있음
  • Korea: string 하고 프로퍼티의 value 타입을 바꿔서 추가하고 싶다면 오류가 발생함 -> 인덱스 시그니처를 사용하는 객체 타입에서 추가적인 프로퍼티의 value의 타입은 인덱스 시그니처의 value의 타입과 일치하거나 호환되어야함 (일치하지 않을 경우 문제 발생)

  // 인덱스 시그니처
  type CountryCodes = {
    [key: string] : string;
  };
  
  let countryCodes: CountryCodes = {
    Korea: 'ko',
    UnitedState: 'us',
    UnitedKingdom: 'uk',
  };
  
  type CountryNumberCodes = {
    [key: string] : number;
    Korea: number;
  }
  
  let countryNumberCodes = {
    Korea: 410,
    UnitedState: 840,
    UnitedKingdom: 826,
  }

✨ Enum 타입 (열거형 타입)

• 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

• 타입스크립트에서만 제공되는 타입임

• role을 숫자로 적어서 사용하면 어떤 숫자가 무엇을 의미하는지 까먹을수 있음 -> 이럴때 유용하게 사용할 수 있음

• 숫자로 역할같은 값들을 분류할때 프로그래머들이 헷갈리지 않게 도움이 될 수 있음

• 숫자를 적지 않아도 자동으로 인덱스가 지정됨

  • 처음 숫자를 임의로 지정했다면, 자동으로 +1씩 증가되어서 지정됨 (중간에 임의의 숫자를 넣어도 됨 / 1씩 증가하진 않음)
    e.g) 10으로 지정하면 나머지는 11, 12

• 각각의 멤버의 값이 숫자가 할당 되는 enum: 숫자형 enum 이라고 함

  • 문자가 할당되는 enum: 문자형 enum

• 컴파일 되면 타입은 사라진다고 했는데, enum 타입을 값처럼 사용하고 있는데 괜찮을까?

  • enum 타입은 자바스크립트 코드로 컴파일 되면 사라지지 않고, 객체로 변환됨
    

    const user1 = {
      name: '이정환',
      role: 0, // 0 <- 관리자
    };
    const user2 = {
      name: '홍길동',
      role: 1, // 1 <- 일반 유저
    };
    const user3 = {
      name: '아무개',
      role: 2, // 2 <- 게스트
    };

    enum Role {
      ADMIN,
      USER,
      GUEST,
    }
    
    enum Language {
      Korean = 'ko',
      English = 'en',
    }
    
    const user1 = {
      name: '이정환',
      role: Role.ADMIN,
      language: Language.Korean,
    };
    const user2 = {
      name: '홍길동',
      role: Role.USER,
      language: Language.English,
    };
    const user3 = {
      name: '아무개',
      role: Role.GUEST,
      language: Language.Korean,
    };

출처: 한 입 크기로 잘라먹는 타입스크립트