Skip to content

Udemy/Ts/section7/95: Genercis #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 39 commits into
base: UdemyTs
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
d105911
🌱: README을 수정
4BFC Aug 26, 2024
06270b7
🌱: README을 수정
4BFC Aug 26, 2024
5e69dee
🌱: README을 수정
4BFC Aug 29, 2024
d7c1360
🌱: README을 수정
4BFC Aug 29, 2024
978d932
🌱: README을 수정
4BFC Aug 29, 2024
859bffc
🌱: README을 수정
4BFC Aug 29, 2024
e09d95d
🌱: README을 수정
4BFC Aug 29, 2024
3255009
🌱: README을 수정
4BFC Aug 29, 2024
ab9b8db
🌱: README을 수정
4BFC Aug 29, 2024
5f0f9f9
🌱: README을 수정
4BFC Aug 29, 2024
daaeeed
🌱: README을 수정
4BFC Aug 29, 2024
c8ec455
🌱: README을 수정
4BFC Aug 30, 2024
e2a15fd
🌱: README을 수정
4BFC Aug 30, 2024
61dd842
🌱: README을 수정
4BFC Aug 30, 2024
bce5c89
🌱: README을 수정
4BFC Aug 30, 2024
ed8fa00
🌱: issue templates 생성
4BFC Aug 30, 2024
1559fa2
🌱: pr-template 생성
4BFC Aug 30, 2024
691897a
🌱: pr-template 수정
4BFC Aug 30, 2024
44ec035
🌱: pr-template 수정
4BFC Aug 30, 2024
3c3280b
🚩: udemy section2의 14번 강의를 듣고 실습을 했다.
4BFC Aug 31, 2024
cbf04eb
🔀: Merge branch 'UdemyTs'
4BFC Aug 31, 2024
0f07929
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Aug 31, 2024
757fb99
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Aug 31, 2024
7e8ac7d
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Aug 31, 2024
aa89074
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
79304fe
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
eb21a7f
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
cf56f00
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
7dec10d
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
28200e9
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 1, 2024
621e700
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 2, 2024
5f9833d
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 2, 2024
06d966b
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Sep 20, 2024
571488d
Merge branch 'UdemyTs' of https://github.com/Programming-Contents-Lis…
4BFC Oct 1, 2024
467db59
🚩 내장 클래스(제네릭)과 일반 제네릭의 사용 차이
4BFC Oct 1, 2024
74d3e80
🚩: 제네릭 클래스 셜명 주석으로 추가
4BFC Oct 1, 2024
1184460
🐛: 제네릭을 사용하지 않고 객체 타입을 생성하는 방법
4BFC Oct 1, 2024
5f01c18
🐛: 제네릭을 사용하지 않은 방식 추가 설명 주석처리
4BFC Oct 1, 2024
2115458
🚩: ts 엄격 모드 규칙 환경에서의 제네릭 사용 방법과 제네릭의 타입 추론 개념 설명 및 실습
4BFC Oct 1, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 13 additions & 30 deletions dist/app.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,14 @@
"use strict";
var Department = /** @class */ (function () {
// readonly는 프로퍼티를 초기화한 후 수정할 수 없다. 즉, 한번 할당 되면 변경되면 안되는 고유 번호들을 설정할 때 readonly를 사용한다.
function Department(id, name) {
this.id = id;
this.name = name;
// private id: string;
// private name: string;
this.employees = [];
// this.id = id;
// this.name = n
}
Department.prototype.describe = function () {
console.log("Department (".concat(this.id, "): ").concat(this.name));
};
Department.prototype.addEmployee = function (employee) {
// this.id = '2'; // readonly이기 때문에 error가 발생한다.
this.employees.push(employee);
};
Department.prototype.printEmployeeInformation = function () {
console.log(this.employees.length);
console.log(this.employees);
};
return Department;
}());
var accounting = new Department('1', 'Accounting');
accounting.addEmployee('Max');
accounting.addEmployee('Manu');
// accounting.employees[2] = 'Anna';
accounting.describe();
accounting.printEmployeeInformation();
// 제네릭은 interface와 달리 매개변수처럼 정해진 타입이 없을 때 사용하는 방법이다.
function merge(objA, objB) {
// 일반적으론 `T&U`를 작성하지 않아도 괜찮지만 TS의 엄격한 문법 준수를 사용해서 교차 타입임을 직접 명시해야한다.
return Object.assign({}, objA, objB);
// `{}`를 넣는 이유 : Object.assign을 사용할 때 첫 번째 인수로 {} 빈 객체를 넣는 이유는 기존 객체를 변경하지 않고 새로운 객체를 생성하여 반환하기 위해서이다. 이는 원본 객체를 보호하고 불변성(immutability)을 유지하기 위해 사용하는 일반적인 방법이다.
}
const mergeObj = merge({ name: 'Max', hobbies: ['Sports'] }, { age: 30 });
// 이렇게 제네릭을 사용해서 ts가 스스로 타입 추론을 할 수 있다. 하지만 아래와 같이 제네릭으로 직접적으로 타입을 명시할 수 있다.
const mergeObjExample = merge({ name: 'Max', hobbies: ['Sports'] }, { age: 30 });
// 그렇다면 왜 위의 방식으로 직접 명시하지 않아도 되는 것인가?
// 이유는 제네릭을 사용하는 함수의 입력값을 기반으로 제네릭 타입을 자동으로 결정되는 타입 추론때문인 것이다. 즉, 타입스크립트가 타입을 지정하는 js의 확장형 코드라지만 `타입추론`을 모르고 사용한다면 타입스크립트를 제대로 사용하지 않는 것이다.
const mergeObj2 = merge({ name: 'Max' }, { age: 30 });
console.log(mergeObj.name);
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<script src="./dist/app.js"></script>
</body>

