Can you create a class before exporting it in typescript/angular? | TSLint: unused expression, expected an assignment or function call

Question

I come from the react world - I'm pretty familiar with the basic concepts of starting an app through an index.js and not having to deal with any html or anything. Within those javascript files that define views, they're all made available to each other via import and export , where export default means the default import will be that object, and just export allows for the possibility of importing multiple objects from the same file.

With all of that said, is everything that different in angular?

While I was trying to learn it, I tried to do something simple and create a logging class, which has got to be simple enough, right. So it looks like this, and this is how I would have written it in React:

import {Injectable} from '@angular/core';

@Injectable()
class LoggerService {
  info(msg: any) {
    console.log(msg);
  }

  warn(msg: any) {
    console.warn(msg);
  }

  error(msg: any) {
    console.error(msg);
  }
}

export LoggerService;

However, when I do that my TSLint kicks in and warns me about

TSLint: unused expression, expected an assignment or function call...

on the last line. Can I not create classes before exporting them?

I know that every tutorial I've seen includes everything inside the export class, which I'm not used to (and so that's why I was trying to do it the other way) but if that's just Angular best practice then so be it.

TLDR why am i getting an error with the above code

Answer 1

It's not about the framework, but about the TypeScript vs JavaScript. I guess you've used JavaScript modules when working with React. In Typescript the syntax is a bit different. To write what you want in typescript...

class LoggerService {
 // ...
}
export { LoggerService };

You can read more about TypeScript's modules .