How to create and use custom classes in Ionic2/typescript

Question

I am new to OOP and typescript. I am working on Ionic2 project.

I have a page list

list
- list.html
- list.ts
- list.scss

I have create a new class/.ts file in same folder

export class TestClass{
    constructor(){
        console.log("I am test class");
    }
}

then In list.ts I use

import { Component,ViewChild,ElementRef,Renderer2 } from '@angular/core';
import { NavController, NavParams,Platform,Content } from 'ionic-angular';

import {TestClass} from 'test.ts';

declare var Phaser:any;

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {

  testClass:any = new TestClass();

  constructor(public navCtrl: NavController, public navParams: NavParams, private _platform:Platform) {


  };
};//end class

this give me error Cannot find module "test.ts"

How can i import my custom class in Ionic2 page?

Please help.

First rule of TypeScript: It does not add OOP to JavaScript. Rather, it adds a powerful structural type system for expressing the shapes of apis. The type system in TS is more functional than OO in most respects. — Aluan Haddad
– Aluan Haddad, Commented May 4, 2017 at 6:58
Also this code: testClass: any = new TestClass(); is insane. — Aluan Haddad
– Aluan Haddad, Commented May 4, 2017 at 7:00
Dear @AluanHaddad, I dont have much OOP exposure, I just try to use this link stackoverflow.com/questions/32847337/… — raju
– raju, Commented May 4, 2017 at 7:04
My point is that TypeScript is not about OOP, it is about typing all paradigms present in JS. Also please, please never write testClass: any = new TestClass();. Write testClass = new TestClass(); instead, otherwise you might as well not use TypeScript. — Aluan Haddad
– Aluan Haddad, Commented May 4, 2017 at 7:05
In typescript, remember to always include external files/modules using ./ if they are in the same folder of the file you are including them from. Not using ./ means to ask to node.js to resolve the module in node_modules, which is the folder where node modules are actually stored. This rule applies to every single javascript project really, but in your case (and in Ionic2) it's pretty important. — briosheje
– briosheje, Commented May 4, 2017 at 7:32

Script47 · Accepted Answer · 2018-06-24 12:16:08Z

3

First remove the back ticks `. Second create a file in the same folder named test.ts. Third paste the code export class TestClass... Finally import {TestClass} from './test'; using ./

edited Jun 24, 2018 at 12:16

Script47

14.6k4 gold badges49 silver badges69 bronze badges

answered May 4, 2017 at 6:18

Leonardo Venoso

1,24212 silver badges15 bronze badges

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

4 Comments

Suraj Rao Over a year ago

actually you dont need the '.ts' extension either

Leonardo Venoso Over a year ago

If I don't add ./ the IntelliSense of Visual Studio Code marks the import as an error..

raju Over a year ago

Back ticks are pasted just by mistake, not part of original file, & file name is test.ts, it is in same folder as list.ts. I have edited in the question. But still getting same error.

Leonardo Venoso Over a year ago

Did you remove the extension .ts?

Collectives™ on Stack Overflow

How to create and use custom classes in Ionic2/typescript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related