[TS] 프로미스와 제네릭
TIL
프로미스의 타입 추론Promise 객체를 생성하고 3초 후 20을 반환하는 코드를 작성해보자.const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(20); }, 3000);});promise.then((response) => { console.log(response);}); Promise는 resolve로 전달하는 결과값의 타입을 자동으로 추론하지 못하고 unknown 타입으로 추론한다. resolve 타입 지정타입 변수에 타입을 지정하면 resolve 결과값의 타입이 정확히 추론된다. reject와 에러처리Promise의 catch 메서드에서 에러 매개변수는 항상 any 타입으로 추론된다. 그리고 타입 변수..
[TS] 제네릭 클래스
TIL
숫자 배열을 관리하는 NumberList 클래스를 만들어보자.class NumberList { constructor(private list: number[]) {} push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); }}list 필드는 private으로 설정하여 클래스 내부에서만 접근 가능하도록 했다.생성자에서 필드 선언과 초기화를 동시에 수행하며, push, pop, print 메서드로 배열을 조작한다. 만약 문자열 배열을 관리하는 StringList 클래스도 필요하다면 어떻게 해야 할까?제네릭 없이는 새로운 클래스를 만들어야..
[TS] 제네릭 인터페이스와 타입 별칭
TIL
제네릭 인터페이스제네릭은 인터페이스에도 적용할 수 있다. 인터페이스에 타입 변수를 선언하여 사용하면 된다.interface KeyPair { key: K; value: V;} 그리고, 변수의 타입으로 정의하여 사용할 수 있다.let keyPair: KeyPair = { key: "key", value: 0,};let keyPair2: KeyPair = { key: true, value: ["1"],};이때 주의해야 할 점은, 제네릭 인터페이스는 제네릭 함수와 달리 변수의 타입으로 정의할 때 반드시 와 함께 타입 변수에 할당할 타입을 명시해야 한다는 것이다.제네릭 함수는 매개변수에 제공되는 값의 타입을 기준으로 타입 변수를 추론할 수 있지만, 인터페이스는 마땅히 추론할 수 있는 값이 없기 때문이..
[TS] map, forEach 메서드 타입 정의하기
TIL
map 메서드 타입 정의자바스크립트의 배열 메서드 map은 원본 배열의 각 요소에 콜백 함수를 수행하고, 반환된 값들을 모아 새로운 배열로 만들어 반환한다.const arr = [1, 2, 3];const newArr = arr.map((it) => it * 2); // [2, 4, 6]일반 함수로 구현먼저 제네릭 없이 일반 함수로 만들어보자.function map(arr: unknown[], callback: (item: unknown) => unknown): unknown[] {}메서드를 적용할 배열을 매개변수 arr로 받고, 콜백 함수를 매개변수 callback으로 받는다.map 메서드는 모든 타입의 배열에 적용할 수 있기 때문에 arr의 타입은 unknown[]으로 정의한다.callback의 타입..
[TS] 제네릭 타입 변수 응용
TIL
제네릭 함수 활용 사례사례 1: 여러 개의 타입 변수두 값의 위치를 바꾸는 swap 함수를 만들어 보자.function swap(a: any, b: any) { return [b, a];}const [a, b] = swap(1, 2);any타입을 사용하면 타입 안정성이 보장되지 않는다. 2개의 타입 변수가 필요한 상황이라면 다음과 같이 T, U 처럼 여러 개의 타입 변수를 사용할 수 있다.function swap(a: T, b: U) { return [b, a];}const [a, b] = swap("1", 2);위 코드에서 T는 string 타입으로, U는 number 타입으로 추론된다.반환값은 [U, T] 즉, [number, string] 튜플 타입이 된다. 사례 2: 배열 요소 타입 추론배열의..
[TS] 제네릭
TIL
제네릭(Generic) 이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 타입스크립트의 기능이다.제네릭이 필요한 상황any 타입의 문제다음과 같이 매개변수 타입을 any로 정의하면 함수 호출 결과가 모두 any 타입으로 추론된다.function func(value: any) { return value;}let num = func(10);let str = func("string");num.toUpperCase(); // ❌ 런타임 오류 발생num에는 Number타입의 값 10이 저장되어 있다. 그러나 any 타입으로 추론되었기 때문에 toUpperCase같은 String타입 전용 메서드를 사용해도 타입스크립트가 오류를 감지하지 못한다.이 코드는 실제로 실행하면 런..
[CS50] 컴퓨팅 사고 - 2진법
TIL
컴퓨터 과학과 문제해결컴퓨터 과학은 문제 해결에 대한 학문이다.문제 해결은 입력(input)을 전달받아 출력(output)을 만들어내는 과정이며 그 중간에 있는 과정이 바로 컴퓨터 과학이다.입력과 출력을 표현하기 위해서는 모두가 동의할 약속(표준)이 필요하다.2진법우리가 일상에서 사용하는 10진법은 0부터 9까지 총 10개의 기호로 숫자를 표현한다.반면 컴퓨터는 오직 0과 1로만 데이터를 표현하며, 이를 2진법이라고 한다. 다음의 표는 10진법과 2진법의 자릿수별 값을 보여준다.10진법은 10의 거듭제곱, 2진법은 2의 거듭제곱으로 각 자릿수의 값이 결정된다. 예를 들어, 2진법으로 011은 10진법의 3을 나타낸다. (0x4 + 1x2 + 1x1 = 3) 이렇게 컴퓨터는 숫자뿐만 아니라 글자, 사진, ..
[TS] 클래스와 접근제어자 사용 연습
TIL
조건을 만족하는 Pokemon 클래스 완성3개의 필드- name 필드는 String 타입이며 Public이다.- skill 필드는 String 타입이며 Public이다.- type 필드는 String 타입이며 읽기 전용 필드이다.2개의 메서드- getName 메서드는 name 필드의 값을 반환한다.- setSkill 메서드는 String 타입의 매개변수를 받아 skill 필드의 값을 업데이트 한다. // 기본 버전 (this 할당 방식)class Pokemon { name: string; skill: string; readonly type: string; constructor(name: string, skill: string, type: string) { this.name = name; ..
[TS] 인터페이스로 구현하는 클래스 (implements)
TIL
타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있다.다음과 같이 인터페이스를 이용해 클래스에 어떤 필드들이 존재하고, 어떤 메서드가 존재하는지 정의할 수 있다.interface CharacterInterface { name: string; moveSpeed: number; move(): void;}class Character implements CharacterInterface { constructor( public name: string, public moveSpeed: number, ) {} move(): void { console.log(`${this.moveSpeed} 속도로 이동!`); }} 인터페이스 CharacterInterface는 name, move..
[TS] 접근 제어자
TIL
접근 제어자접근 제어자는 타입스크립트에서만 제공되는 기능으로, 클래스의 특정 필드나 메서드를 접근할 수 있는 범위를 설정하는 기능이다.publicpublic으로 설정된 필드는 클래스 외부에서 자유롭게 접근하고 수정할 수 있다.class Employee { name: string; hp: number; position: string; constructor(name: string, hp: number, position: string) { this.name = name; this.hp = hp; this.position = position; } work() { console.log("일함"); }}const employee = new Employee("고견", 90, "dev..