unable to use installed types with typescript in svelte

user_15215139 0
Viewed 202

I've had a hard time being able to get my project to compile with an installed type. I'm using MediaRecorder, and I've installed @types/dom-mediacapture-record. With the default set up I was unable to get MediaRecorder recognized.

I've managed to get things working by 1) not extending @tsconfig/svelte/tsconfig.json and 2) add the specific type along with "svelte" under types: "types": ["sevlte", "@types/dom-mediacapture-record"]. I wasn't able to get this to work using typeRoots

I couldn't find examples of anyone else having this trouble online, so I feel like I must be missing something obvious.

svelte typescript
1 Answers

Here's what I've quickly tried and seemed to work (doesn't need any changes to tsconfig.json):

Edit

I found out there is a problem with my original code when importing some types from the current project (as opposed to some imported types from node_modules) in addition to dom-mediacapture-record. Wrapping interface Window... in declare global {...} solves this. So here goes the updated code:

// add a file "<your filename here>.d.ts" to your src directory containing 
// the following code:

// import the types from @types/dom-mediacapture-record in order
// to extend the existing Window type with them
import * as dmr from "dom-mediacapture-record";
import type { MyCustomInterface } from "./customStuff";

// Using TypeScript's declaration merging, "extend" the existing 
// Window interface
declare global {
   interface Window extends dmr, MyCustomInterface {}
}

Version Before Edit:

// add a file "<your filename here>.d.ts" to your src directory containing 
// the following code:

// import the types from @types/dom-mediacapture-record in order
// to extend the existing Window type with them
import * as dmr from "dom-mediacapture-record";

// Using TypeScript's declaration merging, "extend" the existing 
// Window interface
interface Window extends dmr {}
user_42622760
Related