유틸리티 타입

유틸리티 타입 1. 유틸리티 타입 이번엔 유틸리티 타입에 대해 알아봅시다. 유틸리티 타입은 기존 타입을 변환하거나 새로운 타입을 생성하기 위해 사용되는 내장 타입입니다. 유틸리티 타입은 코드를 더 간결하고 유연하게 작성할 수 있도록 도와줍니다. 2. keyof keyof는 객체의 속성 이름 집합을 가져옵니다. 해당 객체의 모든 속성 이름을 포함하는 유니온 타입이 생성됩니다. 다음 코드처럼 사용할 수 있습니다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' // UserKey의 키 값을 입력해야 함 con..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 21.
• textsms

제네릭(Generics)

제네릭(Generics) 1. 제네릭(Generics) 이번엔 제네릭(Generics)에 대해 알아봅시다! 제네릭이란? 코드를 재사용하고 유연성을 높이는 데 사용되는 강력한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 정의할 때 데이터 타입을 명시하지 않고 추상적으로 유지할 수 있습니다. 이렇게 하면, 여러 종류의 유형을 다루는 함수 or 클래스를 만들 수 있습니다. 2. 사용방법 사용방법에 대해 알아봅시다. 다음 코드를 확인해 봅시다. → getSize라는 함수를 arr1은 사용할 수 있지만, arr2는 string타입이라 사용할 수 없습니다. function getSize(arr: number[]): number { return arr.length; } const arr1 = [1,..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 20.
• textsms

클래스(Class)

클래스(Class) 1. 클래스(Class) 이번엔 클래스(Class)에 대해 배워보겠습니다. 클래스란? 데이터와 해당 데이터를 처리하는 메서드(함수)의 모음입니다. TypeScript는 클래스를 선언할 때, 다음 예제와 같이 선언합니다. class Car { color: string; constructor(color: string) { this.color = color; } start() { console.log("start"); } } const bmw = new Car("red"); 2. 접근 제한자(Access Modifier) TypeScript에서는 접근 제한자를 지정해 줄 수 있습니다. 이를 통해 정보 은닉 및 캡슐화를 지원할 수 있습니다. TypeScript에서는 세 가지 주요 접근 제한자..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 2. 19.
• textsms

함수 (function)

함수 (function) 1. 함수 (function) 이번엔 함수에 대해 알아보겠습니다. 함수는 JavaScript와 유사하지만 몇가지 차이가 있습니다. 2. 함수 선언과 정의 1) 선언 및 정의 방법 TypeScript는 다음과 같이 정의할 수 있습니다. // 함수 선언 function add(num1: number, num2: number): number { return num1 + num2; } // 함수 호출 let result = add(10, 20); console.log(result); // 30 2) 선택적 매개변수 TypeScript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다. 매개변수의 이름 뒤에 물음표(?)를 붙여서 정의합니다. // 함수 선언 function hello(n..

• format_list_bulleted Front-End Study/TypeScript
• · 2024. 1. 31.
• textsms

this와 bind

this와 bind 1. this this는 실행 컨텍스트에 따라 동적으로 바뀌며, 함수가 어떻게 호출되는 지에 따라 값이 달라집니다. 주로 메서드 or 콜백 함수 등에서 사용되며, 함수가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라집니다. 다음 코드를 보면 user.info( )를 호출할 때, this는 user를 가리킵니다. const user = { name: "Kim", info: function () { console.log(this.name); } }; user.info(); // Kim 2. bind bind 메서드는 함수의 this 값을 설정하여, 새로운 함수를 생성합니다. const user = {name: "Kim"}; function info() { console.log(..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 31.
• textsms

reduce 함수

reduce 함수 1. reduce 함수 reduce 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과 값을 반환하는 함수입니다. reduce는 초기값(Initial Value)과 함께 사용될 수 있습니다. 2. 사용방법 다음 예제를 확인해보겠습니다. let numbers = [1,2,3,4,5,]; let sum = numbers.reduce((result, num) => result + num, 0); console.clear(); console.log(sum); // 15 위 코드에서 reduce는 배열 numbers의 각 요소에 대해 누적된 합계를 계산합니다. 초기값으로 0을 사용하고, 콜백 함수는 현재 요소(num)와 누적된 값(result)을 받아서 더한 후, 새..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 31.
• textsms