[Typescript] exercise 1

원티드 타입스크립트 챌린지를 듣고, 추천 받은 공부 방법 중에 exercise를 통해서 1부터 10까지 풀 수 있어야 된다고 해서, exercises를 풀면서 타입스크립트를 학습해보기로 했다.

• 사이트 : TypeScript Exercises

exercise 1

문제 1 : 인터페이스 "User"를 정의하고 그에 따라 사용한다.

export type User = unknown;

export const users: unknown[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

export function logPerson(user: User) {
    console.log(` - ${user.name}, ${user.age}`);
}

console.log('Users:');
users.forEach(logPerson);

이 문제를 풀기 위해서 참고할 수 있는 사이트 : https://www.typescriptlang.org/docs/handbook/2/objects.html

Object Types

Javascript에서 데이터를 그룹화하고 전달하는 방법은 객체를 통해서이다. Typescript에서는 object types를 통해서 나타낸다. interface를 사용할 수도 있고, type alias를 사용할 수도 있다.

interface

• 중복 선언이 가능하고, 기존에 선언했던 interface와 병합이 된다

interface IAnimal {
    name: string
}

interface IAnimal {
    kind: string
}

const bear: IAnimal = {
    name: 'bear',
    kind: 'predator'
} 

• interface는 extends 키워드를 사용해서 확장할 수 있다.

interface IAnimal {
    name: string
}

type TAnimal = {
    name: string
}

interface IDog extends TAnimal {
    age: number
}

const puppy: IDog = {
    name: 'choco',
    age: 10,
}

• interface를 이용해서 exercise 1번 풀기

export interface User {
    name: string;
    age: number;
    occupation: string;
};


export const users: User[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

export function logPerson(user: User) {
    console.log(` - ${user.name}, ${user.age}`);
}

console.log('Users:');
users.forEach(logPerson);

type alias

• 중복 선언이 불가능하다.

type User = {
	name: string
}

type User = {
	age: number
}

// Error : Duplicate identifier 'User'.

• Type Alias는 extends 키워드를 이용해서 확장할 수 없다
• intersections 키워드 &를 통해서 확장이 가능하다.

type TAnimal = {
    name: string
}

type TBear1 extends TAnimal = {}
// 

type TBear2 = TAnimal & {
    favorite: string
}

let bear: TBear2 = {
    name: 'teddybear',
    favorite: 'honey',
}

• Type Alias를 이용해서 exercise 1번 풀기

export type User = {
    name: string;
    age: number;
    occupation: string;
};

export const users: User[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

export function logPerson(user: User) {
    console.log(` - ${user.name}, ${user.age}`);
}

console.log('Users:');
users.forEach(logPerson);

---

1번 문제를 풀기 위해서 interface에 대한 학습이 필요했다. inerface를 통해서 User 객체의 생김새를 묘사해주었다. interface와 비슷한 점이 많은 type을 이용해서도 문제를 해결하고, 차이점에 대해서 정리해보았다.

차이점 참고: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces