몽땅뚝딱 개발자

에러 [Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations. 원인 src 바로 하위 레벨에 설정한 d.ts 파일이 폴더 내부에서 적용되지 않아서 실제 이미지가 있는 디렉토리 하위로 옮겼더니 적용되었다. declare module '*.webp'; declare module '*.png'; declare module '*.jpg'; declare module '*.jpeg'; declare module '*.gif'; declare module '*.svg'; 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

다음 함수의 타입을 정해보자. function filter(array, f) { let result = [] for(let i=0; i boolean): number[] (array: string[], f: (item: string) => boolean): string[] (object: string[], f: (item: Object) => boolean): object[] // error! } 이 때 제네릭(Generic)을 사용하여 이렇게 표현해보자! 타입스크립트는 전달된 인수의 타입을 이용해 제네릭을 어떤 타입으로 한정할 지 추론한다. number를 할당하면 number로 한정, string으로 할당하면 string으로 타입을 한정짓는다. // 제네릭을 사용하여 이렇게 줄여보자! // 이 타입이 ..

◽ @ts-check 마이그레이션 과정에서 타입스크립트 전환 시 어떤 문제가 발생하는지 @ts-check를 활용하여 시험해 볼 수 있다. // @ts-check const person = { first: 'Grace', last: 'Hopper' } 2 * person.first // Error! ◽ JSDoc 아래 코드에서 에러가 나는 이유는 더 상위 개념인 HTMLElement 타입을 반환하기 때문이다. // @ts-check const ageEl = document.getElementById('age') ageEl.value = '12' // Error! 'HTMLElement' 유형에 'value' 속성이 없습니다. 확실히 input 엘리먼트라는 것을 알고있다면 단언문을 사용히여 해결할 수 있다...

🌈 목차 1. ECMAScript 모듈 사용하기 2. 프로토타입 대신 클래스 사용하기 3. var 대신 let/const 사용하기 4. for(;;) 대신 for-of 또는 배열 메서드 사용하기 5. 함수 표현식보다 화살표 함수 사용하기 6. 단축 객체 표현과 구조 분해 할당 사용하기 ECMAScript 모듈 사용하기 ◽ 개별로 모듈을 분리했던 과거의 방법들 개별 모듈로 분리하는 방법은 여러개의 사용하기, makefile 기법(뭔지 모르겠음..), NodeJS 스타일의 require 구문, AMD 스타일의 define 콜백까지 매우 다양했다. 📄 CommonJS - required 구문 // a.js const b = require('./b') // b.js const name = require('Mod..

타입스크립트에서는 DOM 엘리먼트의 계층 구조를 파악하기가 용이하다. Element와 EventTarget에 달려 있는 Node의 구체적인 타입을 안다면 타입 오류를 디버깅 할 수 있고, 언제 타입 단언을 사용해야 할 지 알 수 있다. (일반적으로 타입 단언은 지양하는게 좋지만, DOM 관련해서는 타입스크립트보다 우리가 알고있는게 더 명확하므로 사용해도 된다.) ◽ dom 계층의 타입들 타입 예시 EventTarget window, XMLHttpRequest Node document, Text, Comment Element HTMLElement, SVGElement HTMLElement , HTMLxxxElement : HTMLButtonElement : HTMLParagraphElement ◽ Even..

1. 모든 변수에 타입을 넣지 않는다. - 타입스크립트는 결국 타입을 위한 언어이기 때문에 변수를 선언할 때마다 타입을 명시해야한다고 생각할 수 있다. 하지만 모든 변수에 타입을 선언하는 것은 비생산적이며, 타입스크립트가 타입을 추론할 수 있다면 타입 구문을 작성하지 않는 것이 좋다. - 이상적인 타입스크립트 코드는 *메서드 시그니처에 타입 구문을 포함하지만, 함수 내에서 생성되는 지역변수에는 타입 구문을 넣지 않는다. 타입 구문을 생략하여 방해되는 것들을 최소화하고 코드를 읽는 사람이 구현 로직에 집중할 수 있게 하는 것이 좋다. * 메서드 시그니처란? 메서드 이름 + 파라미터의 조합이 메서드 시그니처가 된다. 메서드 시그니처가 같다는 말은 메서드 이름과 파라미터가 같다는 뜻이다. - eslint 규칙..

대부분의 편집기는 인라인(//)이 아닌 JSDoc(/** */) 스타일의 주석을 툴팁으로 표시해준다. /** * 인사말을 생성하는 함수 * @param name 인사할 사람의 이름 * @return 인사말 */ const greetFullTSDoc = (name: string) => { return `안녕하세요, ${name}님.` } 인터페이스에도 적용해 볼 수 있다. /** 유저정보 */ interface User { /** 유저의 이름 */ name: string /** 유저의 나이 */ age: number } const user1: User = { name: 'vinch', age: 10000, } 마크다운도 사용할 수 있다. 📄 예시 1. /** * this _interface_ has **t..

◽ declare module 선언 어떤 라이브러리를 사용하기 위해 import를 했을 때 타입스크립트와 호환되지 않을 수도 있다. 그럴 땐 declare module로 선언하면 라이브러리의 타입정보를 없앨 수 있다. ◽ @types # 특정 버전에 대한 타입 정보를 설치하려면 이렇게 하면 된다. $ npm i --save-dev @types/lodash@ts3.1 출처 댄 밴터캄, 이펙티브 타입스크립트 (프로그래밍 인사이트, 2021) 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

any는 남발하지 않는 것이 좋지만 꼭 사용해야한다면 가능한 한 좁은 범위에서 사용하도록 한다. any는 자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입이다. any 타입에는 모든 숫자, 문자열, 배열, 객체, 정규식, 함수, 클래스, DOM 엘리먼트는 물론 null, undefined까지 포함한다. ◽ 변수에 사용할 때 // 이렇게 사용하지 않는다. const f1 = () => { const x: any = expresstioReturningFoo() useBar(x) } // 다른 코드에는 영향을 끼치지 않도록 매개변수에만 사용한다. const f2 = () => { const x = expresstioReturningFoo() useBar(x as any) } ◽ 객체에 ..

CASE 1. 유니온의 인터페이스보다는 인터페이스의 유니온을 사용하자 아래처럼 사용하면 너무 많은 속성을 갖게되고 너무 많은 오류를 발생시킬 수 있다. interface Layer { layout: FillLayout | LineLayout | PointLayout paint: FillPaint | LinePaint | PointPaint } 각각 타입의 계층을 분리된 인터페이스로 두는 더 나은 방법으로 모델링 할 수 있다. interface FillLayer { layout: FillLayout paint: FillPaint } interface LineLayer { layout: LineLayout paint: LinePaint } interface PointLayer { layout: PointLa..