How can I convert an object constructor from javascript to work in typescript?

Question

I am learning TypeScript by converting a vanilla JS toto list project to React + TypeScript.

In my old code, I had an object constructor Project that worked just fine:

function Project(title) {
  this.title = title;
  this.tasks = {};
}

As I try to implement this same constructor in TypeScript it seems like TS doesn't like my use of the word this. It underlines both this statements in red and hovering over it gives me the error:

'this' implicitly has type 'any' because it does not have a type annotation.

I tried adding types to it like so:

this.title: string = title;
title: string = title;

Both give me the error:

'string' only refers to a type, but is being used as a value here.

My main question is how would I write this same object constructor to work in TypeScript? What am I doing wrong with this? I have tried googling the problem but I don't see anything about this issue specifically on stack overflow or the typescript docs.

It looks like you can still make classes in typescript but I have tried to avoid them since 1) They aren't "real" in javascript, just syntactical sugar, and 2) I'd like to learn how to implement object constructors in TypeScript out of sheer intellectual curiosity, if possible.

I'm honestly not sure how to get typescript to run in a JS fiddle but I will see what I can do. — manski
– manski, Commented Feb 3, 2023 at 16:03
have a read in here - stackoverflow.com/questions/61867798/… — andy mccullough
– andy mccullough, Commented Feb 3, 2023 at 16:03
I was talking about js minimal reproducible example then what you tried in ts — depperm
– depperm, Commented Feb 3, 2023 at 16:07

Simeon Gavalyugov · Accepted Answer · 2023-02-03 16:36:50Z

2

https://www.typescriptlang.org/docs/handbook/2/classes.html#this-parameters

In a method or function definition, an initial parameter named this has special meaning in TypeScript. These parameters are erased during compilation:

// TypeScript input with 'this' parameter
function fn(this: SomeType, x: number) {
  /* ... */
}

answered Feb 3, 2023 at 16:36

Simeon Gavalyugov

3311 silver badge3 bronze badges

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

Comments

Tachibana Shin · Accepted Answer · 2023-02-03 16:11:32Z

1

use class to solve the problem:

class Project {
  tasks: Record<string, unknown> = {}
  
  constructor(public title: string) {

  }
}

answered Feb 3, 2023 at 16:11

Tachibana Shin

4,0561 gold badge11 silver badges15 bronze badges

3 Comments

manski Over a year ago

Thank you I appreciate it but as per my question I was also asking if it were possible to solve this without using class. Just honestly curious.

Tachibana Shin Over a year ago

@manski it is possible but why don't you want to use class in my experience it is about several times faster than using function and this

manski Over a year ago

honestly just intellectual curiosity. I have my answer though, I went ahead and just committed to using class.

Collectives™ on Stack Overflow

How can I convert an object constructor from javascript to work in typescript?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related