Typescript declarations for javascript file

Question

I'm using a project mixed with both javascript and typescript. Declaration files for modules can be easily created using - declare module. But how do I create a declaration for a javascript file in my current folder?

For ex -

player.js -
var Player = function() {};
Player.prototype.validate = function() {};

How do I create declaration so that I can extend it in typescript. I want to do something like this -

player.ts -
let Player = require('./player');
Player.prototype.login = function() {
    this.validate();
}

I know the above code will work by setting Player type as any but I won't be able to type check.

Romain Deneau · Accepted Answer · 2017-10-01 11:50:06Z

1

TypeScript does not understand the prototypal syntax / constructor functions: there will be no intellisense. It prefers ES6 classes.

The JavaScript Player constructor function is equivalent to this TypeScript class definition:

// -- player.d.ts --
declare class Player {
  validate(): void;
}

Then, to add a method to the Player class, there's a couple of options:

The more TypeScript idiomatic ways: class inheritance or class composition
A compromise to keep using the prototypal syntax in TypeScript and still get the intellisense: facade interface

Code examples:

// -- authenticated-player.ts --
import { Player } from './player'; 

// Option #1a: class inheritance
class AuthenticablePlayer extends Player {
  login() {
    this.validate();
  }
}

const p1a = new AuthenticablePlayer();
p1a.login();

// Option #1b: class composition + delegation
class AuthenticablePlayerB {
  private player = new Player(); 

  login() {
    this.validate();
  }

  validate() {
    this.player.validate();
  }
}

const p1b = new AuthenticablePlayerB();
p1b.login();

--

// Option #2: prototype extension + facade interface + type assertion
const Player: any = require('./player');

Player.prototype.login = function() {
  this.validate();
}

interface IPlayer {
  login(): void;
  validate(): void;
}

function createPlayer(): IPlayer {
  return new Player();
}

const p2 = createPlayer();
p2.login();

edited Oct 1, 2017 at 11:50

answered Sep 30, 2017 at 15:51

Romain Deneau

3,08116 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Romain Deneau Over a year ago

For more details on the difference between declare class and interface, see stackoverflow.com/a/14348084/1704166

Nishant Over a year ago

was hoping there was a way to add to current class without extending it. But I guess I'll have to extend.

Sabbir Rahman · Accepted Answer · 2017-09-30 05:02:45Z

0

You can create interface in your TypeScript file and set that as the type for Player.

interface IPlayer {
  validate();
}

let Player: IPlayer = require('./player');

Player.prototype.login = function() {
    this.validate();
}

answered Sep 30, 2017 at 5:02

Sabbir Rahman

1,1892 gold badges13 silver badges17 bronze badges

1 Comment

Nishant Over a year ago

error TS2339: Property 'prototype' does not exist on type 'IUser'.

Kokodoko · Accepted Answer · 2017-09-30 09:14:22Z

0

To expand on Sabbir's answer here (not enough room in comments)

interface IPlayer { 
  validate(): void
  login():void
}

old js code

var Player = function () { }
Player.prototype.validate = function() {}

using in ts project

// import / require here, left out for brevity
Player.prototype.login = function() {
    this.validate()
}

create a player - login and validate now have auto completion

let p: IPlayer = new Player()
p.login()
p.validate()

answered Sep 30, 2017 at 9:14

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

3 Comments

Nishant Over a year ago

but auto completion won't work inside the player function

Kokodoko Over a year ago

I don't know your exact project use case but personally I would prefer to create a Typescript Class and copy the JS methods over. Then you will get full code completion. Check the edit

Nishant Over a year ago

It's a really big class and I don't want to mix javascript and typescript code.

Collectives™ on Stack Overflow

Typescript declarations for javascript file

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related