문맥적 타입화(contextual typing) // log(message: string, userName?: string) 함수 type Log = (message: string, userName?: string) => void let log: Log = ( // ① message, // ② userName = '로그인 안했는데염...' // ③ ) => { // ④ let time = new Date().toISOString() console.log(time, message, userName) } 위의 코드는 함수의 매개변수 타입을 명시하지 않아도 되는 사례입니다. 이미 log의 타입을 Log로 지정했으므로 TypeScript가 message의 타입을 string으로 추론할 수 있기 때문입니다. 이는..
호출 시그니처 아래 코드의 sum은 함수이므로 sum은 Function 타입이라고 말할 수 있습니다. function sum(a: number, b: number): number{ return a + b } Function은 사람들이 즐겨 사용하는 타입은 아닙니다. object로 모든 객체를 가리킬 수 있는 것처럼 Function은 모든 함수의 타입을 뜻할 뿐이며 이것이 가리키는 특정 함수와 타입과 관련된 정보는 아무것도 알려주지 않습니다. sum은 number를 인수로 받아 한 개의 number를 반환하는 함수입니다. TypeScript에선 다음과 같이 표현할 수 있습니다. (a: number, b: number) => number 이 코드는 타입스크립트의 함수 타입 문법으로, 호출 시그니처(call ..
반복자(Iterator) 반복자(iterator)와 제너레이터(generator)는 상생관계입니다. 제너레이터로 값의 스트림을 생성할 수 있고, 반복자로 생성된 값을 소비할 수 있기 때문입니다. 가령 createFibonacciGenerator 함수를 호출하면 Symbol.iterator 프로퍼티와 next 메서드를 모두 정의한 값을 얻게 됩니다. 즉, 이터러블과 반복자 두 가지가 결합된 제너레이터가 반환됩니다. Symbol.iterator와 next를 구현하는 객체(또는 클래스)를 만들어 반복자나 이터러블을 직접 정의할 수 있습니다. 아래는 1에서 10까지의 숫자를 반복하는 반복자를 정의하는 예시입니다. let numbers = { *[Symbol.iterator]() { for (let n = 1; n
제너레이터 함수(generator function; 줄여서 제너레이터) 제너레이터 함수는 여러 개의 값을 생성하는 편리한 기능을 제공합니다. 제너레이터 함수를 이용하면 값을 생산하는 속도도 정교하게 조절할 수 있습니다. 제너레이터 함수는 소비자가 요청해야만 다음 값을 계산하기 때문에 무한의 목록 생성기 같은 까다로운 기능을 제공할 수 있습니다. 제너레이터 함수는 아래처럼 동작합니다. function* createFibonacciGenerator() { // ① let a = 0 let b = 1 while (true) { // ② yield a; // ③ [a, b] = [b, a + b] // ④ } } let fibonacciGenerator = createFibonacciGenerator(); fi..
TypeScript 실행 타입스크립트 설치 이전에 node가 설치되어 있어야 합니다. node 설치 방법은 아래 글을 참고해 주세요:) https://cozy-linda.tistory.com/entry/TypeScript-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%82%AC%EC%9A%A9 TypeScript 설치 JavaScript 실행 환경 설치 TypeScript를 사용하려면, JavaScript 실행 환경이 있어야 하며, node.js와 browser가 필요합니다. Node.js Node.js는 Chrome's V8JavaScript Engine을 사용하여, JavaScript를 해석하고, OS 레벨에서 cozy-linda.com 1. 디렉터리 생성 cmd 창을 열고 아래의 명령어..
this의 타입 this의 값은 함수를 어떻게 호출했는지에 따라 달라지는데 이는 JAvaScript 코드를 이해하기 어렵게 만드는 고질적인 문제 중 하나입니다. (따라서 많은 개발팀에선 클래스 메서드를 제외한 다른 모든 곳에서 this 사용을 금한다고 합니다.) this가 자주 문제를 일으키는 원인은 할당 방법에 있습니다. 메서드를 호출할 때 this는 점 왼쪽의 값을 갖는다는 것이 일반적인 원칙입니다. let x = { a() { return this } } x.a() // a()의 바디 안에서 this는 객체 x 하지만 호출이 일어나기 전 어느 시점에서 a를 다시 할당하면 결과가 달라집니다. let a = x.a a() // 이제 a의 바디 안에서 this는 정의되지 않은 상태 아래처럼 날짜의 타입을..
call, apply, bind 함수를 괄호 ()로 호출하는 방법도 있지만, JavaScript에선 두 가지 방법을 추가로 제공합니다. function add(a: number, b: number): number { return a + b } add(10, 20) // 30으로 평가 add.apply(null, [10, 20]) // 30으로 평가 add.call(null, 10, 20) // 30으로 평가 add.bind(null, 10, 20)() // 30으로 평가 apply는 함수 안에서 값을 this로 한정하며 두 번째 인수를 펼쳐서 함수에 매개변수로 전달합니다. call도 같은 기능을 수행하지만, 인수를 펼쳐서 전달하지 않고, 순서대로 전달한다는 점이 다릅니다. 비슷한 방식으로 bind도 th..
나머지 매개변수 인수를 여러 개 받는 함수라면 그 목록을 배열 형태로 건넬 수 있습니다. function sum(numbers: number[]): number { return numbers.reduce((total, n) => total + n, 0) } sum([2, 4, 6)] // 12로 평가 때로는 인수의 개수가 고정된 고정 인자 API가 아니라 인수의 개수가 달라질 수 있는 가변 인자 API가 필요할 때도 있습니다. 전통적으로 JavaScript는 마법 같은 arguments 객체를 통해 해당 기능을 제공했습니다. JavaScript 런타임이 함수에 자동으로 arguments를 정의해 개발자가 함수로 전달한 인수 목록을 할당한다는 점은 마법 같은 일입니다. arguments는 일종의 순수한 배..
선택적 매개변수와 기본 매개변수 객체와 튜플 타입에서처럼 함수에서도 ?를 이용해 선택적 매개변수를 지정할 수 있습니다. 함수의 매개변수를 선언할 때 필수 매개변수를 먼저 지정하고 선택적 매개변수를 뒤에 추가합니다. function log(message: string, userName?: string){ let time = new Date().toLocaleTimeString() console.log(time, message, userName || '뭐... 읎는데...') } log('페이지 로딩됨') // "17:07:22 PM 페이지 로딩됨 뭐... 읎는데..." 출력 log('유저 들어옴', 'cozyLinda') // "17:09:10 PM 유저 들어옴 cozyLind" 출력 JavaScript에..
