typescript error: 'RRule' only refers to a type, but is being used as a namespace here

Question

Im trying to implement 'rrule' for my angular calendar. It's showing me an error: [ts] 'RRule' only refers to a type, but is being used as a namespace here.

import RRule from 'rrule';

interface RecurringEvent {
  title: string;
  color: any;
  rrule?: {
    freq: RRule.Frequency;
    bymonth?: number;
    bymonthday?: number;
    byweekday?: RRule.Weekday[];
  };
}

Slipslop

Does it work if you replace your import by import * as RRule from 'rrule'? – Chatwin

No. It's not working – Slipslop

It's wokring now, by changing: import RRule from 'rrule' to import RRule, { Frequency, Weekday } from 'rrule'; and remove RRule from freq and byweekday – Slipslop

@SaiVishnu you need to use ['Frequency'] syntax with types to access the member like that. – Dumbarton

Answer 1

Or it should also be possible to use something like

  freq: typeof RRule.Frequency;
  ...

Travelled

Answer 2

it's because on:

    freq: RRule.Frequency;
byweekday?: RRule.Weekday[];

you are accessing elements from RRule but you don't have an instance from this class. Here I suppose you want to get the type of those elements. You can navigate to the definition of RRule and get those types, then you must have to add their imports too.

Sisyphus

Answer 3

One option is to use bracket notation, as suggested in a comment.

rrule.ts:

export default interface RRule {Frequency: string; Weekday: string};

recurring-event.ts:

import RRule from "./rrule";

export interface RecurringEvent {
  title: string;
  color: any;
  rrule?: {
    freq: RRule["Frequency"];
    bymonth?: number;
    bymonthday?: number;
    byweekday?: RRule["Weekday"][];
  };
}

---

In vanilla with JSDoc:

rrule.js:

/**
 * @typedef {Object} RRule
 * @property {string} RRule.Frequency
 * @property {string} RRule.Weekday
 */

/** @type {RRule} */
const RRule = {Frequency: "", Weekday: ""};
export default RRule;

recurring-event.js:

/** @typedef {import("./rrule").RRule} RRule */

/**
 * @typedef {Object} RecurringEvent
 * @property {string} title
 * @property {any} color
 * @property {{
 *    freq: RRule["Frequency"];
 *    bymonth?: number;
 *    bymonthday?: number;
 *    byweekday?: RRule["Weekday"][];
 * }} [rrule]
 */

/** @type {RecurringEvent} */
const recurringEvent = {
  title: "",
  color: "",
  rrule: {
    freq: "",
    bymonth: 0,
    bymonthday: 0,
    byweekday: [""],
  },
};

jsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "checkJs": true,
    "allowJs": true,
    "declaration": true,
    "target": "ES2016",
    "module": "ESNext",
    "moduleResolution": "node",
    "outDir": "dist"
  },
  "include": [
    "./src/*.js"
  ],
  "verbose": true
}

Command: tsc --project ./jsconfig.json.

Rosabella