김기지의 코딩노트

🧀 자바스크립트에서의 Promise 자바스크립트에서 프로미스는 Promise 라는 이름의 클래스이다. 따라서 new 연산자를 이용해 프로미스 객체를 생성한다. const promise = new Promise((resolve, reject)=>{ setTimeout(()=>{ // resolve에 결과값 20을 전달 resolve(20); }, 3000); }); promise.then((response)=>{ console.log(response); // 20 }); Promise의 콜백 함수는 resolve와 reject 두 개의 매개변수를 가짐 resolve -> 성공 시 호출되는 함수 reject -> 실패 시 호출되는 함수 🧀 타입스크립트에서의 Promise 타입스크립트에서 Promise는 제네..

🍞 제네릭 클래스 클래스의 이름 뒤에 타입 변수를 선언하면 제네릭 클래스가 된다. Number 타입의 리스트를 생성하는 클래스를 만들어보자. 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 메소드를 만들어 준다. 이 NumberList 클래스로 인스턴스를 만들어 사용해보자. const numberL..

🌿 제네릭 인터페이스 제네릭은 인터페이스에서도 적용이 가능하다. 인터페이스에 타입 변수를 선언해 사용하면 제네릭 인터페이스가 된다. interface KeyPair{ key: K; value: V; }; 키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의 제네릭 인터페이스는 제네릭 함수와는 달리 변수의 타입으로 정의할 때 반드시 꺽쇠와 함께 타입 변수에 할당할 타입을 명시해야 한다. 제네릭 함수는 매개변수에 제공되는 값의 타입을 기준으로 타입 변수의 타입을 추론할 수 있지만 인터페이스는 마땅히 추론할 수 있는 값이 없기 때문이다. let keyPair: KeyPair ={ key: 'key', value: 0, }; let keyPair2: KeyPair = { key: true, value: ['..

🤖 map 메소드 타입 정하기 map 원본 배열의 각 요소에 콜백함수를 수행하고 반환된 값들을 모아 새로운 배열로 만들어 반환한다. const arr = [1, 2, 3]; let newArr = arr.map((el) => el*2); // [2, 4, 6] map에 ctrl(또는 command)카를 누른 상태로 클릭을 하면 배열에 관련된 메소드가 정의되어 있는 파일이 열린다. map(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[]; 콜백 함수의 타입은 함수 타입 표현식으로 정의되어 있는 복잡한 모습이다. 이를 직접 구현해보자. 🤖 map 메소드 직접 만들기 1. 제네릭 함수가 아닌 일반적인 함수 만들기 functi..

🐼 제네릭 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능 매개변수를 받아 그대로 반환하는 함수를 만들어보자. function func(value: any) { return value; } let num = func(10); // any 타입 let str = func("string"); // any 타입 num은 숫자 타입을, str은 문자열 타입의 값을 가지지만 커서를 대보면 모두 any타입이 된다. 이는 func 함수의 반환값이 return 문을 기준으로 추론되었기 때문이다. 이러한 경우 각 변수는 any 타입이기 때문에 num.toFixed 와 같이 숫자 타입에 string 타입의 메소드를 사용해도 타입스크립트가 오류를 감지하지 못하게 된다. 이 코드는..

👒 인터페이스를 구현하는 클래스 타입스크립트의 인터페이스는 클래스의 설계도 역할을 할 수 있다. 인터페이스를 이용해 클래스에 어떤 필드들이 존재하고, 어떤 메소드가 존재하는 지 정의할 수 있다. interface CharacterInterface{ name: string; moveSpeed: number; move(): void; } // CharacterInterface가 정의한 타입의 객체를 클래스가 생성하도록 하기 // implements(구현하다) class Character implements CharacterInterface{ // 인터페이스는 public 필드만 정의할 수 있음 // -> private, protected 설정 불가능 // private하거나 protected한 필드가 필요한..

🍊 접근 제어자 Access Modifier 타입스크립트에서만 제공되는 기능으로 클래스의 특정 필드나 메소드에 접근할 수 있는 범위를 설정하는 기능이다. 3개의 접근 제어자 public : 모든 범위에서 접근 가능 private : 클래스 내부에서만 접근 가능 protected : 클래스 내부 또는 파생 클래스 내부에서만 접근 가능 🍊 public 어디서든지 해당 프로퍼티에 접근할 수 있음을 의미히며 필드의 접근 제어자를 지정하지 않을 경우 기본값으로 설정된다. class Employee { // 필드 name: string; // 자동으로 public age: number; // 자동으로 public public position: string; // 직접 명시 가능 // 생성자 constructor(n..

🥕 자바스크립트의 클래스 ... 들어가기 전에 더보기 먼저 자바스크립트의 클래스를 알아보기 위해 js 파일을 하나 만들어준다. js파일을 만들면 tsconfig.json 파일에 오류메세지가 뜬다. 이는 컴파일러가 타입스크립트 파일이 아닌 자바스크립트 파일가 생성되었음을 인지해 오류를 알려주는 것이다. 이를 해결하기 위해 '자바스크립트도 허용해라' 라는 의미로 "allowJs"옵션을 허용해준다. "compilerOptions": { ... "allowJs": true, }, 클래스 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법 let studentA = { name: '기지', grade: 'A+', age: 27, study(){ console.log('열심히 함'); } , introduce(..

🎃 인터페이스 선언 합침 타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언할 수 없지만 인터페이스는 가능하다. 인터페이스는 중복된 이름의 인터페이스 선언은 모두 하나로 합치기 때문에 중복된 이름으로 선언이 가능하다. // 타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언 불가능 type Person = { // ❌ name: string; }; type Person = { // ❌ age: number; }; // 인터페이스는 중복된 이름으로 선언 가능 interface Person { name: string; }; interface Person { age: number; }; // -> 중복된 이름의 인터페이스 선언은 모두 하나로 합쳐지기 때문 // 즉, 위에서 선언한 Person 인터페이스들은..

👾 인터페이스 확장 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법 interface Animal { name: string; age: number; } interface Dog { name: string; age: number; isBark: boolean; } interface Cat { name: string; age: number; isScratch: boolean; } interface Chicken { name: string; age: number; isFly: boolean; } 각 타입들은 Animal 타입을 기반으로 각각 추가적인 프로퍼티를 갖고 있다. 모든 타입에는 name, age 프로퍼티가 중복해서 정의되어 있어 Animal 타입의 프..