11 인덱스시그니처타입별칭인터페이스

1. 연습문제A

1. `Person` 타입 작성

문제: 사람을 나타내는 Person 타입을 정의하세요. 이 타입은 name (문자열), age (숫자) 속성을 가집니다. 그리고 이를 사용하는 getPersonInfo 함수를 작성하여 Person 객체를 출력하세요.

1
//code

2. 객체 생성

문제: Config 타입을 정의하여 host (문자열), port (숫자), ssl (불린값)을 갖는 객체 타입입니다. createConfig 함수는 Config 타입을 반환하도록 하세요.

1
//code
2

3
const config = createConfig('localhost', 8080, true);
4
console.log(config); // { host: 'localhost', port: 8080, ssl: true }

3. `Rectangle` 타입 작성

문제: Rectangle 타입을 정의하여 width (숫자)와 height (숫자) 속성을 가지게 하세요. calculateArea 함수를 작성하여 Rectangle 객체의 면적을 계산하세요.

1
//code

4. `Student` 타입 작성

문제: Student 타입을 정의하여 name (문자열), age (숫자), grades (숫자 배열) 속성을 포함하게 하세요. calculateAverageGrade 함수를 작성하여 평균 성적을 계산하세요.

1
//code

5. `Response` 타입 작성

문제: Response 타입을 작성하여 status (문자열), data (문자열), message (문자열) 속성을 포함하게 하세요. createResponse 함수를 작성하여 이 타입의 객체를 반환하세요.

1
// code
2

3
console.log(createResponse('success', 'John', 'fetch success')); // { status: 'success', data: 'John', message: 'fetch success'

6. `Employee` 타입 작성

문제: Employee 타입을 작성하여 id (문자열), name (문자열), position (문자열) 속성을 가집니다. getEmployeeInfo 함수에서 이 정보를 반환하도록 하세요.

1
//code
2

3
console.log(getEmployeeInfo({id:'1', name:'james', position:'developer'})); // "james works as a developer with ID: 1."

7. `Circle` 타입 작성

문제: Circle 타입을 작성하여 radius (숫자) 속성을 가지게 하세요. calculateCircumference 함수에서 원의 둘레를 계산하는 기능을 작성하세요.

1
//code
2

3
console.log(calculateCircumference({radius:3})); // 18.84955592153876

8. `Product` 타입 작성

문제: Product 타입을 작성하여 name (문자열), price (숫자), inStock (불린값) 속성을 가지게 하세요. getDiscountedPrice 함수에서 주어진 할인을 적용한 가격을 계산하세요.

1
//code
2

3
console.log(getDiscountedPrice({name: 'bag', price: 1000, inStock: true}, 10)); // 900

9. `Book` 타입 작성

문제: Book 타입을 작성하여 title (문자열), author (문자열), publishedYear (숫자) 속성을 포함하도록 하세요. getBookSummary 함수에서 책에 대한 간단한 요약을 반환하도록 하세요.

1
//code..
2

3

4
console.log(getBookSummary({title: 'river', author:'james', publishedYear: 2020)); // "river by james, published in 2020."

10. `Transaction` 타입 작성

문제: Transaction 타입을 작성하여 id (문자열), amount (숫자), timestamp (문자열) 속성을 가지게 하세요. isValidTransaction 함수에서 amount가 0보다 큰지 비교해서 결과를 반환하는 로직을 작성해주세요.(참/거짓 반환)

1
//code

2. 연습문제B

1. `Action` 타입을 이용한 이벤트 핸들러 정의

문제: Action 타입을 정의하여 type (문자열), payload (문자열, 숫자, 객체 등 다양한 값이 될 수 있음) 속성을 가질 수 있도록 하세요. 그리고 createAction 함수는 Action 객체를 반환하도록 하세요.

1
type Action = {
2
  // code
3
};
4

5
// code
6
function createAction(){}
7

8
// 함수 호출 예시
9
const action1 = createAction('ADD_ITEM', { id: 1, name: 'item' });
10
const action2 = createAction('UPDATE_ITEM', 42);
11
const action3 = createAction('SET_STATUS', 'success');
12

13
console.log(action1); // { type: 'ADD_ITEM', payload: { id: 1, name: 'item' } }
14
console.log(action2); // { type: 'UPDATE_ITEM', payload: 42 }
15
console.log(action3); // { type: 'SET_STATUS', payload: 'success' }

2. `NumberOrString` 타입을 사용한 객체 타입 생성

문제: NumberOrString 타입을 정의하여 숫자 또는 문자열만 허용하는 타입을 만들고, 이를 사용하는 createObject 함수를 작성하세요. 이 함수는 id (숫자 또는 문자열)와 name (문자열)을 가지는 객체를 반환해야 합니다.

1
//code
2

3
const object1 = createObject(1, 'Alice');
4
const object2 = createObject('123', 'Bob');
5

6
console.log(object1); // { id: 1, name: 'Alice' }
7
console.log(object2); // { id: '123', name: 'Bob' }

3. `Point` 타입 작성

문제: Point 타입을 작성하여 x와 y 값을 각각 나타내는 속성을 가지게 하세요. 이 타입을 사용해 두 점의 거리(distance)를 계산하는 calculateDistance 함수를 작성하세요. (유클리드 거리 계산을 사용합니다.)

4. 유니언 타입을 사용한 상태 관리 시스템

문제: Loading, Success, Error 상태를 나타내는 FetchRsult유니언 타입을 정의하고, fetchData 함수가 반환하는 타입을 작성하세요. fetchData 함수는 loading, success, error 중 하나의 상태를 반환합니다.

status: 'loading'일 때는 별다른 데이터 없이 상태만 반환합니다.
status: 'success'일 때는 data(string) 속성에 데이터를 포함해야 하며,
status: 'error'일 때는 message(string) 속성에 에러 메시지를 포함해야 합니다.

1
//code
2

3

4
const result1 = fetchData();
5
const result2 = fetchData();
6
const result3 = fetchData();
7

8
console.log(result1); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }
9
console.log(result2); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }
10
console.log(result3); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }

