The build error TS1036 is thrown when a function with a return statement is moved to index.d.ts, even though it worked perfectly in a standard TS file

In my project using Node v14.x and StencilJS (React) v2.3.x, I encountered an issue with a test-helper file containing a function that converts string-arrays to number-arrays:

export function parseNumericStringOrStringArrayToIntegers(value: string | (string | string[])[]): number | (number | number[])[] {
  if (typeof value === 'string') {
    return parseInt(value);
  } else {
    return value.map((item) => parseNumericStringOrStringArrayToIntegers(item)) as number | (number | number[])[];
  }
}

I decided to move this function to the index.d.ts of the component for better organization. However, after making this change by replacing export with declare and removing unnecessary code, I ran into errors during the npm run build process:

[ ERROR ]  TypeScript: ./src/components/app/index.d.ts:46:108
           An implementation cannot be declared in ambient contexts.

     L46:  declare function parseNumericStringOrStringArrayToIntegers(value: string | (string | string[])[]): ConfigIntValue {
     L47:    if (typeof value === 'string') {

[ ERROR ]  TypeScript: ./src/components/app/index.d.ts:48:5
           Statements are not allowed in ambient contexts.

     L47:  if (typeof value === 'string') {
     L48:    return parseInt(value);
     L49:  } else {

This left me puzzled as to how to resolve these errors. It seems like I'm missing something obvious, but what could it be?

typescriptrxjstypescript-typingsstenciljsstencil-component

Answer №1

It appears that the problem may lie in placing the implementation within index.d.ts:

I made the decision to include this function in index.d.ts of the component

Files ending with .d.ts are considered as type declaration files, which serve as special files in TypeScript meant for type information and not actual function implementations. Based on an overview of the entire codebase, I presume this might be the root cause of the issue. Moving the code to index.ts or any other file without the suffix .d.ts could potentially resolve the problem

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to start Angular2 prototype with an object literal

export abstract class GridColumn { public field?: string; public sortField?: string; public header?: string; public footer?: string; public sortable?: any = true; public editable?: boolean = false; public filter?: boolean = true ...

angulartypescript

Pass a React component as a required prop in Typescript when certain props are necessary

I am currently working on a project where I need to create a custom TreeView component using React and Typescript. My goal is to have the ability to inject a template for each TreeNode in order to render them dynamically. My main challenge right now is fi ...

reactjstypescript

What drawbacks come with developing an Express.js application using TypeScript?

Curious about the potential drawbacks of using TypeScript to write Express.js applications or APIs instead of JavaScript. ...

javascriptnode.jstypescriptexpress

Getting the first nested object within an object in Angular 8: A comprehensive guide

Looking to extract the first object from a JSON data set? In this case, we want to retrieve {"test": {"id":1, "name":"cat"}} from the following object: { "3": {"test": {"id":1, "name":"cat"}}, "4": {"test": {"id":2, "name":"dog"}}}. Keep in mind that the ...

htmlangulartypescript

Setting up Jest to run in WebStorm for a Vue project with TypeScript can be done through

I am struggling to run all my tests within WebStorm. I set up a project with Babel, TypeScript, and Vue using vue-cli 3.0.0-rc3. My run configuration looks like this: https://i.stack.imgur.com/7H0x3.png Unfortunately, I encountered the following error: ...

typescriptvue.jswebstorm

Failed validation for Angular file upload

I attempted to create a file validator in the front end using Angular. The validator is quite straightforward. I added a function onFileChange(event) to the file input form to extract properties from the uploaded file. I then implemented a filter - only al ...

javascripthtmlcssangulartypescript

When using `useSWR`, it will return { null, null } for a successful request

When attempting to query the Firebase real-time database using useSWR in my next.js project, I encounter a perplexing issue where both the data and error variables always return as null. import useSWR from 'swr'; const LastSales: NextPage = () = ...

reactjstypescriptfirebase-realtime-databasenext.jsswr

Issue of displaying buttons based on sibling's height under certain conditions

OBJECTIVE I have undertaken a project to enhance my skills in React and TypeScript by developing a UI chat interface. The design requirement is that when a chat message has enough vertical space, its action buttons should appear stacked vertically to the ...

javascriptreactjstypescriptreact-typescript

Location of the bundled Webpack index.html file while running locally on a Nativescript WebView

I am currently working on a hybrid app project that involves both NativeScript and Angular. To integrate the two, I have set up a WebView and consolidated all my Angular project files into a folder within my NativeScript project. As part of this setup, I ...

angulartypescriptwebpacknativescript

Tips for Resolving TypeScript Error 7053 when using the handleChange function in a React Form

Seeking assistance with creating a versatile handleChange function for a React form. The goal is for the handleChange function to update the state value whenever a form field is modified, while also accommodating nested values. Below is my attempt: const ...

reactjstypescript

What is the best way to organize class usage within other classes to prevent circular dependencies?

The engine class presented below utilizes two renderer classes that extend a base renderer class: import {RendererOne} from "./renderer-one"; import {RendererTwo} from "./renderer-two"; export class Engine { coordinates: number; randomProperty: ...

javascripttypescript

Sharing information between sibling modules

Currently, I am faced with the challenge of transmitting data between two sibling components within the following component structure. The goal is to pass data without changing the relationships between these components. I prefer not to alter the componen ...

javascriptangulartypescriptangular7

Essential parameters needed in a Typescript function signature

My code includes the following type definition: type FuncWithRequiredParams = (a: number, b: number, c:string) => void const func1: FuncWithRequiredParams = (a: number, b: number, c: string) => {} // This is functional const func2: FuncWithRequiredP ...

typescript

Creating sophisticated TypeScript AngularJS directive

Recently, I came across a directive for selecting objects from checkboxes which can be found at this link: The issue I'm facing is that we are using TypeScript and I am unsure of how to implement the directive in TypeScript. From what I understand, ...

javascriptangularjstypescriptangular-directive

Exploring the Worldwide Influence of TypeScript, React, and Material-UI

I am currently following an official tutorial on creating a global theme for my app. In my root component, I am setting up the global theme like this: const themeInstance = { backgroundColor: 'cadetblue' } render ( <ThemeProvider theme ...

javascriptreactjstypescriptmaterial-ui

`"Type is invalid" error occurring with component after importing it into a different project``

I am currently working on developing a custom Storybook 7 Typescript component library with React. I have successfully imported this library into another project using a private NPM package. However, one of the components in the library, specifically the ...

javascripttypescriptimportcomponentsexport

When I apply filtering and grouping to the table, the rows in the mat table disappear

When using mat-table, grouping works fine without filtering. However, once the table is filtered or if the search bar is focused, ungrouping causes the rows in the table to disappear. I am looking for a solution that allows me to group and ungroup the tabl ...

angulartypescriptangular-materialgroupingmat-table

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

I have implemented ngx-slick-carousel to showcase YouTube videos in my project. However, I am facing two main issues. Firstly, the carousel is not infinite, and when the last video is reached, there appears to be white spaces before it loops back to the fi ...

javascriptjqueryangulartypescriptbootstrap-5

TypeScript's Awaitable concept

Lately, I have been utilizing async / await functions quite frequently in my JavaScript projects. As I make the transition to TypeScript, I am gradually converting some sections of my code bases. In certain scenarios, my functions require a function as an ...

typescriptasync-await

What role does enum play in typescript?

What is the purpose of an enum in typescript? If it's only meant to improve code readability, could we achieve the same result using constants? enum Color { Red = 1, Green = 2, Blue = 4 }; let obj1: Color = Color.Red; obj1 = 100; // IDE does not sh ...

typescript