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

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Guide: How to include a date value within a JSON format? [See code snippet below]

Highlight all the written content within the text box

Another approach to utilize JavaScript for populating content into a <div> container?

The jQuery functionality is not functioning properly within the aspx file

Is there a way for me to move the dot icon along the dotline?

Is there a way to correct Typescript's misunderstanding of the interface from a JSON file that has been imported?

Modify button behavior on click after the initial press

Using an alias to call a function defined in a separate module in TypeScript

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

Is there a way to compel Google Maps to load within my Angular application by implementing an Angular Directive?

Combining arrays of objects sharing a common key yet varying in structure

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

What are some methods to troubleshoot $injector type errors in TypeScript?

Tips on dynamically translating resources using ngx-translate

Presenting JSON information in a concise and visually appealing manner

Divide a string into smaller sections beginning at " ] " and concluding with "As"

What are the steps to resolve the issue "Error: no valid exports main found" specifically on a Windows 7 operating system?

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)