TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day3

🪁 진도

 

2. 타입스크립트 진도 (6/8)

• 배열과 튜플
• 객체
• 타입 별칭과 시그니쳐
• Enum 타입

 

배열과 튜플

// 배열
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "im", "jieun"];

// 제네릭 문법 (Array<> 처럼 꺽쇠 이용)
let boolArr: Array<boolean> = [true, false, true];

 

Array<> 형태로도 배열의 타입을 정의할 수 있는데 이렇게 작성하는 문법을 타입스크립트에서는 제네릭 문법이라고 부른다.

// 배열에 들어가는 요소의 타입이 다양한 경우 (유니온 문법 |)
let multiArr: (number | string)[] = [1, "A", "B"];

// 다차원 배열
let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
];

 

number | string 처럼 바(|)를 이용해 여러 타입 중 하나를 만족하는 타입을 정의하는 문법을 유니온 타입 문법이라고 부른다.

// 튜플 : 길이와 타입이 고정된 배열
let tup1: [number, number] = [31, 2];
let tup2: [number, string, boolean] = [1, "A", true];

const users:[string, number][] = [
    ['가나다', 1],
    ['마바사', 2],
    ['아자차', 3],
    ['이지치', 4],
  	[5, '어라라'] // error , 타입 순서가 고정되어있음
]

 

객체

// 객체 리터럴 타입
// 이렇게 프로퍼티 별 타입을 지정해주면 점 표기법으로 접근 가능
// 객체의 구조를 기준으로 타입을 지정 = 구조적 타입 시스템(property based typesystem)
// 대부분의 언어가 사용하는 명목적 타입시스템과는 달리 타입스크립트에서는 구조적 타입시스템을 사용한다.

let user: {
    id?: number;
    name: string;
} = {
    id: 1,
    name: "가나다",
};

// id?: number처럼 ?를 붙여서 있어도 없어도 상관없는 프로퍼티에게 타입을 지정해주는 방식이 있다
// 이렇게 ?가 붙여진 프로퍼티를 선택적 프로퍼티 (optional property)라고 한다

user = {
    name: "우주",
};

let config: {
    readonly apiKey: string;
} = {
    apiKey: "Secret KEY",
};

// config.apiKey = "hacked";

 

타입 별칭

// 타입 별칭
// 같은 스코프 내에서 이름 중복 x, 컴파일되면 자바스크립트 파일로 바뀌면서 타입별칭 정의는 사라짐.

import { type } from "os";

type User = {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
};

let user: User = {
    id: 1,
    name: "케로로",
    nickname: "중사",
    birth: "1000.01.01",
    bio: "건담",
    location: "퍼렁별",
};

// 인덱스 시그니처
// key와 value의 규칙을 기준으로 객체의 타입을 정의할 수 있는 문법
// 이 규칙을 위반하지만 않으면 오류가 뜨지 않음. 
// 빈 객체여도 오류 안뜸 (위반할 게 없어서)

type CountryCodes = {
    [key: string]: string;
};
let countryCodes:CountryCodes = {
    Korea: "KO",
    UnitedKingdom: "UK",
    UnitedState: "US",
};

// 추가적인 key의 value의 타입이 반드시 인덱스 시그니처의 value와 일치하거나 호환해야한다.

type CountryNumberCodes = {
    [key: string]: number;
    // Korea: string; 이면 인덱스 시그니처의 value와 일치하거나 호환하지 않으므로 오류발생
    Korea: number;
};

let countryNumberCodes:CountryNumberCodes = {
    Korea: 410,
    UnitedState: 840,
    UnitedKingdom: 826,
}

 

Enum 타입

// enum type
// 여러 가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입
// 자바스크립트의 객체로 컴파일 결과에 남아있음.

enum Role {
    ADMIN, 
    USER,
    GUEST,
// 처음 key값에 자동으로 0이 들어가기 때문에 위처럼 따로 number를 지정해주지 않아도 0, 1, 2가 순서대로 자동 지정된다.
// 만약 USER = 10, 라고 value를 지정하면 순서대로 0, 10, 11의 값이 된다.
}

enum Language {
    korean = "ko",
    english = "en",
    japanese = "jp",
}

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.japanese };

console.log(user1, user2, user3);

 

과제

 

Q. 다음 요구사항을 만족하는 4개의 타입을 정의하세요.

• _Any 타입은 사용할 수 없습니다.
• Nums 타입은 숫자만 담을 수 있는 배열 타입입니다.
• Colors 타입은 문자열만 담을 수 있는 배열 타입입니다.
• Coords 타입은 [숫자, 숫자] 형태의 배열만 허용하는 타입입니다.
• Info 타입은 [숫자, 문자열] 형태의 배열만 허용하는 타입입니다.

type Nums = never;
type Colors = never;
type Coords = never;
type Info = never;

 

⬇️

type Nums = number[];
type Colors = string[];
type Coords = [number, number];
type Info = [string, number];

 

Q. 다음 요구사항을 만족하는 Course 타입을 정의하세요.

• _Any 타입은 사용할 수 없습니다.
• Course 타입은 온라인 강의 정보를 포함하는 객체 타입을 정의합니다.
• 문자열을 저장하는 name 프로퍼티를 가져야 합니다.
• 숫자를 저장하는 price 프로퍼티를 가져야 합니다.
• 숫자를 저장하는 student_cnt 프로퍼티를 가져야 합니다.
• 문자열을 저장하는 author 프로퍼티를 가져야 합니다.
• 문자열 배열을 저장하는 related_courses 프로퍼티를 가져야 합니다.

type Course = never; 

 

⬇️

type Course = {
  name: string;
  price: number;
  student_cnt: number;
  author: string;
  related_courses: string[];
};

 

Q. 다음 요구사항을 만족하는 User 타입을 구현하세요.

• _Any 타입은 사용할 수 없습니다.
• 객체 타입이어야 합니다.
• String 타입의 name 프로퍼티가 있어야 합니다.
• String 타입의 email 프로퍼티가 있어야 합니다.
• 그 외의 String 타입의 동적 프로퍼티들도 추가할 수 있어야 합니다.

type User = never;

⬇️

type User = {
 name: string;
  email: string;
  [key: string]: string;
};