kakaomap API는 타입 지원을 하지 않기 때문에 타입스크립트 환경에서 해당 라이브러리를 사용하려면 글로벌 타입 선언이 필요하다. env.d.tsinterface Window { kakao: any} 여기까지 했을 때 new window.kakao.maps로 시작하는 메서드는 문제 없이 사용할 수 있지만, kakao Map 객체에 대한 타입 정의는 불가능하다. 그래서 필요한 타입 선언을 직접 추가해주는 방법을 사용했다. src/types/kakao.d.tsdeclare namespace kakao.maps { class Map { constructor(container: HTMLElement, options: MapOptions) getCenter(): LatLng setCe..
typescript
typescript 환경에서 window.kakao.maps를 사용하려고 하면 Property 'kakao' does not exist on type 'Window & typeof globalThis'. 라는 에러가 뜨는데 이를 어떻게 해결할까 env.d.tsinterface Window { kakao: any}타입을 직접 정의해준다~ eslint 규칙에서 any를 허용해야 한다면? ⬇eslint.config.js{ rules: { '@typescript-eslint/no-explicit-any': 'off', // any 사용 허용 },},
interface Props { myObj?: { name: string, icon: string };} const props = withDefaults(defineProps(), { myObj: { name: '', icon: '' },}); optional props를 작성하면 초기값을 설정해주는 것이 권장된다.그러나 이때 객체 타입의 props의 초기값을 저렇게 단순하게 설정하게 되면 eslint 에러가 나게 된다. Type of the default value for 'myObj' prop must be a function. 기본값 객체는 공유된다.즉, { name: ‘’, icon: ‘’ } 를 여러 컴포넌트 인스턴스에서 동일하게 참조하기 때문에, 한 곳에서 해당 객체가 바뀌면 모든 곳에서 변..
You-Dont-Know-JS 내용 참고 가장 흥미로웠던 점은 내가 비교할 두 변수의 타입을 확실하게 알고 있고, 두 변수의 타입이 완전히 일치한다면 === 대신 ==를 쓰라는 것이다. You-Dont-Know-JS/types-grammar/ch4.md at 2nd-ed · getify/You-Dont-Know-JSA book series on JavaScript. @YDKJS on twitter. Contribute to getify/You-Dont-Know-JS development by creating an account on GitHub.github.com 그 이유는 우리가 타입을 확신할 수 없을 때, ===을 사용하여 예상치 못한 결과를 막을 것이기 때문이다. 결론적으로 == 와 ===를 쓰..
Documentation - GenericsTypes which take parameterswww.typescriptlang.org 제네릭(Generic) 이란?제네릭은 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법이다. generic의 단어 뜻은 일반적인, 총칭의, 포괄적인 이다.즉, 타입을 일반화하는 것을 의미한다. 특정 타입에 의존하지 않고 다양한 타입에 대해 동작할 수 있는 함수나 클래스 등을 작성할 수 있게 해주기 때문이다. → 함수와 클래스의 범용적인 사용이 가능해진다. 콘크리트 타입 대신 사용 가능📢 콘크리트 타입 : number, string, boolean, void, unknown 등" data-ke-type="html">HTML ..
지난 게시글에 npm으로 라이브러리를 배포했으나, 해당 라이브러리를 TS 환경의 프로젝트에서 사용하려고 하면 타입 에러가 발생했다.이는 라이브러리의 타입 정의가 없어서인데, 즉 쉽게 말해 dist 폴더에 index.d.ts 파일이 없기 때문에 발생한 것이다. 그렇다면 라이브러리에 적합한 타입 정의를 주어(= index.d.ts 파일을 생성하여) TS 환경의 프로젝트에서도 사용가능하게 만들어야 한다. 우선 그렇다면 dist 폴더는 무엇이고 어떤 역할을 할까? distdistribution(유통, 배포)의 약자실제 운영 환경에서 사용되는 축소/연결 버전ts 환경의 프로젝트를 빌드하면 js 코드로 컴파일된 결과물이 dist 폴더에 담긴다. 배포된 라이브러리를 install 하여 사용할 때는 해당 라이브러리의..
Type 선언 방식 defineProps() 는 2가지 타입 선언 방식을 가지고 있다. 1. 런타임 선언 ◾ ( ) 안에 인수를 정의 2. 타입 기반 선언 ◾ Props의 타입을 미리 정의해두고 컴파일러는 이를 기반으로 동일한 런타임 옵션을 추론한다. (타입스크립트와 함께 사용한다면 이 방법을 권장!) 안에 인수를 정의 위의 두 가지 선언은 모두 사용가능하지만, 동시에 사용할 수는 없다. 또한 Props 타입을 별도의 인터페이스로 분리할 수도 있다. 또한 인터페이스를 외부 소스에서 가져올 수도 있다 (import) ※ 외부 인터페이스 참조는 3.3버전 이상에서만 가능함 (하위 버전에서는 로컬 인터페이스 참조만 가능) → 내가 Vue 버전 업데이트를 진행한 이유 기본 값 설정 2번째 방법인 타입 기..
타입스크립트를 사용하다보면 참 이런 이벤트들, 외부 라이브러리들 타입 주기가 참 어렵다. @input이 반환하는 event의 타입은 InputEvent 이다. InputEvent → UIEvent → Event 순으로 타고타고 찾아가다보면 target을 확인할 수 있다. 이때 target의 타입은 EventTarget 또는 null이다. 황당하고 놀랍게도 EventTarget에는 value가 없다….. (메서드만 가지고 있더라) const target = e.target as EventTarget 그래서 만약 이렇게 줘버리면 또 target.value 를 쓸 수 없게 된다. EventTarget - Web API | MDN EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한..