</html>
92 changes: 12 additions & 80 deletions src/app.ts
Original file line number Diff line number Diff line change
@@ -1,83 +1,15 @@
class Department {
// private id: string;
// private name: string;
private employees: string[] = [];
// readonly는 프로퍼티를 초기화한 후 수정할 수 없다. 즉, 한번 할당 되면 변경되면 안되는 고유 번호들을 설정할 때 readonly를 사용한다.
constructor(private readonly id: string, public name: string) {
// this.id = id;
// this.name = n
}
describe(this: Department) {
console.log(`Department (${this.id}): ${this.name}`);
}

addEmployee(employee: string) {
// this.id = '2'; // readonly이기 때문에 error가 발생한다.
this.employees.push(employee);
}

printEmployeeInformation() {
console.log(this.employees.length);
console.log(this.employees);
}
}

class ITDepartment extends Department {
admins: string[];
constructor(id: string, admins: string[]) {
super(id, 'IT');
this.admins = admins;
}
// 제네릭은 interface와 달리 매개변수처럼 정해진 타입이 없을 때 사용하는 방법이다.
function merge<T, U>(objA: T, objB: U): T & U {
// 일반적으론 `T&U`를 작성하지 않아도 괜찮지만 TS의 엄격한 문법 준수를 사용해서 교차 타입임을 직접 명시해야한다.
return Object.assign({}, objA, objB);
// `{}`를 넣는 이유 : Object.assign을 사용할 때 첫 번째 인수로 {} 빈 객체를 넣는 이유는 기존 객체를 변경하지 않고 새로운 객체를 생성하여 반환하기 위해서이다. 이는 원본 객체를 보호하고 불변성(immutability)을 유지하기 위해 사용하는 일반적인 방법이다.
}

class AccountingDepartment extends Department {
private lastReport: string;

get mostRecentReport() {
if (this.lastReport) {
return this.lastReport;
}
throw new Error('No report found.');
}

set setMostRecentReport(value: string) {
if (!value) {
throw new Error('Please pass in a valid value!')
}
this.addReport(value);
this.lastReport = value; // 여기서 lastReport를 업데이트 그래야 lastReport가 비어있지 않기 때문에 정상적으로 동작을 한다.
}

constructor(id: string, private reports: string[]) {
super(id, 'Account');
//strictPropertyInitialization 활성화로 초기화 해줘야 함.
this.lastReport = reports[0] || ""; // 초기값을 할당 (reports가 비어있으면 빈 문자열)
}

addReport(text: string) {
this.reports.push(text);
}

printReports() {
console.log(this.reports);
}
}
const accounting = new Department('1', 'Accounting');
const ITaccounting = new ITDepartment('2', ['Max']);

ITaccounting.addEmployee('Max');
ITaccounting.addEmployee('Manu');

// accounting.employees[2] = 'Anna';
ITaccounting.describe();
ITaccounting.printEmployeeInformation();

const NewAccounting = new AccountingDepartment('d2', []);

// console.log(NewAccounting.mostRecentReport); //report가 추가되지 않아서 Error
NewAccounting.setMostRecentReport = 'Year End Report';
NewAccounting.addReport('Something went wrong...');

console.log(NewAccounting.mostRecentReport); //report가 있어서 문제없이 출력
const mergeObj = merge({ name: 'Max', hobbies: ['Sports'] }, { age: 30 });
// 이렇게 제네릭을 사용해서 ts가 스스로 타입 추론을 할 수 있다. 하지만 아래와 같이 제네릭으로 직접적으로 타입을 명시할 수 있다.
const mergeObjExample = merge<{ name: string, hobbies: string[] }, { age: number }>({ name: 'Max', hobbies: ['Sports'] }, { age: 30 });
// 그렇다면 왜 위의 방식으로 직접 명시하지 않아도 되는 것인가?
// 이유는 제네릭을 사용하는 함수의 입력값을 기반으로 제네릭 타입을 자동으로 결정되는 타입 추론때문인 것이다. 즉, 타입스크립트가 타입을 지정하는 js의 확장형 코드라지만 `타입추론`을 모르고 사용한다면 타입스크립트를 제대로 사용하지 않는 것이다.
const mergeObj2 = merge({ name: 'Max' }, { age: 30 });

NewAccounting.printReports();
console.log(mergeObj.name);