TypeScript

[타입스크립트] 호출 시그니처(타입시그니처)란?

함수 시그니처란 컴파일러가 함수를 구분하기 위한 구성요소를 말한다. 프로그래밍 언어마다 시그니쳐를 구성하는 요소가 다르지만 대체적으로 아래의 요소가 포함되어 있다. 함수의 이름 매개변수(Parameter)의 개수 (옵셔널) 매개변수의 자료형 (옵셔널) 반환하는 값의 자료형 만약 두 함수의 이름, 매개변수의 개수, 그 타입이 모두 같다면 이 두 함수의 시그니처는 같다고 할 수 있다. 함수의 전체 타입을 표현하는 방법 function sum(a: number, b: number): number { return a + b; } number타입의 인자 두개를 받아 number타입을 반환한다는 뜻의 타입스크립트의 함수 타입 문법 (a: number, b: number) => number 이런 식의 표현을 호출 시..

TS로 콜백 함수, 중첩 함수, 고차 함수 구현

darren, dev blog :: TS로 콜백 함수, 중첩 함수, 고차 함수 구현 (tistory.com)

[타입스크립트] 추상화를 이용해서 클래스 개선하기

- 외부에서 클래스를 바라 봤을 때, 사용해야 할 함수가 너무 많이 뜨면 사용자는 무엇을 사용해야 할지 혼란스러울 수 있다. 이를 개선하기 위한 도입할 수 있는 개념이 바로 '추상화'이다. 정말 필요한 api들만 노출함으로써 클래스를 보다 사용하게 쉽게 만들어 줄 수 있다. 다음 아래와 같은 커피머신 클래스가 있다고 가정한다. // //커피머신 만들기 type CoffeeCup = { orderShot: number; }; class coffeeMachine { private static ONE_SHOT_CAPSULE: number = 3; private static ONE_CUP_WATER: number = 10; static makeMachine(beans: number, water: number):..

[타입스크립트] 캡슐화, 추상화 차이 명확하기 잡기

OOP 자체가 세상에 있는 것을 본따 클래스를 만들고 그것들로 프로그래밍을 하겠다는 개념이고 캡슐화와 추상화는 아이디어 자체는 공유하지만 사뭇 갈래가 다른 느낌이다. 캡슐화는 세상에 있는 것을 본따 클래스를 만들 때 하나의 객체에 대해 그 객체가 특정한 목적을 위한 필요한 변수나 메소드를 하나로 묶는 것을 의미한다. [따라나오는 개념 : 정보은닉, private/public/protected, getter/setter] 추상화는 세상에 있는 것을 본따 클래스를 만들 때 추상적으로 생각해 클래스 안에 최소 들어가야겠다 싶은 공통적인 요소나 필수적인 요소들을 넣어서 만드는 것이다. [따라 나오는 개념 : 추상클래스, 인터페이스] 캡슐화란, 하나의 객체에 필요한 메소드와 변수들을 하나로 묶는 것이고, 정보 은..

[타입스크립트] 문맥적 타입화

작성예정

[타입스크립트] 호출 시그니처

타입스크립트로 함수의 전체 타입을 표현하는 방법을 알아보자. object로 모든 객체를 가리킬 수 있는 것처럼 function은 모든 함수의 타입을 뜻할 뿐이며, 그것이 가리키는 특정 함수와 타입과 관련된 정보는 아무 것도 알려주지 않는다. function sum(a: number, b: number): number { return a + b; } 그렇다면 위 sum의 타입을 표현할 수 있는 다른 방법을 모색해보자. sum은 두 개의 number을 인수로 받아 한 개의 number를 반환한는 함수다. 타입스크립트에서는 이를 다음과 같이 표현할 수 있다. (a:number, b:number)=> number 위 코드는 타입스크립트의 함수 타입 문법으로, 호출 시그니처(call signature) 또는 타입..

[타입스크립트] 제너레이터, 반복자(iterator) 추론과 명시

Generator 타입스크립트는 Generator가 yield를 통해 방출한 값을 토대로 반복자의 타입을 추론한다. 제너레이터 함수 반복자(iterator)와 제너레이터는 상생관계다. 제너레이터로 값의 스트림을 생성할 수 있고 반복자로 생성된 값을 소비할 수 있기 때문이다. 이터러블(iterable;반복할 수 있는)Symbol.iterator 라는 프로퍼티(반복자를 반환하는 함수)를 가진 모든 객체 반복자(iterator)next라는 메서드(value, done 두 프로퍼티를 가진 객체를 반환)를 정의한 객체 자바스크립트에서 제너레이터 함수를 호출하면 이터러블 반복자(IterableIterator)가 반환된다. 타입스크립트에서도 지원한다. //다음 피보나치 숫자를 계산하기 위해 a에 b를, b에 a+b를..

[타입스크립트] 커피머신 클래스만들기 실습

//커피머신 만들기 type CoffeeCup = { orderShot: number; }; class coffeeMachine { private static ONE_SHOT_CAPSULE: number = 3; private static ONE_CUP_WATER: number = 10; static makeMachine(beans: number, water: number): coffeeMachine { return new coffeeMachine(beans, water); } constructor(private capsule: number = 3, private water: number = 10) {} makeCoffee(orderShot: number): CoffeeCup { if (this.caps..

[타입스크립트] 제너레이터 지원, 명시

제너레이터 함수 제너레이터 함수는 여러 개의 값을 생성하는 편리한 기능을 제공한다. 제너레이터 함수를 이용하면 값을 생산하는 속도도 정교하게 조정할 수 있다. //다음 피보나치 숫자를 계산하기 위해 a에 b를, b에 a+b를 한번에 다시 할당한다. function* createFibonacciGenerator() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } let fiboancciGenerator = createFibonacciGenerator(); //IterableIterator console.log(fiboancciGenerator.next()); //{ value: 0, done: false } console.l..

[타입스크립트] this 관련 오류

function fancyDate() { return console.log( `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}` ); } fancyDate.call(new Date()); src/index.ts:74:8 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. 74 `${this.getDate()} / ${this.getMonth()} / ${this.getFullYear()}` ~~~~ src/index.ts:74:28 - error TS2683: 'this' implicitly has type 'any' becau..