본문 바로가기

강의 실습159

프로미스와 제네릭 한 입 크기로 잘라먹는 타입스크립트 - 프로미스(Promise) 1. 프로미스 자바스크립트 내장클래스 Promise 는 타입스크립트에서 제네릭 클래스로 타입이 별도로 선언되어 있다. 컨트롤 키를 눌러 Promise 를 클릭하면 lib.es2018.promise.d.ts 에 타입 변수를 활용하는 제네릭 인터페이스로 선언되어 있다. 생성자 함수의 타입 정의는 lib.es2015.promise.d.ts 에서 확인 가능하다. Promise 생성자 호출시 타입 변수를 할당해주면, 비동기 처리 결과값의 타입을 직접 명시할 수 있다. 하지만 실패했을 때 타입은 정해줄 수가 없다. Promise 생성자 호출시 타입 변수를 할당하지 않으면, 비동기 처리 결과값의 타입이 unknown 타입으로 추론된다. - chapter.. 2024. 12. 2.
제네릭 클래스 한 입 크기로 잘라먹는 타입스크립트 - 제네릭 클래스 1. 제네릭 클래스 일반 클래스를 생성하여 생성자와 메서드를 등록한 후 실행해본다. - chapter4.ts/** * 제네릭 클래스 */// 일반 클래스 예제class NumberList { // 생성자 constructor(private list: number[]) {} // 메서드 push(data: number) { this.list.push(data); } pop() { return this.list.pop(); } print() { console.log(this.list); }}// 인스턴스 생성const numberList = new NumberList([.. 2024. 12. 1.
제네릭 인터페이스 & 제네릭 타입 별칭 한 입 크기로 잘라먹는 타입스크립트 - 제네릭 인터페이스 & 제네릭 타입 별칭 * 타입 변수 (타입스크립트 공식문서 명칭) = 타입 파라미터 = 제네릭 타입 변수 = 제네릭 타입 파라미터 1. 제네릭 인터페이스 제네릭 함수를 만들때와 동일하게 만든다. 이때, 제네릭 인터페이스는 타입으로 변수에 정의할 때, 타입 변수에 타입을 직접 할당해야 한다. - chapter3.ts/** * 제네릭 인터페이스 */interface KeyPair { key: K; value: V; }// 변수 선언1let keyPair: KeyPair = { key: 'key' , value: 0};// 변수 선언2let keyPair2: KeyPair = { key: true , value: ['1']};하.. 2024. 11. 28.
map, forEach 메서드 타입 정의하기 한 입 크기로 잘라먹는 타입스크립트 - map, forEach 메서드 타입 정의하기 제네릭 함수를 이용하면 매개변수의 타입이 배열, 함수, 객체, 클래스 등 타입을 유연하게 잘 정의활 수 있다. - chapter2.ts/** * map 메서드 */const arr = [1, 2, 3];// map : 배열의 각 요소에 callback 함수를 실행하여 반환값들을 모아 새로운 배열로 반환const newArr = arr.map((it) => it * 2); // [2, 4, 6]// map 메서드를 Ctrl 키를 누르고 따라가면 lib.es5.d.ts 에 존재함// 2개의 타입변수 활용하여, 직접 map 메서드 정의하여 사용function map(arr: T[], callback: (item: T) => U.. 2024. 11. 27.
타입 변수 응용하기 한 입 크기로 잘라먹는 타입스크립트 - 타입 변수 응용하기 1. 첫번째 사례 타입변수 여러개 선언 가능. - chapter1.ts/** * 첫번째 사례 */// function swap(a: T, b: T) {function swap(a: T, b: U) { // 타입변수 여러개 선언 가능 return [b, a];}// 구조분해할당으로 받음// const [a, b] = swap('1', 2); // 오류 : number 타입 인수가 string 타입 매개 변수 할당 불가const [a, b] = swap('1', 2); // 오류X2. 두번째 사례 튜플 타입 안에 ...unknown[] 사용. (실습 전, tsconfig.json 의 "noImplicitAny" 속성 값을 true 로 수정) -.. 2024. 11. 25.
제네릭 소개 한 입 크기로 잘라먹는 타입스크립트 - 제네릭 소개 * 실습 환경설정 section7 폴더를 생성한 뒤, section6 폴더에서 사용했던 package-lock.json, package.json, tsconfig.json 파일을 복사하여 section7 폴더에 붙여넣는다. 이후 package.json 파일에서 'name' 부분 값을 'section7' 로 수정한다. - package.json{ "name": "section7", ...}이후 터미널에서 'npm i' 명령어를 입력하여 package.json 의 'dependencies' 에 명시된 외부 패키지들을 일괄적으로 설치한다. - Terminalnpm i added 2 packages, and audited 3 packages in 72.. 2024. 11. 21.
인터페이스와 클래스 한 입 크기로 잘라먹는 타입스크립트 - 인터페이스와 클래스 1. 인터페이스와 클래스 인터페이스로 클래식의 설계도를 정의할 수 있다. 인터페이스를 먼저 만들고 구현하는 일은 드물고, 보통 라이브러리의 구현이나 복잡하고 정교한 프로그래밍이 필요할 때 사용한다. - chapter3.ts/** * 인터페이스와 클래스 */// 설계도interface CharacterInterface { name: string; moveSpeed: number; move(): void;}// 설계도를 구현class Character implements CharacterInterface { // 필드 /* name: string; moveSpeed: number; */ // 생성자 .. 2024. 11. 20.
접근 제어자 한 입 크기로 잘라먹는 타입스크립트 - 접근 제어자 1. 접근 제어자 클래스 생성시 특정 필드나 메서드에 접근할 수 있는 범위 설정. public : 아무 제약이 없는 상태. 클래스 외부에서 접근 가능. private : 클래스 외부에서 접근 불가. protected : 클래스 외부에서 접근 불가. 파생 클래스에서 접근 가능. (public 과 private 의 중간 느낌) 생성자의 매개변수에도 접근제어자 설정이 가능하다. 이 때, 필드 정의는 반드시 생략해야 한다. 필드 초기화도 생략 가능하다. 생성자의 매개변수에 접근제어자 설정시, 자동으로 필드도 정의하고, 필드의 값도 자동으로 초기화하기 때문이다. - chapter2.ts/** * 접근 제어자 (access modifier) */class Empl.. 2024. 11. 19.
타입스크립트의 클래스 한 입 크기로 잘라먹는 타입스크립트 - 타입스크립트의 클래스   1. 타입스크립트의 클래스 class 에서 필드 선언시, 암시적으로 'any' 형식이 포함된다는 오류가 발생한다. 변수의 타입을 추론할 정보가 없기 때문이다. 이런 경우에 암시적 any 타입이 할당되어도 상관 없는 경우, tsconfig.json 에서 "noImplicitAny": false 옵션을 추가한다. 암시적 any 옵션을 허용하지 않는 옵션을 false 처리 한다. - chapter1.ts/** * 타입스크립트의 클래스 */const employee = { name: '송진성' , age: 31 , position: 'developer' , work() { console.log('일함'); }};clas.. 2024. 11. 18.

티스토리툴바