Javascript (8) 썸네일형 리스트형 [TypeScript] overload 함수에서 No overload matches this call 에러 다음과 같이 오버로딩으로 된 코드를 작성했는데, No overload matches this call 이라는 error 가 발생 했다. function func(str: 'hi'): string; function func(str: 'bakery'): string; function func(arg: 'hi' | 'bakery'): string { return arg; } function callExample(str: 'hi' | 'bakery') { return func(str); // error occurred! } 급한 사람은 해결 방법부터 보자. 원인 에러 메시지를 자세히 보면 다음과 같다. No overload matches this call. Overload 1 of 2, '(str: "hi"):.. [You don't know JS] Chapter 4 - 강제변환 javascript 의 말 많은 강제변환에 대해 정리해보자! 명시적 / 암시적 강제변환 책에서는 자바스크립트의 강제 변환 타입을 다음 두 가지로 정의하고 있다. 명시적 변환과 암시적 변환은 작동하는 방식에서도 조금 차이가 있다. (책에서는 미묘하다고 표현한다.) 암시적 강제변환 다른 작업 도중 불분명한 부수 효과로 변환 된다. 아래 예시에서 b 는 공백 문자열 "" 과의 + 연산을 처리하면서 9 를 동등한 문자열인 "9" 로 강제 변환한다. 이는 + 연산을 하면서 발생시킨 부수효과로 암시적 강제변환이다. const a = 9; const b = a + "" // "9" 명시적 강제 변환 의도적으로 타입변환을 발생시킨다. c 는 명백하게 String() 함수를 이용해 문자열 타입으로 변환하고 있다. 이는 .. Typescript generic & util Typescript 쓰면서 알게된 것들을 정리해보고자 한다. 피드백 & 수정사항 환영합니다아 Typescript 의 제네릭 제네릭 : 클래스나 함수에서 사용할 타입을 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법 함수에서 흔한 사용 예 function first(arr: T[]): T { return arr[0]; } // number 로 타입을 명시해 주었다. first([1,2,3]); // type 명시하지 않아도 string 으로 추론한다. first(['a','b','c']); generic extends 특정 유형에 속한 type 을 정의하고 싶다면 extends 를 활용하자! 아래 예제에서는 Type 에 length 속성이 존재하지 않기 때문에 error 발생한다. function fo.. return function Javascript 코드를 보다 보면 함수 내에서 함수를 return 하거나, () => () => () 와 같은 특이한 함수의 형태를 보곤 하는데 이런 패턴들이 잘 이해가 가지 않아 한번 정리해보려고 한다. const generateSum = () => { const sum = (a,b) => a+b; return sum; } const foo = generateSum(); foo(2,3); //5 위의 형태가 쉽게 생각해 볼 수 있는 함수를 return하는 함수다. generateSum 에서 sum 함수를 return 하고 있고, return 된 함수를 받아 실행하고 있다. foo 라는 변수에 대입하지 않고도 sum 함수는 호출 가능하다. generateSum()(2,3); //5 위와 같이 gene.. [You don't know JS] Chapter2 - 값 자바스크립트에서 '값' 이 될 있는 것들에 관한 내용이 있는 장이다. 간략하게 중요해 보이는 것들만 요약했다. 배열 문자열, 숫자, 객체 등 어떤 타입이라도 담을 수 있다. 배열 하나도 하나의 객체다. 키/프로퍼티로 문자열을 추가할 수 있다. (하지만 length 가 증가하지는 않는다.) 배열의 키로 넣은 문자열 값이 10진수 숫자면 문자열 키가 아닌 숫자키를 사용한 것 같은 결과가 나온다. var a = []; a["21"] = 100; a.length; // 22 가 나온다! 그래서 배열에 문자열 타입의 키/프로퍼티를 두는건 권장하지 않는다. 문자열 문자열은 배열과 같지 않다. 문자열은 불변 값 이지만, 배열은 가변 값이다. 각 문자열 접근시 a[1] 이 아니라 a.charAt(1) 으로 접근해야 한.. [You don't know JS] Chapter1 - 타입 you don't know js 내용을 정리 해보자 Javascript 의 타입 javascript 도 타입이 있다. 단지, c++ 같은 언어와는 조금 다른 느낌 일뿐 ECMA 의 명세에 따르면 타입은 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별 할 수 있는, 고유한 내부 특성의 집합 이다. 즉, 10 과 "10" 은 사람이나 기계가 봤을 때, 각각 숫자와 문자열이라는 다른 타입으로 구분할 수 있다. 이렇게 구분할 수 있는 것들을 자바스크립트에서는 타입이라고 한다. Javascript 의 내장 타입 총 7가지의 내장 타입이 존재 한다. null undefined boolean number string object symbol (es6 추가) 여기서 object 를 제외한 타입들은.. 클로저 클로저 (Closure) You don't know JS 의 책을 인용하자면, 클로저는 렉시컬 스코프에 의존해 코드를 작성한 결과로 그냥 발생하는 것이다. 클로저는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 이 스코프에 접근할 수 있게 하는 기능을 뜻한다. 클로저의 예 function foo() { var a = 2; function bar() { console.log(a); // 2 로 출력 } return bar; } var baz = foo(); baz(); 함수 bar() 는 foo() 의 렉시컬 스코프에 접근 할 수 있다. foo() 는 bar() 함수 자체를 return 하면서 baz 에 넘긴다. 즉, bar 를 참조하는 함수 객체 자체를 반환 하는 것이다... 스코프 스코프 스코프의 정의 You Don't Know JS 에 따르면 스코프란, 특정 장소에 변수를 저장하고 변수를 찾는데 필요한 규칙을 '스코프(scope)' 라 정의한다. 즉 말그대로 자바스크립트에서 변수를 찾을 때 스코프에 따라서 변수를 찾는다. 변수들은 자신들의 스코프내에서만 유효하다. 변수에 따른 스코프 var 함수 스코프 단위다. 즉, 함수내에서만 유효하다. let,const 블록 스코프 단위다. {} 내에서 유효 렉시컬 스코프 (Lexical Scope) 자바스크립트는 렉시컬 스코프 방식을 채용하고 있다. 렉시컬 스코프란 렉싱(Lexing) 타임에 정의되는 스코프를 말한다. 쉽게 말하면 코드가 적힌 순간에 정해지는 스코프다. 실행 순서와는 관계가 없다. 코드를 짤 때 변수와 스코프 블록을 어디서 .. 이전 1 다음