230421 - 브라우저에서 TypeScript 사용하기, OOP 간단 예제코드

오늘 내가 배운 것 1. 브라우저 환경에서의 TypeScript 2. 객체 지향 프로그래밍(OOP) 예제코드 1. 브라우저 환경에서의 TypeScript https://baekspace.tistory.com/169 브라우저 환경에서의 TypeScript 오늘 내가 배운 것 1. 브라우저 환경에서의 TypeScript 2. Node환경과 브라우저 환경 3. Troubleshooting 1 4. Troubleshooting 2 1. 브라우저 환경에서의 TypeScript 기존에 구현했었던 화면을 그려주는 JS파일을 이 baekspace.tistory.com 2. 객체 지향 프로그래밍(OOP) 예제코드 https://baekspace.tistory.com/170 객체 지향 프로그래밍(OOP) 예제코드 상품을 ..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 2023. 4. 21.
• textsms

객체 지향 프로그래밍(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

230420 - Function, Generics & Private, Public, readonly

오늘 내가 배운 것 1. Function, Generics 2. Private, Public, readonly 1. Function, Generics https://baekspace.tistory.com/166 TypeScript - Function과 Generics(제네릭 타입) 목차 1. Function 2. Generics (제네릭) 3. 다양한 타입의 객체 4. Function overloading VS Generics 1. Function 함수에 대한 데이터 타입을 지정할 때, 함수의 반환값뿐 아니라, 매개변수에도 데이터 타입이 지정되 baekspace.tistory.com 2. Private, Public, readonly https://baekspace.tistory.com/167 객체 지향..

• format_list_bulleted 시작/TIL(Today I Learned)
• · 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