객체 지향 프로그래밍(OOP) 예제코드

상품을 할인하는 로직을 구현할 때, 객체지향 프로그래밍의 원칙을 최대한 지키면서 구현했다. //단순히 할인된 가격을 구하는 인터페이스 interface Discount { getDiscountPrice(price: number): number } //가격을 이용한 할인된 가격을 구하는 클래스 class FlatDiscount implements Discount { //할인하는 금액 private amount: number constructor(amount: number) { this.amount = amount } //할인된 가격을 구하기 getDiscountPrice(price: number): number { return price - this.amount } } // 퍼센트를 이용한 할인된 가격을 ..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

브라우저 환경에서의 TypeScript

오늘 내가 배운 것 1. 브라우저 환경에서의 TypeScript 2. Node환경과 브라우저 환경 3. Troubleshooting 1 4. Troubleshooting 2 1. 브라우저 환경에서의 TypeScript 기존에 구현했었던 화면을 그려주는 JS파일을 이용하여 TS로 변환하는 과정을 했다. 추상 클래스를 이용하는 방법이었다. 추상 클래스를 만든 후 추상 클래스를 확장시켜 구체화를 하였고, Component 클래스는 다른 컴포넌트를 만들 때에도 부모 클래스로써 역할을 하기를 원했기 때문에, 추상 클래스를 제네릭 타입으로 지정하여 구체화한 클래스의 데이터 타입에 따라서 화면을 다르게 렌더 할 수 있도록 확장성을 키웠다. interface IComments { user: IUser list: ICo..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

객체 지향 프로그래밍 (OOP) - 데이터 은닉화

목차 1. 데이터 은닉화 2. readonly 1. 데이터 은닉화 클래스의 내부 상태에 대한 접근을 불가능하게 하고 메서드를 통해 제어된 액세스를 제공하기 위해서 사용되는 OOP 기법이다. 데이터를 은닉하게 되면 내부의 상태가 일관되게 유지되고, 무단으로 수정되는 것을 방지할 수 있다. 데이터 은닉화를 하는 방법은 private를 이용하여 객체를 생성하면 된다. 인스턴스를 생성했을 때 접근 할 수 있냐, 없냐에 따라서 private , public 으로 나눈다. 클래스 내부에서는 사용할 수 있지만, 인스턴스 생성 후에 상태를 접근할 수는 없다. 생성자 함수의 매개변수도 provate를 이용해서 작성할 수 있다. class Auth { private email: string private password:..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 21.
• textsms

TypeScript - Function과 Generics(제네릭 타입)

목차 1. Function 2. Generics (제네릭) 3. 다양한 타입의 객체 4. Function overloading VS Generics 1. Function 함수에 대한 데이터 타입을 지정할 때, 함수의 반환값뿐 아니라, 매개변수에도 데이터 타입이 지정되어 있어야 한다. // 함수 선언식 function add(x: number, y: number): number { return x + y } //함수 표현식 const ad2 = function (x: number, y: number): number { return x + y } //화살표 함수 const add3 = (x: number, y: number): number => x + y 1-1. 매개변수의 여러 타입 한 가지 매개변수에 대..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 20.
• textsms

TypeScript의 인터페이스, 클래스 및 객체지향프로그래밍 (OOP)

목차 1. Interface 2. 인터페이스 속성 기본 속성 선택적 속성 읽기 전용 속성 3. 클래스로 데이터 타입 지정하기 4. OOP 1. Interface 코드를 구현하기 위해서 필요한 것은 아니지만 객체의 모양이나 구조를 정의하는 방법 내 오타 같은 실수를 막을 수 있고, 다른 사람이 코드를 봤을 때 직관적으로 보고, 재사용할 수 있도록 도와준다. 동작을 하는 코드가 아니고 구현을 위한 코드가 아니기 때문에 추상적이라고 말할 수 있다. 그래서 JS로 변환하는 과정에서 'Interface'는 변환되지 않는다. 2. 인터페이스 속성 예시 코드 interface IBoard { id: number title: string content: string date: number hit: number like..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 19.
• textsms

TypeScript의 Type

목차 1. 변수 2. 데이터 타입 2-1. Number type 2-2. String type 2-3. Boolean type 2-4. Null, Undefined type 2-5. Void type - function 2-5-1. 함수에 데이터 타입 지정하기 2-6. never type 2-7. unknown type, any type 2-8. object type 2-8-1. Object의 데이터 타입 2-8-2. Array의 데이터 타입 1. 변수 JS와 다르게 변수 옆에 변수에 들어올 데이터 타입에 대해서 명시를 해주는 것이 기본 문법이다. 작성 형태는 변수 옆에 콜론(:)을 작성하고 데이터 타입을 작성한다. // JS 변수 선언 let num = 10 const string = "hello JS..

• format_list_bulleted JavaScript/TypeScript
• · 2023. 4. 19.
• textsms