Asked  4 Months ago    Answers:  5   Viewed   40 times

I am getting File node_modules/@types/webrtc/index.d.ts is not a module with this code:

import * as webrtc from "webrtc";
const peerConnection1 = new RTCPeerConnection();

I have installed the typings using npm i @types/webrtc --save-dev. Hovering over RTCPeerConnection in const peerConnection1 = new RTCPeerConnection(); display type annotations in Visual Studio Code so at least the code editor sees the types. Running tsc (or webpack with ts-loader) fails with the error.

I have tried npm i webrtc --save in a misguided attempt for solving this, but it did not change anything and I really only want the typings anyway, WebRTC is right there in the browser, I don't need a package for that. (Support aside.)

The index.d.ts file indeed is not a module, it just references two other files with interfaces in them. So I thought to remove import * as webrtc from "webrtc"; hoping the typings will still be visible by tsc somehow. (But that's impossible since I exclude node_modules in TypeScript config file.) When I do that RTCPeerConnection is no longer recognized.

Adding /// <reference src="node_modules/@types/webrtc/" /> did not help, tsc says Invalid reference directive syntax.

You can view a repository with minimal repro here on GitLab. I am not too well versed in TypeScript typings acquisition so please forgive my ignorance if I'm going about this all wrong.



webrtc is part of the browser; you're trying to import a module. Simply import the (typings) library:

import "webrtc";

you may need to use "moduleResolution": "node" in the compiler options.

Alternatively use the "types": ["webrtc"] compiler option and the compiler will automatically load those types up for you.

Tuesday, August 3, 2021
answered 4 Months ago

You need to specify the type of the argument after the destructuring expression

 onTextBoxInit({ element }: {element: ElementRef }){} 
Friday, July 30, 2021
answered 5 Months ago

Instead of using:

import { Process } from '@types/node';

You need to change your tsconfig.json:

  "compilerOptions": {
    "typeRoots": ["node_modules/@types"]

After doing that the process variable becomes available as a global.

Sometimes you will need to import from a Node.js module like for example the fs module. You can do:

import * as fs from "fs";

You don't need to import fs from "node" or from "@types/node".

You can learn more here.

Thursday, August 5, 2021
answered 4 Months ago

@NitzanTomer is right. It's not the match functions parameter that has a type mismatch. You certainly try to store the return value of the match function in a string typed variable / return it from a :string function / pass it as a string parameter.

Tuesday, August 24, 2021
answered 4 Months ago

First of all, you need to make TagList immutable.

Then I just created literal type based on key. Very similar to Array.prototype.reduce

export const TagList = {
    username_not_found: ['username'],
    username_found: ['name'],
    batman: ['a', 'b']
} as const;

type Elem = string

type Reducer<
    Arr extends ReadonlyArray<Elem>, // array
    Result extends Record<string, any> = {} // accumulator
    > = Arr extends [] ? Result // if array is empty -> return Result
    : Arr extends readonly [infer H, ...infer Tail] // if array is not empty, do recursive call with array Tail and Result
    ? Tail extends ReadonlyArray<Elem>
    ? H extends Elem
    ? Reducer<Tail, Result & Record<H, string>>
    : never
    : never
    : never;

type TagList = typeof TagList;

const trans = <Tag extends keyof TagList, Props extends Reducer<TagList[Tag]>>(tag: Tag, props: Props) => null as any

trans("username_not_found", { username: "" }); // ok
trans("username_found", { name: "John" }); // ok
trans("batman", { a: "John", b: 'Doe' }); // ok

trans("username_not_found", { name: "" }); // expected error
trans("username_found", { username: "John" }); // expected error

The main goal here is to convert tuple ['username'] into { username: string }

How would you do it in pure js?

['username'].reduce((acc, elem) => ({ ...acc, [elem]: 'string' }), {})

I'm using almost the same algorithm, but recursion instead of iteration.

This is js analogue of Reducer utility type

const reducer = (arr: ReadonlyArray<Elem>, result: Record<string, any> = {}): Record<string, any> => {
    if (arr.length === 0) {
        return result

    const [head, ...tail] = arr;

    return reducer(tail, { ...result, [head]: 'string' })

MOre information you can find in my blog

Monday, November 29, 2021
Christopher Francisco
answered 5 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :