TypeScript - function

this interface User{ name:string; } const Sam:User = { name:'Sam' } function showName(this:User, age:number, gender:'m'|'f') { // this를 사용하기 위해서 매개변수에 this와 this의 타입을 지정한다. console.log(this.name, age, gender) } const a = showName.bind(Sam); a(30, 'm') this를 Sam으로 바인딩하고 this를 사용하기 위해서 Sam의 타입과 같은 User로 명시해 준다. 이렇게 하면 this를 이용할 수 있다. 함수의 첫 번째 매개변수로 'this' 타입을 지정하는 것은 'this'의 컨텍스트를 명시적으로 선언하는 방법이다...

• format_list_bulleted JavaScript/TypeScript
• · 2024. 2. 22.
• 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

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

TypeScript 기초, 컴파일 및 컴파일 설정

목차 1. TypeScript 이해하기 Step.1 - TypeScript의 기본 개념 2. TypeScript 이해하기 Step.2 - 기본적인 컴파일 방법 3. TypeScript 이해하기 Step.3 - tsconfig.json을 이용한 컴파일 설정 4. TypeScript 이해하기 Step.4 - Node 환경에서 TypeScript 실행하기 TypeScript 이해하기 Step.1 - TypeScript의 기본 개념 TypeScript MS에서 만들었다. 장점 : 런타임 전에 오류를 찾을 수 있다. 단점 : 잔소리꾼 같은 존재이다. 뭔가를 만들기 위해서 JS에서 치지 않았던 내용들을 쳐야 하는 경우가 있다. 런타임(실행시켜 주는 환경)이 존재하지 않는다. : babel 같은 것을 이용하여 빌드 ..

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