Why are my typescript interfaces being compiled to javascript?

Question

As I understand it, interfaces are only relevant in Typescript and the tsc compiler should be smart enough not to convert them to JS files in the final output. When I compile my code the interfaces are being compiled with it. Why is this?

My simplified project structure

src/
  index.ts
  lib/
    EventClient.ts
  interfaces/
    EventClientConfig.ts

What it compiles to

dist/
  index.js
  lib/
    EventClient.js
  interfaces/
    EventClientConfig.js

My tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./dist",
    "lib": ["ES6", "DOM"],
    "target": "ES2018",
    "module": "CommonJS",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "removeComments": true,
    "strict": true,
    "typeRoots": ["./node_modules/@types"],
    "rootDir": "./src",
    "types": [
      "node",
      "jest-fetch-mock",
      "express",
      "reflect-metadata"
    ]
  },
  "include": ["src"],
  "exclude": ["dist", "node_modules", "**/*spec.ts"]
}

An interface

export interface EventClientConfig {
  endpoint: string;
  authToken: string;
}

How I'm using the interface

import { EventClientConfig } from '../interfaces/EventClientConfig';

const config: EventClientConfig = {
  endpoint: '/api',
  authToken: '123456'
}

What the interface is compiled to

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

In the compiled code EventClient.js makes no actual reference to the EventClientConfig.js so it's definitely not required. Why is Typescript compiling the interface files to JS?

If you don't like this behavior you can use a declaration file.d.ts. Also, don't confuse a module with something it exports. — Aluan Haddad
– Aluan Haddad, Commented May 8, 2020 at 15:01
@AluanHaddad that solves problem. I renamed all the interface files so that they had a .d.ts suffix and they're no longer in the compiled directory. Thanks! — punkrockbuddyholly
– punkrockbuddyholly, Commented May 8, 2020 at 15:10

punkrockbuddyholly · Accepted Answer · 2020-05-08 15:11:43Z

6

This was solved thanks to @AluanHaddad who suggested using .d.ts declaration files. I have changed all my interface filenames so that they end with .d.ts and they are no longer included in the output.

answered May 8, 2020 at 15:11

punkrockbuddyholly

9,8147 gold badges41 silver badges72 bronze badges

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

2 Comments

Alberto S. Over a year ago

is there any problem with the files being compiled to JS. If the ts file only contain types, it wont be used in runtime

punkrockbuddyholly Over a year ago

@AlbertoS. it would unnecessarily bloat the bundle.

cvekaso · Accepted Answer · 2020-05-08 14:57:47Z

4

The answer to your questions is here modules

In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

answered May 8, 2020 at 14:57

cvekaso

8631 gold badge11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Why are my typescript interfaces being compiled to javascript?

My simplified project structure

What it compiles to

My tsconfig.json

An interface

How I'm using the interface

What the interface is compiled to

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My simplified project structure

What it compiles to

My tsconfig.json

An interface

How I'm using the interface

What the interface is compiled to

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related