5. 조건부 타입을 사용한 `NullOrUndefined` 타입 처리

문제: NullOrUndefined 타입을 정의하고, getValue 함수에서 이 타입을 활용하여 값이 null 또는 undefined인지 여부를 체크하는 로직을 작성하세요.

1
//code
2

3

4
const check1 = getValue(null);
5
const check2 = getValue(undefined);
6
const check3 = getValue('Hello');
7

8
console.log(check1); // true
9
console.log(check2); // true
10
console.log(check3); // false

6. `Tuple`을 이용한 `setCoordinates` 함수 작성

문제: setCoordinates 함수는 두 개의 숫자값(x, y)을 가지는 튜플을 입력받고, 이를 반환하는 타입을 정의하세요.

1
//code
2

3
const coordinates = setCoordinates(10, 20);
4
console.log(coordinates); // [10, 20]

7. 객체 정의

문제: Person 객체는 name과 age 속성을 갖는 객체입니다. createPerson 함수는 Person 객체를 반환하는데, 이 객체는 불변이어야 합니다. 즉, Person 객체의 속성을 한 번 설정한 후에는 변경할 수 없어야 합니다.

1
//code
2

3

4
const person = createPerson('John', 30);
5

6
// person 객체의 속성은 변경할 수 없도록 해야 합니다.
7
person.name = 'Jane'; // 오류 발생: 읽기 전용 속성이므로 수정할 수 없음
8
console.log(person); // { name: 'John', age: 30 }

8. 유니언 타입을 사용하여 선택적 속성 처리

문제: User 타입을 정의하여 id, name, email을 속성으로 가지게 하세요. 그런 후, updateUser 함수를 작성하여 선택적 속성만 업데이트하도록 하세요. updateUser는 일부 속성만 업데이트할 수 있도록 해야 합니다.

1
//code
2

3
const user1 = { id: '1', name: 'Alice', email: 'alice@example.com' };
4
const updatedUser1 = updateUser(user1, { name: 'Alicia' });
5

6
console.log(updatedUser1); // { id: '1', name: 'Alicia', email: 'alice@example.com' }

9. 유니언 타입

문제: Role 타입을 정의하여 ‘admin’과 ‘user’를 유니언 타입으로 처리하고, assignRole 함수가 역할을 동적으로 할당하도록 하세요. 이때 assignRole 함수의 반환 값은 UserWithRole 타입이 될 수 있게 타입을 지정해줍니다.

1
//code
2

3
const user1 = { id: '1', name: 'Alice', role: 'user' };
4
const updatedUser = assignRole(user1, 'admin');
5

6
console.log(updatedUser); // { id: '1', name: 'Alice', role: 'admin' }

10. 유니언 타입을 사용하여 값 필터링

문제: string과 number 타입을 구분하기 위한 Primitive 타입을 정의하고, string만 반환하는 함수를 작성하세요. 반환 값이 string만 포함되도록 타입을 작성하세요.

1
//code
2

3

4
const stringValue = filterString('Hello');
5
console.log(stringValue); // 'Hello'
6

7
const numberValue = filterString(123); // Error: Not a string

11 인덱스시그니처타입별칭인터페이스

1. 연습문제A

1. Person 타입 작성

2. 객체 생성

3. Rectangle 타입 작성

4. Student 타입 작성

5. Response 타입 작성

6. Employee 타입 작성

7. Circle 타입 작성

8. Product 타입 작성

9. Book 타입 작성

10. Transaction 타입 작성