[SvelteKit] Object literal may only specify known properties, and '"gs-w"' does not exist in type 'HTMLProps<"div", HTMLAttributes<any>>'.ts(2353)

SvelteKit 으로 웹 프로젝트 개발 중, Drag and Drop 및 레이아웃 커스텀 기능을 사용하기 위해 GridStack.js 를 사용하게 되었는데,

사이즈 조절을 위해 GridStack 에서 임의의 속성값을 Element 에 설정해주어야한다. 이때, 다음과 같은 에러가 발생하면서 빨간줄이 생겨 몹시 거슬리는 상황이었다.

 

• 에러 내용

Object literal may only specify known properties, and '"gs-w"' does not exist in type 'HTMLProps<"div", HTMLAttributes<any>>'.ts(2353)

 

구글링해도 나오지 않고, GPT 도 통쾌한 답을 내지 못하는 상황,,,, SvelteKit 프로젝트를 뒤적거리다 .svelte-kit 하위의 non-ambient.d.ts 파일을 발견!!

이게 무엇인고 하니 SvelteKit이 자동으로 생성하는 타입 정의 파일로, HTML 요소의 속성을 확장하는 역할을 한다고 한다.

• non-ambient.d.ts 내용

// this file is generated — do not edit it


declare module "svelte/elements" {
	export interface HTMLAttributes<T> {
		'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
		'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
		'data-sveltekit-preload-code'?:
			| true
			| ''
			| 'eager'
			| 'viewport'
			| 'hover'
			| 'tap'
			| 'off'
			| undefined
			| null;
		'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
		'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
		'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
	}
}

export {};

 

이거다 싶어 냅다 커스텀 속성인 gs-w 를 정의했더니, 빨간줄이 사라지는거 아니겠는가!

하지만 이 파일은 빌드할 때 마다 덮어씌워지는 녀석.. 이기 때문에 Config 를 바꿔서 적용시켜줄 필요가 있다.

이럴때 필요한것이 src/app.d.ts 파일! app.d.ts 는 SvelteKit에서 타입스크립트 관련 설정을 커스텀할 때 사용하는 선언 파일 (Type Declaration File) 로써 이 파일을 이용하면 전역 타입을 추가하거나, Svelte의 기본 타입을 확장할 수 있다.

 

• app.d.ts 에 아래 내용 추가

// CUSTOM INTERFACE FOR UNITY AND GRIDSTACK
declare module "svelte/elements" {
	interface HTMLAttributes<T> {
		"gs-w"?: string;
		"gs-h"?: string;
	}
}

이 내용을 추가해주면 ts 에러가 사라지고 깔끔한 코드를 작성할 수 있다!!

GPT 는 계속 엉뚱한 대답을 해줘서 꽤나 헤멨다..