Tips on adding TypeScript annotations to an already existing global function

Question

Tips on adding TypeScript annotations to an already existing global function

I'm contemplating enhancing an existing project by incorporating TypeScript type annotations. Struggling to supply an external declaration file for a straightforward example:

app.ts:

/// <reference path="types.d.ts"/>

function welcome (person) {
    console.log(person.name);
}

var y = {name: 'John'};

welcome(y);

types.d.ts:

interface Person {
    height?: number,
    name: string
}

declare function greet (person: Person): void;

Although I anticipated success, an error has surfaced:

program.ts(3,10): error TS2384: Overload signatures must all be ambient or non-ambient.

The issue seems to stem from the misunderstanding of the function definition as an overload rather than the implementation of a previous declaration.

How can I correctly add a type to the welcome function?

Requirement: The app.ts should remain pure JavaScript, devoid of any type annotations.

javascript typescript

Answer 1

Answer №1

The language does not support or allow this action. The code essentially performs...

interface Person {
    height?: number,
    name: string
}

declare function greet(p: Person): void;

function greet(p: any): void {
    console.log(p.name);
}

This error occurs because a function and ambient function are defined with the same name.

How should we properly add a type to the greet function?

To resolve this, update the code as follows:

interface Person {
    height?: number,
    name: string
}

function greet(p: Person): void {
    console.log(p.name);
}

Requirement: program.ts must be plain JavaScript, without any type annotations.

Modifying the code within program.ts to be pure JavaScript is not feasible. One solution could be renaming program.ts to program.js and creating a declaration file to define the type of elements in program.js. This method only provides type information for other files using program.js, but it does not prevent errors within program.js.

It's important to note that declaration files primarily offer type information for code in .js files rather than .ts files.

Answer 2

The language does not support or allow this action. The code essentially performs...

interface Person {
    height?: number,
    name: string
}

declare function greet(p: Person): void;

function greet(p: any): void {
    console.log(p.name);
}

This error occurs because a function and ambient function are defined with the same name.

How should we properly add a type to the greet function?

To resolve this, update the code as follows:

interface Person {
    height?: number,
    name: string
}

function greet(p: Person): void {
    console.log(p.name);
}

Requirement: program.ts must be plain JavaScript, without any type annotations.

Modifying the code within program.ts to be pure JavaScript is not feasible. One solution could be renaming program.ts to program.js and creating a declaration file to define the type of elements in program.js. This method only provides type information for other files using program.js, but it does not prevent errors within program.js.

It's important to note that declaration files primarily offer type information for code in .js files rather than .ts files.

Tips on adding TypeScript annotations to an already existing global function

Answer №1

Similar questions

Avoiding type errors in d3 v5 axis by using Typescript

Error detected in JSON syntax... Where is it hiding?

Issue with Material UI Table not refreshing correctly after new data is added

Phonegap: Displaying audio controls and metadata for my audio stream on the lock screen and in the drop-down status bar

What is the process of generating enum values using ES6 in Node.js?

JQuery Slider's Hidden Feature: Functioning Perfectly Despite Being Invisible

The reason behind the error message stating that the argument AwsService at index [1] is available in the TestModule context

The Ajax Get Request functions properly when called in a browser, but returns a 302 error when executed within an iframe. What might be causing this discrepancy?

Interactive Google Maps using Autocomplete Search Bar

I discovered an issue in Handsontable while trying to copy and paste a numeric value in German format

You are unable to assign mutations in Vuex

Transform form data from square notation to dot notation using jQuery

JavaScript and jQuery syntax are essential for web development. Understanding how

AngularJS implemented to trigger a popup alert after a certain duration of time has elapsed since the

What is the process of determining if two tuples are equal in Typescript?

Is it possible to customize the color of the modal backdrop in layer v4 of the Material-UI library

What is the best way to implement a day timer feature using JavaScript?

Tips for transferring data from the Item of a repeater to a JavaScript file through a Button click event for use in Ajax operations

The lightbox feature on the page is not functioning properly

Getting the error message "t is not a function. (In 't(i,c)', 't' is an instance of Object)" while attempting to switch from using createStore to configureStore with React Redux Toolkit