TypeScript TV

The Ultimate Fix-it List:

TS1002
TS1005
TS1006
TS1015
TS1016
TS1029
TS1035
TS1036
TS1038
TS1039
TS1046
TS1054
TS1055
TS1056
TS1064
TS1066
TS1068
TS1070
TS1095
TS1099
TS1103
TS1107
TS1109
TS1117
TS1121
TS1127
TS1128
TS1149
TS1155
TS1160
TS6133
TS1163
TS1175
TS1183
TS1192
TS1196
TS1202
TS1208
TS1218
TS1219
TS1225
TS1228
TS1232
TS1240
TS1241
TS1243
TS1244
TS1245
TS1247
TS1248
TS1254
TS1259
TS1267
TS1273
TS1274
TS1280
TS1294
TS1308
TS1309
TS1323
TS1337
TS1341
TS1345
TS1354
TS1355
TS1357
TS1361
TS1363
TS1368
TS1371
TS1375
TS1378
TS1385
TS1389
TS1431
TS1432
TS1434
TS1450
TS1470
TS1471
TS1479
TS1484
TS2300
TS2304
TS2305
TS2306
TS2307
TS2314
TS2315
TS2318
TS2322
TS2335
TS2339
TS2341
TS2344
TS2345
TS2348
TS2349
TS2350
TS2351
TS2352
TS2353
TS2355
TS2361
TS2362
TS2364
TS2365
TS2366
TS2367
TS2368
TS2369
TS2370
TS2371
TS2372
TS2377
TS2378
TS2383
TS2389
TS2390
TS2391
TS2393
TS2394
TS2395
TS2397
TS2403
TS2411
TS2415
TS2416
TS2420
TS2425
TS2428
TS2430
TS2440
TS2445
TS2448
TS2451
TS2454
TS2456
TS2459
TS2475
TS2476
TS2488
TS2491
TS2497
TS2498
TS2503
TS2504
TS2507
TS2511
TS2512
TS2515
TS2528
TS2531
TS2532
TS2533
TS2536
TS2537
TS2538
TS2539
TS2540
TS2550
TS2551
TS2552
TS2554
TS2556
TS2558
TS2559
TS2561
TS2564
TS2567
TS2571
TS2574
TS2577
TS2578
TS2580
TS2582
TS2583
TS2584
TS2588
TS2589
TS2595
TS2604
TS2611
TS2612
TS2613
TS2614
TS2616
TS2617
TS2632
TS2636
TS2637
TS2638
TS2652
TS2654
TS2656
TS2661
TS2663
TS2664
TS2665
TS2668
TS2669
TS2674
TS2677
TS2678
TS2680
TS2683
TS2684
TS2686
TS2687
TS2688
TS2689
TS2691
TS2693
TS2694
TS2695
TS2705
TS2706
TS2707
TS2709
TS2713
TS2715
TS2717
TS2720
TS2722
TS2724
TS2730
TS2732
TS2739
TS2740
TS2741
TS2742
TS2749
TS2769
TS2774
TS2779
TS2786
TS2790
TS2792
TS2794
TS2802
TS2809
TS2813
TS2814
TS2820
TS2821
TS2823
TS2834
TS2835
TS2845
TS2855
TS2880
TS4010
TS4020
TS4023
TS4025
TS4031
TS4055
TS4060
TS4063
TS4075
TS4081
TS4104
TS4111
TS4112
TS4113
TS4114
TS4115
TS5023
TS5024
TS5025
TS5042
TS5054
TS5055
TS5058
TS5069
TS5070
TS5083
TS5087
TS5093
TS5095
TS5097
TS5101
TS5110
TS6053
TS6059
TS6133
TS6138
TS6192
TS6196
TS6198
TS6205
TS6234
TS6385
TS6387
TS6504
TS7005
TS7006
TS7008
TS7009
TS7010
TS7015
TS7016
TS7017
TS7022
TS7023
TS7026
TS7027
TS7029
TS7030
TS7031
TS7034
TS7038
TS7041
TS7044
TS7053
TS8020
TS17000
TS17004
TS17008
TS17009
TS17019
TS18003
TS18004
TS18016
TS18026
TS18028
TS18046
TS18047
TS18048
TS18049
TS18052
TS71002
TS80001
TS80005

TS1002

Unterminated string literal.

Broken Code ❌

const text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Fixed Code ✔️

You have to close the string literal with an ending ':

const text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr';

If you want to support multiline text, then you would have to use string concatenation:

const text =
  'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ' +
  'sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.';

Another solution would be using a template literal:

const text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`;

TS1005

'=' expected.

Broken Code ❌

type Person {
  age: number;
  name: string;
}

Fixed Code ✔️

You need to assign your type declaration using the = character:

type Person = {
  age: number;
  name: string;
};

Alternatively, you can declare an interface:

interface Person {
  age: number;
  name: string;
}

';' expected.

Broken Code ❌

export function getNumbers(names: string[]) {
  return names.map(name => {[name]: parseInt(name)});
}

Fixed Code ✔️

When using an arrow function expression, you can implicitly return values by wrapping the object literal in parentheses:

export function getNumbers(names: string[]) {
  return names.map((name) => ({ [name]: parseInt(name) }));
}

TS1006

A file cannot have a reference to itself.

Broken Code ❌

index.d.ts

/// <reference path='index.d.ts' />

Fixed Code ✔️

You cannot reference a file to itself (causes recursive loop). To fix the problem you have to update the reference path to point to another declaration file:

index.d.ts

/// <reference path='some-other-file.d.ts' />

TS1015

Parameter cannot have question mark and initializer.

Broken Code ❌

export function getName(firstName: string, lastName?: string = 'Doe'): string {
  return `${firstName} ${lastName}`;
}

Fixed Code ✔️

export function getName(firstName: string, lastName: string = 'Doe'): string {
  return `${firstName} ${lastName}`;
}

TS1016

A required parameter cannot follow an optional parameter.

Broken Code ❌

function createUser(firstName: string, lastName: string, middleName?: string, age: number) {
  // ...
}

Fixed Code ✔️

The easiest way to fix the error is to make age optional as well:

function createUser(firstName: string, lastName: string, middleName?: string, age?: number) {
  // ...
}

Alternatively, you can flip the order of middleName and age. Be aware that this breaks the contract (signature) of the function and is considered a "breaking change":

function createUser(firstName: string, lastName: string, age: number, middleName?: string) {
  // ...
}

You could also make middleName non-optional:

function createUser(firstName: string, lastName: string, middleName: string, age?: number) {
  // ...
}

Yet another solution would be to assign a default value to middleName so it won't be optional by default. This allows age to be optional then:

function createUser(firstName: string, lastName: string, middleName: string = '', age?: number) {
  // ...
}

TS1029

'public' modifier must precede 'abstract' modifier.

Broken Code ❌

abstract class Animal {
  public abstract makeNoise(): string;
}

Fixed Code ✔️

They keywords public, private, and protected define the access to a class member. Access modifiers have to be defined first in TypeScript.

Solution 1:

abstract class Animal {
  public abstract makeNoise(): string;
}

Solution 2:

The visibility is public by default, so you don't have to explicitly declare it:

abstract class Animal {
  abstract makeNoise(): string;
}

Video Tutorial

TS1035

Only ambient modules can use quoted names.

Broken Code ❌

module 'global' {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

Fixed Code ✔️

To turn a module into an ambient module, you have to prefix it with the declare keyword:

declare module 'global' {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

TS1036

Statements are not allowed in ambient contexts.

Broken Code ❌

import { APIClient } from '../../APIClient';
 
declare global {
  client: APIClient;
}

Fixed Code ✔️

With declare global an ambient context is created. TypeScript does not allow statements in such ambient context declaration which is why we have to change the statement into a declaration:

declare global {
  function client(): APIClient;
}

If you don't want client to be a function, you have to use the var` keyword:

declare global {
  var client: APIClient;
}

TS1038

A 'declare' modifier cannot be used in an already ambient context.

Broken Code ❌

declare global {
  declare var REST_URL: string;
}

Fixed Code ✔️

declare global {
  var REST_URL: string;
}

TS1039

Initializers are not allowed in ambient contexts.

Broken Code ❌

index.d.ts

declare module hexo {
  var config = {};
}

Fixed Code ✔️

Within a declaration file (ambient context), you should define types instead of implementing code. Consequently, you'll need to replace the initialization with a type annotation:

index.d.ts

declare module hexo {
  var config: {};
}

TS1046

Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.

Broken Code ❌

index.d.ts

const MAGIC_NUMBER = 1337;

Fixed Code ✔️

If you want to export a constant from a definition file (d.ts), then you have to use the export modifier:

index.d.ts

export const MAGIC_NUMBER = 1337;

TS1054

TS1054: A get accessor cannot have parameters.

Broken Code ❌

get isLong(input: string) {
  return this.config.orderPosition === ExchangeOrderPosition.LONG;
}

Solution:

To fix this issue, you need to convert the get accessor to a regular method since TypeScript does not allow parameters for getters. This change allows the method to accept arguments as required.

Fixed Code ✔️

isLong(input: string): boolean {
  return this.config.orderPosition === ExchangeOrderPosition.LONG;
}

TS1055

Type 'AxiosPromise' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

Broken Code ❌

export const sendRequestWithCookie = async (
  client: HttpClient,
  config: AxiosRequestConfig,
  engine: CRUDEngine
): AxiosPromise => {
  const cookie: Cookie = await loadExistingCookie(engine);
 
  if (!cookie.isExpired) {
    config.headers = config.headers || {};
    config.headers['Cookie'] = `zuid=${cookie.zuid}`;
    config.withCredentials = true;
  }
 
  return client._sendRequest(config);
};

Fixed Code ✔️

export const sendRequestWithCookie = (
  client: HttpClient,
  config: AxiosRequestConfig,
  engine: CRUDEngine
): AxiosPromise => {
  return loadExistingCookie(engine).then((cookie: Cookie) => {
    if (!cookie.isExpired) {
      config.headers = config.headers || {};
      config.headers['Cookie'] = `zuid=${cookie.zuid}`;
      config.withCredentials = true;
    }
 
    return client._sendRequest(config);
  });
};

TS1056

Accessors are only available when targeting ECMAScript 5 and higher.

Broken Code ❌

User.ts

class User {
  constructor(
    private firstName: string,
    private lastName: string
  ) {}
 
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es3"
  }
}

Fixed Code ✔️

Set the "target" property in your "tsconfig.json" file to "es5" or higher:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5"
  }
}

TS1064

The return type of an async function or method must be the global Promise type. Did you mean to write 'Promise '?

Broken Code ❌

async function myFunction(): string {
  return 'test';
}

Fixed Code ✔️

If your function is asynchronous, your return value must be wrapped with Promise<...>:

async function myFunction(): Promise<string> {
  return 'test';
}

TS1066

In ambient enum declarations member initializer must be constant expression.

Broken Code ❌

enum PreKeyAuth {
  INVALID = 'Invalid',
  UNKNOWN = 'Unknown',
  VALID = 'Valid',
}

Fixed Code ✔️

Try to replace your enum declaration with a type:

type PreKeyAuth = 'Invalid' | 'Unknown' | 'Valid';

TS1068

Unexpected token. A constructor, method, accessor, or property was expected.

Broken Code ❌

class User {
  constructor(private firstName: string, private lastName: string) {
  }
 
  function getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Fixed Code ✔️

Functions that are part of a class are being called "method". The method of a class is defined without the function keyword:

class User {
  constructor(
    private firstName: string,
    private lastName: string
  ) {}
 
  getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

TS1070

'private' modifier cannot appear on a type member.

Broken Code ❌

interface Animal {
  private name: string;
}

Fixed Code ✔️

Interfaces are structures that define the public contract. This prohibits you from using private modifiers. Only public and protected can be used. To solve the problem, the private keyword must be removed from the name property of the Animal interface:

interface Animal {
  name: string;
}

Video Tutorial

TS1095

A 'set' accessor cannot have a return type annotation.

Broken Code ❌

export class Person {
  private myName: string = 'unknown';
 
  get name(): string {
    return this.myName;
  }
 
  set name(newName: string): void {
    this.myName = newName;
  }
}

Fixed Code ✔️

You have to remove the return type from the "set" accessor:

export class Person {
  private myName: string = 'unknown';
 
  get name(): string {
    return this.myName;
  }
 
  set name(newName: string) {
    this.myName = newName;
  }
}

TS1099

Type argument list cannot be empty.

Broken Code ❌

const result = await response.json<>();

This error occurs because TypeScript does not allow empty type argument lists (<>).

Fixed Code ✔️

The method response.json() does not expect generic parameters to be provided. You don't need to provide any generic type parameters. Simply remove the empty type argument list (<>) from the method call:

const result = await response.json();

If you want to strongly type the result, you can cast it using as:

interface MyResponse {
  data: string;
}
 
const result = (await response.json()) as MyResponse;
console.log(result.data);

TS1103

'for await' loops are only allowed within async functions and at the top levels of modules.

Broken Code ❌

import fs from 'node:fs';
import readline from 'node:readline';
 
const inputStream = fs.createReadStream('file.csv');
 
function printLine(file: string): Promise<void> {
  const rl = readline.createInterface({
    input: inputStream,
    crlfDelay: Infinity,
  });
 
  for await (const line of rl) {
    console.log(line);
  }
}

Fixed Code ✔️

You have to mark your function with the async keyword:

import fs from 'node:fs';
import readline from 'node:readline';
 
const inputStream = fs.createReadStream('file.csv');
 
async function printLine(file: string): Promise<void> {
  const rl = readline.createInterface({
    input: inputStream,
    crlfDelay: Infinity,
  });
 
  for await (const line of rl) {
    console.log(line);
  }
}

TS1107

Jump target cannot cross function boundary.

Broken Code ❌

export async function fixFatalLooseObject(git: SimpleGit) {
  // ...
  if (!confirmedDeletion) {
    break;
  }
}

Solution:

Replace break with return to exit the function when the condition is met:

Fixed Code ✔️

export async function fixFatalLooseObject(git: SimpleGit) {
  // ...
  if (!confirmedDeletion) {
    return;
  }
}

TS1109

Expression expected.

Broken Code ❌

const lastName = throw new Error('Missing last name');

Fixed Code ✔️

Any snippet of code that evaluates to a value is an expression. Any snippet of code that performs an action is a statement. We need a statement to throw an error inside:

const lastName = undefined;
if (!lastName) {
  throw new Error('Missing last name');
}

TS1117

An object literal cannot have multiple properties with the same name in strict mode.

Broken Code ❌

const objectLiteral = {
  name: 'Benny',
  name: 'Sofia',
};

Fixed Code ✔️

We can only have one value per property:

const objectLiteral = {
  name: 'Benny',
};

TS1121

Octal literals are not allowed. Use the syntax '0o0'.

Broken Code ❌

new Money(200,00)

Solution:

Remove the extra zero to prevent the JavaScript interpreter from treating it as an octal literal.

Fixed Code ✔️

new Money(200, 0);

TS1127

Invalid character.

Broken Code ❌

# My comment

Fixed Code ✔️

Unlike in Python, inline comments cannot begin with a single hash sign (#) in TypeScript. You must use 2 slashes:

// My comment

TS1128

Declaration or statement expected.

Broken Code ❌

Fixed Code ✔️

A declaration specifies the data and a statement specifies some action with that data:

// Declaration
let MY_NUMBER = 1;
// Statement
MY_NUMBER = MY_NUMBER + 1;

TS1149

File name differs from already included file name only in casing.

Broken Code ❌

This error occurs when you import the same file in two different files using two different casing styles (ex. camelCase and UpperCamelCase):

File A:

import { BaseTestPage } from './baseTestPage';

File B:

import { BaseTestPage } from './BaseTestPage';

Fixed Code ✔️

The error can be fixed by using the same casing style:

File A:

import { BaseTestPage } from './BaseTestPage';

File B:

import { BaseTestPage } from './BaseTestPage';

Alternatively, you can set forceConsistentCasingInFileNames to false in your "tsconfig.json" file:

tsconfig.json

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": false
  }
}

TS1155

'const' declarations must be initialized.

Broken Code ❌

const name: string;

Fixed Code ✔️

const name: string = 'Benny';

Alternatively you can define a block-scoped local variable:

let name: string;

TS1160

Unterminated template literal.

Broken Code ❌

const text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Fixed Code ✔️

This error is similar to TS1002 but refers to the ending of a template literal. To fix it, we have to close the template literal with an ending `:

const text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`;

TS6133

Unterminated regular expression literal.

Broken Code ❌

filter: path => /^\/blog\/g.test(path)

Solution:

Correct the regular expression by removing the unnecessary escape before the 'g' flag.

Fixed Code ✔️

filter: (path) => /^\/blog/g.test(path);

TS1163

A 'yield' expression is only allowed in a generator body.

Broken Code ❌

function* iterateAlphabet() {
  const alphabet = Array.from({ length: 26 }, (_value, index) => String.fromCharCode(index + 65));
 
  for (const char of alphabet) {
    yield char;
  }
}
 
const alphabetGenerator = iterateAlphabet();
 
for (const char of alphabetGenerator) {
  console.log(yield char);
}

Fixed Code ✔️

You have to remove the yield keyword from the for-of loop:

function* iterateAlphabet() {
  const alphabet = Array.from({ length: 26 }, (_value, index) => String.fromCharCode(index + 65));
 
  for (const char of alphabet) {
    yield char;
  }
}
 
const alphabetGenerator = iterateAlphabet();
 
for (const char of alphabetGenerator) {
  console.log(char);
}

Broken Code ❌

async fetchData(address: string, ticker: string) {
  let cursor: number | undefined = 0;
  while (cursor) {
    const query = new URLSearchParams({
      cursor: `${cursor}`,
      ticker,
      limit: '50'
    })
    const response = await fetch(url);
    const payload = await response.json();
    const parsed = ResponseSchema.parse(payload);
    for (const result of parsed.results) {
      yield result;
    }
    parsed.next_url ? (url = new URL(parsed.next_url)) : (url = undefined);
  }
}

Solution:

Add the * symbol to define the function as a generator-async function, allowing yield within its body.

Fixed Code ✔️

async *fetchData(address: string, ticker: string) {
  let cursor: number | undefined = 0;
  while (cursor) {
    const query = new URLSearchParams({
      cursor: `${cursor}`,
      ticker,
      limit: '50'
    })
    const response = await fetch(url);
    const payload = await response.json();
    const parsed = ResponseSchema.parse(payload);
    for (const result of parsed.results) {
      yield result;
    }
    parsed.next_url ? (url = new URL(parsed.next_url)) : (url = undefined);
  }
}

TS1175

'implements' clause already seen.

Broken Code ❌

interface Calculator {
  (x: number, y: number): number;
}
 
interface ExtendedCalculator extends Calculator {
  squareRoot(x: number): number;
}
 
class AdvancedCalculator implements ExtendedCalculator implements Calculator {
  // class implementation
}

Solution:

Remove the redundant implements Calculator since ExtendedCalculator already extends Calculator.

Fixed Code ✔️

interface Calculator {
  (x: number, y: number): number;
}
 
interface ExtendedCalculator extends Calculator {
  squareRoot(x: number): number;
}
 
class AdvancedCalculator implements ExtendedCalculator {
  // class implementation
}

TS1183

An implementation cannot be declared in ambient contexts.

Broken Code ❌

index.d.ts

export function logSomething(error: unknown): void {
  console.log('something');
}

Fixed Code ✔️

You cannot write a function implementation inside a declaration file (*.d.ts). You can only declare its signature:

index.d.ts

export function logSomething(error: unknown): void;

Alternatively, you can write your function implementation inside a source code file (*.ts).

TS1192

Module 'json5' has no default export.

Broken Code ❌

import json5 from 'json5';

Fixed Code ✔️

When you are importing a module with built-in TypeScript declarations and TypeScript tells you that this module does not have a default export, then you can solve this problem by adding "allowSyntheticDefaultImports" to your "tsconfig.json" file and setting it to true:

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

Module '.../logdown' has no default export.

Broken Code ❌

declare class Logdown {
  // ...
}
 
export = Logdown;

Fixed Code ✔️

declare class Logdown {
  // ...
}
 
export default Logdown;

'export *' does not re-export a default.

Broken Code ❌

export * from './parseUrls';
export * from './runWhenReady';

You have to re-export a default (in this case coming from runWhenReady.ts):

Fixed Code ✔️

export * from './parseUrls';
export * from './runWhenReady';
export { default as default } from './runWhenReady';

TS1196

Catch clause variable type annotation must be 'any' or 'unknown' if specified.

Broken Code ❌

type MyError = {
  code: number;
};
 
try {
  // ...
} catch (error: MyError) {
  console.log(error.code);
}

Fixed Code ✔️

Errors in catch clauses can only be typed with any or unknown. If you need a more precise error typing, you can use a type guard as follows:

// Type Guard
function isMyError(error: any): error is MyError {
  return typeof error.code === 'number';
}
 
type MyError = {
  code: number;
};
 
try {
  // ...
} catch (error: unknown) {
  if (isMyError(error)) {
    console.log(error.code);
  }
}

Video Tutorial

TS1202

Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Broken Code ❌

import sinon = require('sinon');

Fixed Code ✔️

import * as sinon from 'sinon';

TS1208

'index.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

Broken Code ❌

tsconfig.json

{
  "compilerOptions": {
    "isolatedModules": true
  }
}

index.ts

require(`dotenv-defaults`).config({
  path: '.env',
});

Fixed Code ✔️

To solve the issue you can turn off "isolatedModules" in your "tsconfig.json". If you want to keep going with isolated modules, then you have to add an import or export to your code:

index.ts

require(`dotenv-defaults`).config({
  path: '.env',
});
 
export default {};

TS1218

Export assignment is not supported when '--module' flag is 'system'.

Broken Code ❌

class LRUCache {
  // ...
}
 
export = LRUCache;

Fixed Code ✔️

export class LRUCache {
  // ...
}

TS1219

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

Broken Code ❌

import { Injectable } from '@nestjs/common';
 
@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

Fixed Code ✔️

Simply set "experimentalDecorators" to true in your "tsconfig.json" file. As long as decorators are experimental you will also have to install the reflect-metadata package to shim the upcoming Metadata Reflection API for ECMAScript. For proper functionality the "emitDecoratorMetadata" option should also be set to true.

TS1225

Cannot find parameter 'error'.

Broken Code ❌

const isError = (): input is Error => {
  return input instanceof Error;
};

Fixed Code ✔️

A type predicate needs a parameter to validate:

const isError = (input: unknown): input is Error => {
  return input instanceof Error;
};

TS1228

A type predicate is only allowed in return type position for functions and methods.

Broken Code ❌

function hasErrorCode(error: any) error is {code: string} {
  return typeof (error && error.code) === 'string'
}

Fixed Code ✔️

You have to separate the argument list from the return type definition by a ::

function hasErrorCode(error: any): error is { code: string } {
  return typeof (error && error.code) === 'string';
}

TS1232

An import declaration can only be used at the top level of a namespace or module.

Broken Code ❌

export function dumpPayload() {
  const payload = {};
  import { writeFileSync } from 'fs';
  writeFileSync(`dump-${Date.now()}.json`, JSON.stringify(payload));
}

Fixed Code ✔️

import { writeFileSync } from 'fs';
 
export function dumpPayload() {
  const payload = {};
  writeFileSync(`dump-${Date.now()}.json`, JSON.stringify(payload));
}

TS1240

Unable to resolve signature of property decorator when called as an expression. The runtime will invoke the decorator with 2 arguments, but the decorator expects 3.

Broken Code ❌

function CatchError() {
  return function (target: any, _propertyKey: string | symbol, _descriptor: PropertyDescriptor) {
    function replacementMethod(this: any, ...args: any[]) {
      try {
        return target.apply(this, ...args);
      } catch (error) {
        console.error('Yikes', error);
      }
    }
 
    return replacementMethod();
  };
}
 
class Example {
  @CatchError()
  function doSomething() {
    throw new Error('I am failing!');
  }
}
 
const example = new Example();
example.doSomething();

The problem is that the CatchError decorator is defined as a method decorator but is being used as a property decorator.

Fixed Code ✔️

To fix this issue, turn the method into a property by removing the function keyword:

function CatchError() {
  return function (target: any, _propertyKey: string | symbol, _descriptor: PropertyDescriptor) {
    function replacementMethod(this: any, ...args: any[]) {
      try {
        return target.apply(this, ...args);
      } catch (error) {
        console.error('Yikes', error);
      }
    }
 
    return replacementMethod();
  };
}
 
class Example {
  @CatchError()
  doSomething() {
    throw new Error('I am failing!');
  }
}
 
const example = new Example();
example.doSomething();

TS1241

Unable to resolve signature of method decorator when called as an expression.

Broken Code ❌

function CatchError(logMessage: string) {
  return function (_target: any, descriptor: PropertyDescriptor) {
    // Save a reference to the original method
    const originalMethod = descriptor.value;
 
    // Replace the method with a new function
    descriptor.value = function (...args: any[]) {
      try {
        return originalMethod.apply(this, args);
      } catch (error) {
        console.error(logMessage, error);
      }
    };
  };
}
 
class Example {
  @CatchError('Error occurred in doSomething')
  doSomething() {
    throw new Error('I am failing!');
  }
}
 
const example = new Example();
example.doSomething();

This code throws an error because the decorator CatchError is missing the correct signature for the PropertyDescriptor.

Fixed Code ✔️

To fix this issue, update the signature for the decorator to include the _propertyKey parameter:

function CatchError(logMessage: string) {
  return function (_target: any, _propertyKey: string | symbol, descriptor: PropertyDescriptor) {
    // Save a reference to the original method
    const originalMethod = descriptor.value;
 
    // Replace the method with a new function
    descriptor.value = function (...args: any[]) {
      try {
        return originalMethod.apply(this, args);
      } catch (error) {
        console.error(logMessage, error);
      }
    };
  };
}
 
class Example {
  @CatchError('Error occurred in doSomething')
  doSomething() {
    throw new Error('I am failing!');
  }
}
 
const example = new Example();
example.doSomething();

With this adjustment, the CatchError decorator now properly resolves the method signature, allowing you to catch and log errors as intended.

TS1243

'static' modifier cannot be used with 'abstract' modifier.

Broken Code ❌

abstract class CustomNumber {
  static abstract getNumber(): number;
}

You cannot define a function that is static and abstract. You have to keep it static:

Fixed Code ✔️

abstract class CustomNumber {
  static getNumber(): number {
    return 1337;
  }
}

'async' modifier cannot be used with 'abstract' modifier.

Broken Code ❌

abstract async goto(): Promise<void>;

Fixed Code ✔️

abstract goto(): Promise<void>;

TS1244

Abstract methods can only appear within an abstract class.

Broken Code ❌

class Animal {
  abstract makeNoise(): string;
}

Fixed Code ✔️

abstract class Animal {
  abstract makeNoise(): string;
}

TS1245

Method 'updates' cannot have an implementation because it is marked abstract.

Broken Code ❌

abstract class Base {
  abstract updates(): void {
    console.log('Updating...');
  }
}

This error occurs because an abstract method cannot have an implementation. Abstract methods must only define a method signature and must be implemented in derived classes.

Fixed Code ✔️

Remove the implementation in the abstract class and let derived classes implement the method:

abstract class Base {
  abstract updates(): void;
}
 
class Derived extends Base {
  updates(): void {
    console.log('Updating...');
  }
}
 
const derived = new Derived();
derived.updates();

TS1247

A type literal property cannot have an initializer.

Broken Code ❌

export function getName({name}: { name: string = 'Unknown' }) {
  return name;
}
 
console.log(getName(undefined));

Fixed Code ✔️

The getName function expects an object literal. However, in TypeScript, object literals are not allowed to have initializing functions or values. To work around this limitation and make use of an initializer, we can convert the object literal into a collective type:

export function getName(name: string = 'Unknown') {
  return name;
}
 
console.log(getName(undefined));

TS1248

A class member cannot have the 'const' keyword.

Broken Code ❌

class MyBaseClass {}
 
export class MyExtendedClass extends MyBaseClass {
  myConstant = '';
}

Fixed Code ✔️

When inheriting from a base class, you have to use modifiers like readonly if you want your class members to become constant:

class MyBaseClass {}
 
export class MyExtendedClass extends MyBaseClass {
  readonly myConstant = '';
}

TS1254

A 'const' initializer in an ambient context must be a string or numeric literal or literal enum reference.

Broken Code ❌

index.d.ts

declare module megalibrary {
  const MEGA_NUMBER = {};
}

Fixed Code ✔️

index.d.ts

declare module megalibrary {
  const MEGA_NUMBER = 1337;
}

TS1259

Module can only be default-imported using the 'esModuleInterop' flag

Broken Code ❌

main.ts

import api from 'api';

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

Fixed Code ✔️

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "lib": ["dom", "es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

Note: You can enable the 'esModuleInterop' flag also via the CLI:

tsc main.ts --esModuleInterop

TS1267

Property 'isStable' cannot have an initializer because it is marked abstract.

Broken Code ❌

abstract class Base {
  abstract isStable: boolean = true;
}

This error occurs because abstract properties in TypeScript cannot have initializers. Abstract properties only declare the type and must be implemented in derived classes.

Fixed Code ✔️

Remove the initializer from the abstract property and initialize it in the derived class:

abstract class Base {
  abstract isStable: boolean;
}
 
class Derived extends Base {
  isStable: boolean = true;
}
 
const derived = new Derived();
console.log(derived.isStable);

TS1273

'readonly' modifier cannot appear on a type parameter.

Broken Code ❌

function logValues<readonly T>(values: T[]) {
  console.log(values);
}

This error occurs because the readonly modifier is not allowed on a type parameter. Type parameters are meant to be used for generic types and should not have modifiers like readonly.

Fixed Code ✔️

You can apply readonly to the type of the array rather than the type parameter itself:

function logValues<T>(values: readonly T[]) {
  console.log(values);
}

In this fixed version, the array values is considered a read-only array, and its elements cannot be modified within the function. It is a good practice to avoid accidential modifications.

TS1274

'in' modifier can only appear on a type parameter of a class, interface or type alias.

Broken Code ❌

function getArrayElement<in out T>(array: T[], index: number): T {
  return array[index];
}

Solution:

Remove the in and out modifiers from the function type parameter.

Fixed Code ✔️

function getArrayElement<T>(array: T[], index: number): T {
  return array[index];
}

TS1280

Namespaces are not allowed in global script files when verbatimModuleSyntax is enabled. If this file is not intended to be a global script, set moduleDetection to force or add an empty export {} statement.

Broken Code ❌

module global {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

Fixed Code ✔️

Use a quotes around the name global and turn it into an ambient module by using the declare module syntax:

declare module 'global' {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

TS1294

This syntax is not allowed when 'erasableSyntaxOnly' is enabled.

Broken Code ❌

export enum CancelOrderPeriod {
  ONE_DAY = 'day',
  ONE_HOUR = 'hour',
  ONE_MINUTE = 'min',
}

Fixed Code ✔️

Erasable syntax refers to features that TypeScript introduces to the language but can be easily removed or "erased" during the compilation process to JavaScript.

Enums cannot be easily translated into JavaScript and are not allowed when the compiler flag erasableSyntaxOnly is enabled. Instead, you would need to use a readonly object to replicate an enumeration:

export const CancelOrderPeriod = {
  ONE_DAY: 'day',
  ONE_HOUR: 'hour',
  ONE_MINUTE: 'min',
} as const;

TS1308

'await' expressions are only allowed within async functions and at the top levels of modules.ts.

Broken Code ❌

React.useEffect(() => {
  const myPromise = Promise.resolve;
  await myPromise();
  console.log('Promise is resolved.');
}, []);

Fixed Code ✔️

You cannot use an await expression in an useEffect hook, but you can use legacy Promise calls:

React.useEffect(() => {
  const myPromise = Promise.resolve;
  myPromise().then(() => {
    console.log('Promise is resolved.');
  });
}, []);

Alternatively, you can use an IIFE (Immediately-invoked Function Expression) in your useEffect hook:

React.useEffect(() => {
  (async () => {
    await Promise.resolve();
  })();
}, []);

TS1309

TS1309: The current file is a CommonJS module and cannot use 'await' at the top level.

Broken Code ❌

const response = await youtube.playlistItems.list({
  part: ['snippet'],
  playlistId,
});

Solution:

This error occurs because top-level await is only supported in ECMAScript modules, not in CommonJS modules which are the default module system in Node.js unless specified otherwise.

To use top-level await, you need to configure your project to use ECMAScript modules by adding "type": "module" to your package.json. This tells Node.js to treat all code files as ECMAScript modules.

Fixed Code ✔️

{
  "name": "your-package-name",
  "version": "1.0.0",
  "type": "module"
}

Another Solution:

To work around the restriction of not using await at the top level in a CommonJS module, you can also encapsulate your asynchronous operations within an Immediately Invoked Function Expression (IIFE) that is async:

(async () => {
  const response = await youtube.playlistItems.list({
    part: ['snippet'],
    playlistId,
  });
 
  console.log(response.data.items);
})();

TS1323

Dynamic imports are only supported when the '--module' flag is set to 'es2020', 'es2022', 'esnext', 'commonjs', 'amd', 'system', 'umd', 'node16', or 'nodenext'.

Broken Code ❌

main.ts

import('trading-signals').then((tradingSignals) => {
  const { Big, SMA } = tradingSignals;
 
  const sma = new SMA(3);
});

tsconfig.json

{
  "compilerOptions": {
    "module": "es2015"
  }
}

Fixed Code ✔️

Dynamic imports are expressions that enable the loading of an ECMAScript module (ESM) into CommonJS modules (CJS).

The import() expression also allow modules to be loaded conditionally on demand. This feature was introduced with the ECMAScript® 2020 Language Specification.

If your project uses an older module system, remember to update the module setting in your TypeScript compiler settings.

main.ts

import('trading-signals').then((tradingSignals) => {
  const { Big, SMA } = tradingSignals;
 
  const sma = new SMA(3);
});

tsconfig.json

{
  "compilerOptions": {
    "module": "node16"
  }
}

TS1337

An index signature parameter type cannot be a literal type or generic type. Consider using a mapped object type instead.

Broken Code ❌

export interface StreetMap {
  [city: 'New York']: ['Broadway', 'Park Avenue'];
}

Fixed Code ✔️

export type StreetMap = {
  'New York': ['Broadway', 'Park Avenue'];
};

Alternative:

export interface StreetMap {
  [city: string]: ['Broadway', 'Park Avenue'];
}

An index signature parameter type cannot be a union type. Consider using a mapped object type instead.

Broken Code ❌

interface CustomError {
  [key: string | number]: string | number;
}
 
const error: CustomError = {
  401: 'Unauthorized',
};

Fixed Code ✔️

Solution with mapped object type:

type CustomError = {
  [key in number | string]: string | number;
};
 
const error: CustomError = {
  401: 'Unauthorized',
};

Alternative:

interface ErrorNumber {
  [key: number]: string | number;
}
 
interface ErrorString {
  [key: string]: string | number;
}
 
const error: ErrorNumber | ErrorString = {
  401: 'Unauthorized',
};

TS1341

Class constructor may not be an accessor.

Broken Code ❌

class SomeClass {
  get constructor() {
    // ...
  }
  set constructor(value) {
    // ...
  }
}

Fixed Code ✔️

You can't name accessors as constructor:

class SomeClass {
  get builder() {
    // ...
  }
  set builder(value) {
    // ...
  }
}

TS1345

An expression of type 'void' cannot be tested for truthiness.

Broken Code ❌

type PositiveNumber = number & { __brand: 'PositiveNumber' };
 
function divide(a: number, b: PositiveNumber) {
  return a / b;
}
 
function assertPositiveNumber(x: unknown): asserts x is PositiveNumber {
  if (typeof x === 'number' && x < 0) {
    throw new Error('Input is a negative number');
  }
}
 
if (assertPositiveNumber(10)) {
  divide(100, 10);
}

Solution:

This error occurs because the assertPositiveNumber function is an assertion function and does not return a value (its return type is void). You should call it directly to perform the assertion and then proceed with the divide function if no error is thrown.

Fixed Code ✔️

type PositiveNumber = number & { __brand: 'PositiveNumber' };
 
function divide(a: number, b: PositiveNumber) {
  return a / b;
}
 
function assertPositiveNumber(x: unknown): asserts x is PositiveNumber {
  if (typeof x !== 'number' || x <= 0) {
    throw new Error('Input is not a positive number');
  }
}
 
const num = 10;
assertPositiveNumber(num);
divide(100, num);

TS1354

'readonly' type modifier is only permitted on array and tuple literal types.

Broken Code ❌

const users: readonly { name: readonly string }[] = [{ name: 'Alice' }];

This error occurs because readonly is incorrectly applied to a primitive type (string). You cannot mark collective types like string or number as readonly properties.

Fixed Code ✔️

Mark the property as readonly, not the type:

const users: readonly { readonly name: string }[] = [{ name: 'Alice' }];

Now the users array is read-only, and each object's name property is also read-only.

TS1355

A 'const' assertions can only be applied to references to enum members, or string, number, boolean, array, or object literals.

Broken Code ❌

const result = (Math.random() < 0.5 ? 0 : 1) as const;

Fixed Code ✔️

You cannot apply a const assertion to the result of a ternary operator. It is necessary to restrict the usage of const assertions to the individual literal expressions:

const result = Math.random() < 0.5 ? (0 as const) : (1 as const);

TS1357

An enum member name must be followed by a ',', '=', or '}'.

Broken Code ❌

enum GameAction {
  RUN : 'RUN'
}

Fixed Code ✔️

enum GameAction {
  RUN = 'RUN',
}

TS1361

'Range' cannot be used as a value because it was imported using 'import type'.

Broken Code ❌

import type { Range, TextEditor } from 'vscode';
 
export class Ranger {
  static getFullRange(editor: TextEditor): Range {
    const lastLine = textEditor.document.lineAt(textEditor.document.lineCount - 1);
    const firstLine = textEditor.document.lineAt(0);
    return new Range(firstLine.range.start, lastLine.range.end);
  }
}

Fixed Code ✔️

The type Range is being used to declare the return type of static function Ranger.getFullRange but later on it is also being used to create an instance using new Range. When you want to use a type to construct instances (or do anything else beyond declaring types), then you have to use the import statement instead of import type:

import type { TextEditor } from 'vscode';
import { Range } from 'vscode';
 
export class Ranger {
  static getFullRange(editor: TextEditor): Range {
    const lastLine = textEditor.document.lineAt(textEditor.document.lineCount - 1);
    const firstLine = textEditor.document.lineAt(0);
    return new Range(firstLine.range.start, lastLine.range.end);
  }
}

TS1363

A type-only import can specify a default import or named bindings, but not both.

Broken Code ❌

import type MyDog, { MyPerson } from './MyPerson';
 
export function printAge(personOrDog: MyPerson | MyDog) {
  console.log(personOrDog.age);
}

Fixed Code ✔️

With type-only imports and exports you cannot use a default import together with a named import in one single line of code. The TypeScript team chose this limitation to avoid ambiguity. You will have to use separate import statements:

import type { MyPerson } from './MyPerson';
import type MyDog from './MyPerson';
 
export function printAge(personOrDog: MyPerson | MyDog) {
  console.log(personOrDog.age);
}

TS1368

Class constructor may not be a generator.

Broken Code ❌

class SomeClass {
  *constructor() {
    // ...
  }
}

Fixed Code ✔️

You can't name generators as constructor:

class SomeClass {
  *builder() {
    // ...
  }
}

TS1371

This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.

Broken Code ❌

MyPerson.ts

export class MyPerson {
  constructor(
    public name: string,
    public age: number
  ) {}
}

printAge.ts

import { MyPerson } from './MyPerson';
 
export function printAge(person: MyPerson) {
  console.log(person.age);
}

Fixed Code ✔️

Solution 1:

When "importsNotUsedAsValues" is set to "error" in your "tsconfig.json", then you have to use the "import type" syntax when you just want to refer to a type instead of using it as a value:

printAge.ts

import type { MyPerson } from './MyPerson';
 
export function printAge(person: MyPerson) {
  console.log(person.age);
}

Solution 2:

Use the class also as a value and not just a type:

printAge.ts

import { MyPerson } from './MyPerson';
 
export function printAge(person: MyPerson) {
  console.log(person.age);
}
 
const benny = new MyPerson('Benny', 35);
printAge(benny);

Solution 3:

You can also set "importsNotUsedAsValues" to "preserve" which is not recommended.

TS1375

'await' expressions are only allowed at the top level of a file when that file is a module, but this file has no imports or exports. Consider adding an empty 'export {}' to make this file a module.

Broken Code ❌

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

Fixed Code ✔️

export {};
 
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');

TS1378

Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', or 'nodenext', and the 'target' option is set to 'es2017' or higher.

Broken Code ❌

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"],
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

Fixed Code ✔️

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"],
    "module": "esnext",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es2017"
  }
}

TS1385

Function type notation must be parenthesized when used in a union type.

Broken Code ❌

type MyCallback = () => number | () => string

Fixed Code ✔️

When using a union type, you have to put additional function types in parentheses:

type MyCallback = () => number | (() => string);

TS1389

'this' is not allowed as a variable declaration name.

Broken Code ❌

const this = 'something';

Fixed Code ✔️

The name this cannot be used to declare a variable because it is already a reserved keyword to refer to the current object in a method or constructor.

That's why you have to choose a different name:

const that = 'something';

TS1431

'for await' loops are only allowed at the top level of a file when that file is a module, but this file has no imports or exports. Consider adding an empty 'export {}' to make this file a module.

Broken Code ❌

const inputStream = fs.createReadStream('file.csv');
 
const rl = readline.createInterface({
  input: inputStream,
  crlfDelay: Infinity,
});
 
for await (const line of rl) {
  console.log(line);
}

Fixed Code ✔️

Just add the imports for the fs module and readline module in order to turn your code into a module itself:

import fs from 'node:fs';
import readline from 'node:readline';
 
const inputStream = fs.createReadStream('file.csv');
 
const rl = readline.createInterface({
  input: inputStream,
  crlfDelay: Infinity,
});
 
for await (const line of rl) {
  console.log(line);
}

TS1432

Top-level 'for await' loops are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.

Broken Code ❌

start.ts

import fs from 'node:fs';
import readline from 'node:readline';
 
const file = 'abc.csv';
 
const fileStream = fs.createReadStream(file);
 
const rl = readline.createInterface({
  input: fileStream,
  crlfDelay: Infinity,
});
 
for await (const line of rl) {
  console.log(`Line from file: ${line}`);
}

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"],
    "module": "commonjs",
    "target": "es6"
  }
}

Fixed Code ✔️

The error is similar to TS1378 and needs an adjustment in the tsconfig.json file:

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"],
    "module": "esnext",
    "target": "es2017"
  }
}

TS1434

Unexpected keyword or identifier.

Broken Code ❌

class MyClass {
  static static ID: number = 1337;
}

Fixed Code ✔️

You have to remove the duplicate static keyword:

class MyClass {
  static ID: number = 1337;
}

TS1450

Dynamic imports can only accept a module specifier and an optional set of attributes as arguments.

Broken Code ❌

const Codeowners = import('codeowners');

This error occurs because the TypeScript compiler expects a dynamic import as the imported module is assigned to a constant.

Fixed Code ✔️

To fix this error, use an import statement to indicate to the compiler that a module is being imported:

import Codeowners from 'codeowners';

TS1470

The 'import.meta' meta-property is not allowed in files which will build into CommonJS output.

Broken Code ❌

import path from 'node:path';
import { fileURLToPath } from 'node:url';
 
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
 
console.log(`Hello from directory: ${__dirname}`);

Solution:

Since import.meta is not allowed when targeting CommonJS, you need to use an alternative method to determine the directory path. In a CommonJS environment, you can use the built-in __dirname global variable directly without needing to calculate it from __filename.

Fixed Code ✔️

import path from 'node:path';
 
console.log(`Hello from directory: ${__dirname}`);

TS1471

Module '@headlessui/react' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

Broken Code ❌

import { FocusTrap } from '@headlessui/react';

Fixed Code ✔️

Using a dynamic import:

const { FocusTrap } = await import('@headlessui/react');

TS1479

The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import()' call instead.

Broken Code ❌

import { createTempFile } from '@bennycode/utils';
const tempFile = await createTempFile('Hello, World', true);

Solution:

To import an ECMAScript module in a CommonJS module, you can use a dynamic import which works asynchronously and returns a Promise.

Fixed Code ✔️

const { createTempFile } = await import('@bennycode/utils');
const tempFile = await createTempFile('Hello, World', true);

TS1484

ContentCollectionKey is a type and must be imported using a type-only import when verbatimModuleSyntax is enabled.

Broken Code ❌

import { ContentCollectionKey, getCollection } from 'astro:content';

Fixed Code ✔️

Type-only imports can be made using the type keyword in front of your type's name:

import { type ContentCollectionKey, getCollection } from 'astro:content';

TS2300

Duplicate identifier 'name'.

Broken Code ❌

Objects don't support multiple properties with the same name:

const objectLiteral = {
  name: 'Benny',
  name: 'Sofia',
};

Fixed Code ✔️

To fix the error we have to remove the duplicated property:

const objectLiteral = {
  name: 'Sofia',
};

TS2304

Cannot find name 'world'.

Broken Code ❌

console.log(world.name);

Fixed Code ✔️

It can happen that TypeScript does not know about your global objects because those may be injected from an unknown runtime environment or third-party JavaScript library. The easiest way to let TypeScript know about this is to declare the ambience (ambient context):

declare var world: {
  name: string;
};
 
console.log(world.name);

Cannot find name 'Promise'

Broken Code ❌

// ...
 
public load_prekey(prekey_id: number): Promise<Proteus.keys.PreKey> {
  return new Promise((resolve) => {
    resolve(42);
  });
}
 
// ...

Fixed Code ✔️

Install es6-promise type definitions with the typings tool.

typings install dt~es6-promise --global --save

Adding the following line to the beginning of every file using definitions from es6-promise.

/// <reference path='es6-promise.d.ts' />
 
...
 
public load_prekey(prekey_id: number): Promise<Proteus.keys.PreKey> {
  return new Promise((resolve) => {
    resolve(42);
  });
}
 
...

Cannot find name 'Promise'

Broken Code ❌

const UUID = require('uuidjs');

Fixed Code ✔️

npm install @types/node --save-dev

Cannot find name 'FC'.

Broken Code ❌

import React from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

Fixed Code ✔️

import React, { FC } from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

TS2305

Module './sum' has no exported member 'multiply'.

Broken Code ❌

sum.ts

export function sum(a: number, b: number): number {
  return a + b;
}

main.ts

import { multiply } from './sum';
 
console.log(multiply(1, 2));

Fixed Code ✔️

The file "sum.ts" exports a function named "sum", so we have to fix the named import in our "main.ts" file:

main.ts

import { sum } from './sum';
 
console.log(sum(1, 2));

TS2306

File 'add.ts' is not a module.

Broken Code ❌

add.ts

function add(a: number, b: number): number {
  return a + b;
}

main.ts

import { add } from './add';
 
console.log(add(1000, 337));

Fixed Code ✔️

The error TS2306 signals that the file (add.ts) can be found (otherwise it would throw error TS2307) but does not provide the necessary exports. We can solve this with a named export:

add.ts

export function add(a: number, b: number): number {
  return a + b;
}

Alternatively, we can use a default export:

add.ts

export default function add(a: number, b: number): number {
  return a + b;
}

Using a default export requires that we also adjust our import statement in main.ts (otherwise we would end up with error TS2614):

main.ts

import add from './add';
 
console.log(add(1000, 337));

Video Tutorial

TS2307

Cannot find module 'events' or its corresponding type declarations.

Broken Code ❌

You are importing from a core Node.js module (e.g. event) without having Node.js type definitions installed:

import { EventEmitter } from 'events';

Fixed Code ✔️

Import Node.js type definitions first in order to use Node.js core modules:

npm install @types/node

TS2314

Generic type 'Omit' requires 2 type argument(s).

Broken Code ❌

export interface SerializedBatchedCandle extends Omit<BatchedCandle, 'close', 'open'> {
  open: string;
  close: string;
}

Fixed Code ✔️

When using the Omit utility type, you have to list property overwrites with a pipe (|):

export interface SerializedBatchedCandle extends Omit<BatchedCandle, 'close' | 'closeAsk'> {
  close: string;
  closeAsk: string;
}

Generic type 'ReadonlyArray` ' requires 1 type argument(s).

Broken Code ❌

const array: ReadonlyArray = [1, 2, 3] as const;

Fixed Code ✔️

When using a generic (in this case ReadonlyArray<T>), then you have to pass a type argument to it:

const array: ReadonlyArray<number> = [1, 2, 3] as const;

TS2315

Type 'CustomRequest' is not generic.

Broken Code ❌

type CustomRequest = {
  url: string;
  data: string;
};
 
const request: CustomRequest<string> = {
  url: 'https://typescript.tv/',
  data: 'example',
};

Fixed Code ✔️

When supplying a type (recognizable by the use of the diamond operator <>), then we have to make sure that our type actually supports generics to capture the type that we provide:

type CustomRequest<CustomType> = {
  url: string;
  data: CustomType;
};
 
const request: CustomRequest<string> = {
  url: 'https://typescript.tv/',
  data: 'example',
};

TS2318

TS2318: Cannot find global type 'AsyncIterableIterator'.

Broken Code ❌

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "lib": ["es2018", "dom"],
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

Solution:

This issue is often related to the TypeScript configuration not including the necessary libraries that define modern JavaScript features like AsyncIterableIterator. To ensure that TypeScript supports Symbol.asyncIterator properly, your TypeScript configuration needs to either target esnext or explicitly include the esnext.asynciterable library if you're using a targeted subset of features from ECMAScript proposals.

Fixed Code ✔️

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "lib": ["es2018", "dom", "esnext.asynciterable"],
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

TS2322

Type 'string' is not assignable to type 'number'.

Broken Code ❌

export function add(a: number, b: number): number {
  return `${a + b}`;
}

Fixed Code ✔️

The type of the returned value must match the return type specified in the function signature:

export function add(a: number, b: number): number {
  return parseInt(`${a + b}`, 10);
}

Video Tutorial

TS2335

'super' can only be referenced in a derived class.

Broken Code ❌

abstract class Animal {
  abstract makeNoise(): string;
}
 
class Cat {
  constructor() {
    super();
  }
 
  makeNoise(): string {
    return 'Meow!';
  }
}

Fixed Code ✔️

Your derived class has to "extend" the base class:

abstract class Animal {
  abstract makeNoise(): string;
}
 
class Cat extends Animal {
  constructor() {
    super();
  }
 
  makeNoise(): string {
    return 'Meow!';
  }
}

TS2339

Property 'width' does not exist on type 'Shape'.

Broken Code ❌

type Shape = {
  kind: 'rectangle' | 'square';
};
 
type Rectangle = {
  kind: 'rectangle';
  width: number;
  height: number;
} & Shape;
 
type Square = {
  kind: 'square';
  size: number;
} & Shape;
 
function handleShape(shape: Shape): void {
  switch (shape.kind) {
    case 'rectangle':
      console.log(shape.width);
      break;
    case 'square':
      console.log(shape.size);
      break;
  }
}

Fixed Code ✔️

You can create discriminated unions by sharing a single field (e.g. kind) in your type definitions and using a union type in connection with a switch-case statement that helps the TypeScript compiler to distinguish the different types:

type Rectangle = {
  kind: 'rectangle';
  width: number;
  height: number;
};
 
type Square = {
  kind: 'square';
  size: number;
};
 
type Shape = Rectangle | Square;
 
function handleShape(shape: Shape): void {
  switch (shape.kind) {
    case 'rectangle':
      console.log(shape.width);
      break;
    case 'square':
      console.log(shape.size);
      break;
  }
}

Property 'pop' does not exist on type 'readonly [1, 2, 3]'.

Broken Code ❌

const array = [1, 2, 3] as const;
array.pop();

When using a const assertion on an array, then your array becomes readonly (immutable), so you cannot modify its elements using in-place operations such as pop. You will have to make your array mutable:

const array: number[] = [1, 2, 3];
array.pop();

TS2341

Property 'startSimulation' is private and only accessible within class 'ExchangeMock'.

Broken Code ❌

await exchange.startSimulation();

Solution:

Access the private property startSimulation using bracket notation, which is a workaround to access private members from outside the class in TypeScript.

Fixed Code ✔️

await exchange['startSimulation']();

TS2344

Type '{ name: string; }' does not satisfy the constraint '{ age: number; }'. Property 'age' is missing in type '{ name: string; }' but required in type '{ age: number; }'.

Broken Code ❌

function increaseAge<T extends { age: number }>(data: T): T {
  data.age += 1;
  return data;
}
 
increaseAge<{ name: string }>({ age: 25, name: 'Benny' });

Fixed Code ✔️

The "constraint" in this context is set by the T extends statement. When passing a type argument, the required properties of the type variable (T) must be matched:

function increaseAge<T extends { age: number }>(data: T): T {
  data.age += 1;
  return data;
}
 
increaseAge<{ age: number; name: string }>({ age: 25, name: 'Benny' });

As an alternative, type argument inference can be used:

function increaseAge<T extends { age: number }>(data: T): T {
  data.age += 1;
  return data;
}
 
increaseAge({ age: 25, name: 'Benny' });

TS2345

Argument of type 'number' is not assignable to parameter of type 'TimerHandler'.

Broken Code ❌

function add(a: number, b: number): number {
  return a + b;
}
 
setTimeout(add(1000, 337), 5000);

Fixed Code ✔️

There is a mismatch in the expected arguments of a function. The setTimeout function expects the first argument to be a callback function and not the returned value (in this case a number) of a function call:

function add(a: number, b: number): number {
  return a + b;
}
 
setTimeout(() => add(1000, 337), 5000);

Video Tutorial

TS2348

Value of type 'typeof BaseN' is not callable. Did you mean to include 'new'?

Broken Code ❌

import { BaseN } from 'js-combinatorics';
 
const iterator = BaseN([1, 2, 3], 2);

Fixed Code ✔️

import { BaseN } from 'js-combinatorics';
 
const iterator = new BaseN([1, 2, 3], 2);

TS2349

Cannot invoke an expression whose type lacks a call signature. Type 'Promise' has no compatible call signatures.

Broken Code ❌

function bugged(param: Promise<Object>): void {
  param().then(() => console.log('error TS2349'));
}

Fixed Code ✔️

function bugged(param: Promise<Object>): void {
  param.then(() => console.log('error TS2349'));
}

TS2350

Only a void function can be called with the 'new' keyword.

Broken Code ❌

return new NextResponse.json({ message: 'File received successfully' }, 200);

This error occurs because NextResponse.json() is a static method and not a constructor. Therefore, it shouldn't be used with the new keyword.

Fixed Code ✔️

Remove the new keyword when calling NextResponse.json():

return NextResponse.json({ message: 'File received successfully' }, 200);

This way, you're correctly invoking the static method without trying to instantiate it.

TS2351

This expression is not constructable. Type 'EMA' has no construct signatures.

Broken Code ❌

RSI.ts

export class RSI {
  private readonly avgGain: MovingAverage;
 
  constructor(
    private readonly interval: number,
    Indicator: EMA
  ) {
    this.avgGain = new Indicator(this.interval);
  }
}

EMA.ts

export class EMA {}

Fixed Code ✔️

RSI.ts

export class RSI {
  private readonly avgGain: MovingAverage;
 
  constructor(
    private readonly interval: number,
    Indicator: typeof EMA
  ) {
    this.avgGain = new Indicator(this.interval);
  }
}

TS2352

Conversion of type '{ name: string; age: number; }' to type 'Person' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

Broken Code ❌

type Person = {
  firstName: string;
  age: number;
};
 
const myObject = {
  name: 'Benny',
  age: 34,
} as Person;

Fixed Code ✔️

Make sure all properties of your object match the properties of your declared type:

type Person = {
  firstName: string;
  age: number;
};
 
const myObject = {
  firstName: 'Benny',
  age: 34,
} as Person;

Alternative but not recommended: Convert your object to unknown first:

type Person = {
  firstName: string;
  age: number;
};
 
const myObject = {
  name: 'Benny',
  age: 34,
} as unknown as Person;

TS2353

TS2353: Object literal may only specify known properties, and 'id' does not exist in type Omit<VideoEntity, 'id'>.

Broken Code ❌

return VideoEntity.new({
  ytCode: item.snippet!.resourceId!.videoId!,
  id: -1,
});

Solution:

In the broken code, you are trying to set the id property on an instance of VideoEntity where id has been explicitly removed from the permissible properties through the use of Omit<VideoEntity, 'id'>.

Remove the id property from the object literal since it has been omitted from the type definition you are trying to conform to.

Fixed Code ✔️

return VideoEntity.new({
  ytCode: item.snippet!.resourceId!.videoId!,
});

TS2355

A function whose declared type is neither 'void' nor 'any' must return a value.

Broken Code ❌

getName(): string {
 
}

Fixed Code ✔️

getName(): string {
  return 'Benny';
}

TS2361

The right-hand side of an 'in' expression must not be a primitive.

Broken Code ❌

import axios, { AxiosError } from 'axios';
 
const isAxiosError = (error: unknown): error is AxiosError => {
  return 'isAxiosError' in error;
};

Fixed Code ✔️

You cannot use the in keyword on primitive data types. That's why we have to replace the primitive type unknown with a non-primitive type like object:

import axios, { AxiosError } from 'axios';
 
const isAxiosError = (error: object): error is AxiosError => {
  return 'isAxiosError' in error;
};

An alternative solution would be to use a type assertion on the right-hand side of the 'in' expression:

const isAxiosError = (error: unknown): error is AxiosError => {
  return 'isAxiosError' in (error as AxiosError);
};

TS2362

The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Broken Code ❌

const userName = { name: 'Benny' };
const userAge = { age: 35 };
const user = userName & userAge;

Fixed Code ✔️

When you want to merge two objects, you have a multitude of possibilities:

Spread Syntax

const userName = { name: 'Benny' };
const userAge = { age: 35 };
const user = {
  ...userName,
  ...userAge,
};

Object.assign

const userName = { name: 'Benny' };
const userAge = { age: 35 };
const user = Object.assign({}, userName, userAge);

TS2364

The left-hand side of an assignment expression must be a variable or a property access.

Broken Code ❌

1 = 1;

Fixed Code ✔️

Using a variable on the left-hand side assignment:

const a = 1;

TS2365

Operator '+' cannot be applied to types 'number' and 'object'.

Broken Code ❌

export function add(a: number, b: object): number {
  return a + b;
}

Fixed Code ✔️

You can use the + operator only with equivalent data types (strings + strings or numbers + numbers):

export function add(a: number, b: number): number {
  return a + b;
}

TS2366

Function lacks ending return statement and return type does not include 'undefined'.

Broken Code ❌

export function getInterestRate(years: 1 | 2 | 3): number {
  switch (years) {
    case 1:
      return 1.75;
    case 2:
      return 2.96;
  }
}

Fixed Code ✔️

The switch-case statement isn't handling all cases from every possible input. We can solve that by defining a default case:

export function getInterestRate(years: 1 | 2 | 3): number {
  switch (years) {
    case 1:
      return 1.75;
    case 2:
      return 2.96;
    default:
      return 3;
  }
}

Another solution would be to implement the missing case for 3:

export function getInterestRate(years: 1 | 2 | 3): number {
  switch (years) {
    case 1:
      return 1.75;
    case 2:
      return 2.96;
    case 3:
      return 3;
  }
}

Video Tutorial

TS2367

This condition will always return 'false' since the types '{ message: string; }[] | undefined' and 'number' have no overlap.

Broken Code ❌

function myTest(errors: { message: string }[]): void {
  if (errors === 0) {
    throw new Error();
  }
}

Fixed Code ✔️

An array cannot be 0, so doing a check for equality with 0 makes no sense. What may be useful instead is checking the array length:

function myTest(errors: { message: string }[]): void {
  if (errors.length === 0) {
    throw new Error();
  }
}

TS2368

Type parameter name cannot be 'number'.

Broken Code ❌

export interface SimpleNumberIndicator<number> {
  update(price: T): T;
}

Fixed Code ✔️

The easiest way to fix the error is to make age optional as well:

export interface SimpleNumberIndicator<T = number> {
  update(price: T): T;
}

TS2369

A parameter property is only allowed in a constructor implementation.

Broken Code ❌

class MyMessenger {
  constructor(public message: string);
}

Fixed Code ✔️

The constructor implementation is missing curly brackets which is why TypeScript does not recognize the constructor implementation and files error TS2369. To solve it you have to add the missing curly brackets:

class MyMessenger {
  constructor(public message: string) {}
}

TS2370

A rest parameter must be of an array type.

Broken Code ❌

function sum(...array: number): number {
  return array.reduce((a, b) => a + b);
}
 
console.log(sum(...[1, 2, 3, 4, 5]));

Fixed Code ✔️

A rest parameter allows a function to accept an indefinite number of parameters. To signal that it can be multiple values, we have to use an array type for our rest parameter:

function sum(...array: number[]): number {
  return array.reduce((a, b) => a + b);
}
 
console.log(sum(...[1, 2, 3, 4, 5]));

TS2371

A parameter initializer is only allowed in a function or constructor implementation.

Broken Code ❌

function add(a: number, b: number, c: number = 0): number;
function add(a: number | string, b: number | string, c: number | string = 0): number {
  return parseInt(`${a}`, 10) + parseInt(`${b}`, 10);
}

Fixed Code ✔️

Remove parameter initializer from function overload:

function add(a: number, b: number, c: number): number;
function add(a: number | string, b: number | string, c: number | string = 0): number {
  return parseInt(`${a}`, 10) + parseInt(`${b}`, 10);
}

TS2372

Parameter 'score' cannot reference itself.

Broken Code ❌

function printScore(score: number = score): void {
  console.log(score);
}

Fixed Code ✔️

If you want to use a default value for a parameter, then you have to set it to a fixed value instead of referencing the parameter to itself:

function printScore(score: number = 0): void {
  console.log(score);
}

TS2377

Constructors for derived classes must contain a 'super' call.

Broken Code ❌

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  public name;
 
  constructor(name: string) {
    this.name = name;
  }
}

Fixed Code ✔️

Every constructor in a derived class has to call the super method to invoke the constructor of the base class. It has to be the very first call:

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  public name;
 
  constructor(name: string) {
    super();
    this.name = name;
  }
}

Video Tutorial

TS2378

A 'get' accessor must return a value.

Broken Code ❌

get name() {
 
}

Fixed Code ✔️

get name(): string {
  return 'Benny';
}

TS2383

TS2383: Overload signatures must all be exported or non-exported.

Broken Code ❌

function isTuple<T>(arr: T[], minLength: 1): arr is [T];
function isTuple<T>(arr: T[], minLength: 2): arr is [T, T];
function isTuple<T>(arr: T[], minLength: 3): arr is [T, T, T];
function isTuple<T>(arr: T[], minLength: 4): arr is [T, T, T, T];
export function isTuple<T>(arr: T[], minLength: number) {
  return arr.length >= minLength;
}

Solution:

This TypeScript error occurs because the function overloads for isTuple are internally defined (not exported), but the implementation signature is exported. This discrepancy between the visibility of the overload signatures and the implementation signature leads to the error.

To fix this error, you need to ensure consistent export status for all overload signatures and the function implementation. You can either export all the overload signatures or keep them all internal. In most cases, if you intend to use the function outside the module, you should export everything.

Fixed Code ✔️

export function isTuple<T>(arr: T[], minLength: 1): arr is [T];
export function isTuple<T>(arr: T[], minLength: 2): arr is [T, T];
export function isTuple<T>(arr: T[], minLength: 3): arr is [T, T, T];
export function isTuple<T>(arr: T[], minLength: 4): arr is [T, T, T, T];
export function isTuple<T>(arr: T[], minLength: number) {
  return arr.length >= minLength;
}

TS2389

Function implementation name must be 'getOpenPosition'.

Broken Code ❌

async getOpenPosition(): Promise<PortfolioOpenPosition[]>;
async getOpenPosition(id: number): Promise<OrderSchema>;
async getOrder(id?: number) {
  const resource = OrderAPI.URL.ORDERS;
  const response = await this.apiClient.get(resource);
  return z.array(OrderSchema).parse(response.data);
}

Solution:

Rename getOrder to getOpenPosition to match the declared method signatures.

Fixed Code ✔️

async getOpenPosition(): Promise<PortfolioOpenPosition[]>;
async getOpenPosition(id: number): Promise<OrderSchema>;
async getOpenPosition(id?: number) {
  const resource = OrderAPI.URL.ORDERS;
  const response = await this.apiClient.get(resource);
  return z.array(OrderSchema).parse(response.data);
}

TS2390

Constructor implementation is missing.

Broken Code ❌

class MyMessenger {
  constructor(public message: string);
}

Fixed Code ✔️

A constructor implementation must be put in curly brackets:

class MyMessenger {
  constructor(public message: string) {}
}

TS2391

Function implementation is missing or not immediately following the declaration.

Broken Code ❌

abstract class Animal {
  abstract name: string;
  makeNoise(): string;
}

Fixed Code ✔️

An abstract class is different from an interface. You have to use the abstract modifier if you want to define a contract in an abstract class. If there is no abstract modifier you will have to provide a implementation.

Solution 1:

To solve the problem, we can mark makeNoise with the abstract keyword. That will enforce derived classes to implement this method on their own:

abstract class Animal {
  abstract name: string;
  abstract makeNoise(): string;
}

Solution 2:

Another solution is to provide a base implementation for makeNoise:

abstract class Animal {
  abstract name: string;
  makeNoise(): string {
    return 'Woof';
  }
}

Video Tutorial

TS2393

Duplicate function implementation.

Broken Code ❌

function add(a: number, b: number) {
  return a + b;
}

Fixed Code ✔️

This error may occur when you have multiple files within the same project that implement the same function with the same name. To resolve this issue, you need to configure TypeScript to recognize a file as a script rather than a module. This can be achieved by setting the "moduleDetection" option to "force" instead of the default "auto":

tsconfig.json

{
  "compilerOptions": {
    "moduleDetection": "force"
  }
}

TS2394

This overload signature is not compatible with its implementation signature.

Broken Code ❌

The implementation does not match all signatures:

function sum(a: number, b: number): number;
function sum(a: string, b: string): string;
function sum(a: number | string, b: number | string) {
  return `${parseInt(a + '', 10) + parseInt(b + '', 10)}`;
}

Fixed Code ✔️

To match the first function overload, we have to add code to our function body which can also return a number:

function sum(a: number, b: number): number;
function sum(a: string, b: string): string;
function sum(a: number | string, b: number | string) {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  return `${parseInt(a + '', 10) + parseInt(b + '', 10)}`;
}

Video Tutorial

TS2395

Individual declarations in merged declaration 'React' must be all exported or all local.

Broken Code ❌

index.d.ts

import * as React from 'react';
 
declare namespace React {
  type StatelessComponent<P> = React.FunctionComponent<P>;
}

Fixed Code ✔️

Make sure to export your additional declaration:

index.d.ts

import * as React from 'react';
 
export declare namespace React {
  type StatelessComponent<P> = React.FunctionComponent<P>;
}

TS2397

Declaration name conflicts with built-in global identifier 'globalThis'.

Broken Code ❌

declare module globalThis {
  var signin: () => string[];
}
 
this.signin();

Fixed Code ✔️

To merge your additions with the existing globalThis definition, you can use a namespace:

declare module 'global' {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

TS2403

TS2403: Subsequent variable declarations must have the same type. Variable 'window' must be of type 'Window & typeof globalThis', but here has type 'any'.

Broken Code ❌

var window: any = window || null;

Fixed Code ✔️

var window: Window & typeof globalThis = window || null;

TS2411

Property 'age' of type 'number' is not assignable to 'string' index type 'string'.

Broken Code ❌

interface Person {
  [key: string]: string;
  age: number;
  name: string;
}

Fixed Code ✔️

We defined an interface where every key has a value of type string. This doesn't work for age which is why we have to extend the possible value types using a union type:

interface Person {
  [key: string]: number | string;
  age: number;
  name: string;
}

TS2415

TS2415: Class PanicSellStrategy<Config> incorrectly extends base class Strategy<Config, StrategyState>. Property position is private in type PanicSellStrategy<Config> but not in type Strategy<Config, StrategyState>.

Broken Code ❌

class Strategy<Config, StrategyState> {
  protected position: number;
}
 
class PanicSellStrategy<Config> extends Strategy<Config, StrategyState> {
  private position: number;
}

Solution:

To resolve the TS2415 error, ensure the visibility of the position property in the derived class PanicSellStrategy matches that of the base class Strategy. If the base class has position as protected, the derived class should also declare it as protected or more accessible (not private).

Fixed Code ✔️

class Strategy<Config, StrategyState> {
  protected position: number;
}
 
class PanicSellStrategy<Config> extends Strategy<Config, StrategyState> {
  protected position: number; // Adjust visibility to match the base class
}

TS2416

Property myVariable in type MyExtendedClass is not assignable to the same property in base type MyBaseClass. Type number is not assignable to type string.

Broken Code ❌

class MyBaseClass {
  myVariable = '123';
}
 
export class MyExtendedClass extends MyBaseClass {
  myVariable: number = 456;
}

Fixed Code ✔️

When referring to an inherited property (like myVariable), make sure that it uses the same type as the original:

class MyBaseClass {
  myVariable = '123';
}
 
export class MyExtendedClass extends MyBaseClass {
  myVariable = '456';
}

TS2420

Class 'Dog' incorrectly implements interface 'Animal'. Property 'name' is private in type 'Dog' but not in type 'Animal'.

Broken Code ❌

interface Animal {
  name: string;
}
 
class Dog implements Animal {
  constructor(private name: string = 'Bobby') {}
}

Fixed Code ✔️

The Animal interface defines a public name member. The name property in our Dog class must therefore also be public:

interface Animal {
  name: string;
}
 
class Dog implements Animal {
  constructor(public name: string = 'Bobby') {}
}

Video Tutorial

TS2425

Class MyBaseClass defines instance member property logMyVariable, but extended class MyExtendedClass defines it as instance member function.

Broken Code ❌

abstract class MyBaseClass {
  myVariable: string;
  abstract logMyVariable: () => void;
}
 
export class MyExtendedClass extends MyBaseClass {
  logMyVariable() {
    console.log(this.myVariable);
  }
}

Fixed Code ✔️

To turn a function into a property of an instance member, you can use a class property initializer:

class MyBaseClass {
  myVariable: string;
  abstract myVariable = '123';
}
 
export class MyExtendedClass extends MyBaseClass {
  logMyVariable = () => {
    console.log(this.myVariable);
  };
}

TS2428

All declarations of 'Strategy' must have identical type parameters.

Broken Code ❌

Strategy.ts

enum TOPIC {
  ON_LOGOUT = 'ON_LOGOUT',
}
 
export interface Strategy {
  on(event: TOPIC.ON_LOGOUT, listener: (reason: string) => void): this;
}
 
export abstract class Strategy<SpecificConfig extends StrategyConfig> extends EventEmitter {
  // ...
}

Fixed Code ✔️

Solution: The generic abstract class Strategy has a generic type parameter list in angle brackets (diamond notation). This generic type parameter list must also be added to the interface definition of Strategy.

Strategy.ts

enum TOPIC {
  ON_LOGOUT = 'ON_LOGOUT',
}
 
export interface Strategy<SpecificConfig extends StrategyConfig> {
  on(event: TOPIC.ON_LOGOUT, listener: (reason: string) => void): this;
}
 
export abstract class Strategy<SpecificConfig extends StrategyConfig> extends EventEmitter {
  // ...
}

TS2430

Interface 'StockExchange' incorrectly extends interface 'Exchange'.

Broken Code ❌

interface Exchange {
  address: string;
}
 
export interface StockExchange extends Exchange {
  address?: string;
}

Fixed Code ✔

The address in Exchange is a mandatory property but in StockExchange it is declared as being optional which creates an incompatibility in the type. To fix the error, the property address has either to become optional or mandatory in both declarations:

interface Exchange {
  address: string;
}
 
export interface StockExchange extends Exchange {
  address?: string;
}

TS2440

Import declaration conflicts with local declaration of 'React'.

Broken Code ❌

main.ts

import React from 'react';
 
declare module React {
  type MyCustomType<P> = void;
}

Fixed Code ✔️

You cannot redeclare a module that you are importing, but you can outsource your additional typings to a declaration file in order to apply declaration merging:

index.d.ts

declare namespace React {
  type MyCustomType<P> = void;
}

TS2445

Property 'makeNoise' is protected and only accessible within class 'Dog' and its subclasses.

Broken Code ❌

abstract class Animal {
  protected abstract makeNoise(): string;
}
 
class Dog extends Animal {
  protected makeNoise(): string {
    return 'Woof!';
  }
}
 
const laika = new Dog();
laika.makeNoise();

Fixed Code ✔️

The visibility of the makeNoise method is protected. We have to make it public if we want to call it directly from an instance of Dog:

abstract class Animal {
  protected abstract makeNoise(): string;
}
 
class Dog extends Animal {
  public makeNoise(): string {
    return 'Woof!';
  }
}
 
const laika = new Dog();
laika.makeNoise();

Video Tutorial

TS2448

Block-scoped variable 'add' used before its declaration.

Broken Code ❌

Function expressions cannot be hoisted (used before they are declared):

add(1, 2);
 
const add = (a: number, b: number): number => {
  return a + b;
};

Fixed Code ✔️

Turn your function expression into a function declaration (which can be hoisted):

add(1, 2);
 
function add(a: number, b: number): number {
  return a + b;
}

TS2451

Cannot redeclare block-scoped variable 'window'.

Broken Code ❌

const window = 'blue';

Fixed Code ✔️

Depending on the configuration of "lib" in your "tsconfig.json" file, there might be global variables that are present (like window when using the "dom" library provided by TypeScript). In this case you cannot redeclare the global variable and have to choose another name:

const myWindow = 'blue';

TS2454

Variable 'myFavoriteNumber' is used before being assigned.

Broken Code ❌

export function myNumber(): number {
  let myFavoriteNumber: number;
  return myFavoriteNumber;
}

Fixed Code ✔️

export function myNumber(): number {
  let myFavoriteNumber: number;
  myFavoriteNumber = 72;
  return myFavoriteNumber;
}

export function myNumber(): number {
  let myFavoriteNumber: number = 72;
  return myFavoriteNumber;
}

TS2456

Type alias 'MyValue' circularly references itself.

Broken Code ❌

type MyValue = number | string | Record<string, MyValue>;

Fixed Code ✔️

When defining a recursive type, you have to use the object syntax:

type MyValue = number | string | { [key: string]: MyValue };

TS2459

Module './myFunction' declares 'myFunction' locally, but it is not exported.

Broken Code ❌

myFunction.ts

function myFunction(a: number, b: number): number {
  return a + b;
}
 
export {};

index.ts

import { myFunction } from './myFunction';
 
myFunction(1, 2);

Fixed Code ✔️

When you want to import your function in another file, you have to make sure that it is exported using the export keyword:

myFunction.ts

export function myFunction(a: number, b: number): number {
  return a + b;
}

index.ts

import { myFunction } from './myFunction';
 
myFunction(1, 2);

TS2475

'const' enums can only be used in property or index access expressions or the right hand side of an import declaration or export assignment or type query.

Broken Code ❌

export const enum TIME_INTERVAL {
  ONE_MINUTE = '1m',
  THREE_MINUTES = '3m',
  FIVE_MINUTES = '5m',
}
 
console.log(Object.values(TIME_INTERVAL));

Fixed Code ✔️

Defining a const enum prevents TypeScript from generating JavaScript code for this enum. With const enum TypeScript will just assume that the JavaScript equivalent of this code is already present.

If you want that TypeScript creates JS code for your enum definition, then you have to remove the const keyword:

export enum TIME_INTERVAL {
  ONE_MINUTE = '1m',
  THREE_MINUTES = '3m',
  FIVE_MINUTES = '5m',
}
 
console.log(Object.values(TIME_INTERVAL));

TS2476

A const enum member can only be accessed using a string literal.

Broken Code ❌

const enum OrderSide {
  BUY = 'buy',
  SELL = 'sell',
}
 
console.log(OrderSide[0]);

Fixed Code ✔️

Constant enumerations can only be accessed using key names:

const enum OrderSide {
  BUY = 'buy',
  SELL = 'sell',
}
 
console.log(OrderSide.BUY);

If you want to access enums by indices, you must remove the const keyword and values from your enum:

enum OrderSide {
  BUY,
  SELL,
}
 
console.log(OrderSide[0]);

⚠️ Be aware that this may become unsafe as you may unintentionally access indices that are not defined.

TS2488

Type '{ [month: number]: string; }' must have a 'Symbol.iterator' method that returns an iterator.

Broken Code ❌

const months: {
  [month: number]: string;
} = {
  1: 'January',
  2: 'February',
};
 
for (const month of months) {
  console.log(month);
}

Fixed Code ✔️

The simplest way to loop over an object is to create an iterable object by using Object.entries.

Another method is to add a property called [Symbol.iterator] to your object. The value of this property has to return an iterator. Here you can learn how to create an iterator.

const months: {
  [month: number]: string;
} = {
  1: 'January',
  2: 'February',
};
 
const entries = Object.entries(months);
for (const [key, value] of entries) {
  console.log(key, value);
}

TS2491

The left-hand side of a 'for...in' statement cannot be a destructuring pattern.

Broken Code ❌

const obj = {
  age: 36,
  name: 'Benny',
};
 
for (const [key, value] in Object.entries(obj)) {
  console.log(key, value);
}

Solution:

Change the for...in loop to a for...of loop to correctly iterate over entries of an object using destructuring.

Fixed Code ✔️

const obj = {
  age: 36,
  name: 'Benny',
};
 
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

TS2497

Module 'logdown' resolves to a non-module entity and cannot be imported using this construct.

Broken Code ❌

Export: logdown.d.ts

declare class Logdown {
  constructor(options?: Object);
  public debug(...args: any[]): void;
  public error(...args: any[]): void;
  public info(...args: any[]): void;
  public log(...args: any[]): void;
  public warn(...args: any[]): void;
  public static disable(...args: string[]): void;
  public static enable(...args: string[]): void;
}
 
declare module 'logdown' {
  export = Logdown;
}

Import: app.ts

import { Logdown } from 'logdown';

Broken Code ❌ #2

Export

declare module 'logdown' {
  class Logdown {
    constructor(options?: Object);
    public debug(...args: any[]): void;
    public error(...args: any[]): void;
    public info(...args: any[]): void;
    public log(...args: any[]): void;
    public warn(...args: any[]): void;
    public static disable(...args: string[]): void;
    public static enable(...args: string[]): void;
  }
 
  export = Logdown;
}

Import

import {Logdown} from "logdown";
...
this.logger = new Logdown({prefix: 'abc', alignOuput: true});

Note: TypeScript compiler option "allowSyntheticDefaultImports" must be set to true.

Import

import Logdown = require('logdown');

TS2498

Module 'node_modules/@types/ms/index'uses export =and cannot be used withexport \*

Broken Code ❌

index.ts

export * from 'ms';

Fixed Code ✔️

If a third-party module uses a default export (indicated by the export = syntax), you must use the default keyword to re-export this module:

export { default as ms } from 'ms';

TS2503

Cannot find namespace 'React'.

Broken Code ❌

export type CompositeComponent<P> = React.ComponentClass<P>;

Fixed Code ✔️

You have to add an import statement when reusing a different namespace. Also make sure to install type declarations (i.e. @types/react) if needed.

import React from 'react';
 
export type CompositeComponent<P> = React.ComponentClass<P>;

Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.

Solution

Run yarn add --dev @types/node in your npm project.

TS2504

Type 'Promise' must have a 'Symbol.asyncIterator' method that returns an async iterator.

Broken Code ❌

const resource: string = 'https://api.polygon.io/v2/aggs/ticker/AAPL/range/1/minute/2023-01-09/2023-01-09';
const results: ResponseData['results'] = [];
 
const fetchDataGenerator = fetchData(resource);
 
for await (const payload of fetchDataGenerator) {
  results.push(...payload.results);
}
 
async function fetchData(address: string): Promise<ResponseData> {
  const url = new URL(address);
  url.searchParams.append('limit', '200');
  const response = await fetch(url);
  const payload = (await response.json()) as ResponseData;
  return payload;
}

Fixed Code ✔️

Make sure that fetchDataGenerator returns an AsyncGenerator. When using the function* syntax, this will be the case:

const resource: string = 'https://api.polygon.io/v2/aggs/ticker/AAPL/range/1/minute/2023-01-09/2023-01-09';
const results: ResponseData['results'] = [];
 
const fetchDataGenerator = fetchData(resource);
 
for await (const payload of fetchDataGenerator) {
  results.push(...payload.results);
}
 
async function* fetchData(address: string) {
  let url: URL | undefined = new URL(address);
 
  while (url) {
    console.log(url.origin);
    url.searchParams.append('limit', '200');
 
    const response = await fetch(url);
    const payload = (await response.json()) as ResponseData;
    yield payload;
 
    if (payload.next_url) {
      url = new URL(payload.next_url);
    } else {
      url = undefined;
    }
  }
}

TS2507

Type 'typeof EventEmitter' is not a constructor function type.

Error happened when importing the exported class in another project.

Broken Code ❌

import EventEmitter from 'events';
 
export class WebSocketClient extends EventEmitter {
  constructor() {
    super();
  }
}

Fixed Code ✔️

import { EventEmitter } from 'events';
 
export class WebSocketClient extends EventEmitter {
  constructor() {
    super();
  }
}

TS2511

Cannot create an instance of an abstract class.

Broken Code ❌

myFunction = (strategyConstructor: typeof Strategy, config: StrategyConfig): Promise<Big> => {
  // ....
};

Fixed Code ✔️

export interface Type<T> extends Function {
  new (...args: any[]): T;
}
 
myFunction = (strategyConstructor: StrategyType<Strategy<StrategyConfig>>, config: StrategyConfig): Promise<Big> => {
  // ....
};

Read more: Passing a class constructor as parameter to a function.

TS2512

Overload signatures must all be abstract or non-abstract.

Broken Code ❌

export abstract class MovingAverage {
  update(prices: BigSource[]): Big | void;
 
  abstract update(price: BigSource): Big | void;
}

Fixed Code ✔️

export abstract class MovingAverage {
  abstract update(prices: BigSource[]): Big | void;
 
  abstract update(price: BigSource): Big | void;
}

TS2515

Non-abstract class 'Dog' does not implement inherited abstract member 'makeNoise' from class 'Animal'.

Broken Code ❌

abstract class Animal {
  abstract makeNoise(): string;
}
 
class Dog extends Animal {}

Fixed Code ✔️

If we derive a class from an abstract class, then we have to provide an implementation for all its abstract members:

abstract class Animal {
  abstract makeNoise(): string;
}
 
class Dog extends Animal {
  makeNoise(): string {
    return 'Woof!';
  }
}

Video Tutorial

TS2528

A module cannot have multiple default exports.

Broken Code ❌

const MyPerson = 'Benny';
 
export default MyPerson;
 
export default function MyPerson() {}

Fixed Code ✔️

Make sure to only have one default export:

const MyPerson = 'Benny';
 
export default MyPerson;

TS2531

Object is possibly 'null'.

Broken Code ❌

type Person = {
  address: {
    street: string;
    zipCode: number;
  } | null;
  name: string;
};
 
function logStreet(person: Person): void {
  console.log(person.address.street);
}

Fixed Code ✔️

The error originates from the fact that address can be null. To fix the problem, we can check if address is null by using optional chaining:

type Person = {
  address: {
    street: string;
    zipCode: number;
  } | null;
  name: string;
};
 
function logStreet(person: Person): void {
  console.log(person.address?.street);
}

TS2532

Object is possibly 'undefined'.

Broken Code ❌

type Person = {
  age: number;
};
 
function logAge(person?: Person): void {
  console.log(person.age);
}

Fixed Code ✔️

TypeScript warns us that person can be undefined (because of the ?). There are multiple ways to fix the problem. We can do an existence check using an if-condition:

type Person = {
  age: number;
};
 
function logAge(person?: Person): void {
  if (person) {
    console.log(person.age);
  }
}

Alternatively, we can use optional chaining:

type Person = {
  age: number;
};
 
function logAge(person?: Person): void {
  console.log(person?.age);
}

Optional chaining is less preferable in this case as it will log undefined if the person is undefined. Using the if-condition from the solution above, nothing will be logged to the console in case the person is undefined.

Suppressing the error

You can prevent the error by setting the value of "strictNullChecks" to false in the "compilerOptions" section of your "tsconfig.json" file.

TS2533

Object is possibly 'null' or 'undefined'.

Broken Code ❌

type Person = {
  address?: {
    street: string;
    zipCode: number;
  } | null;
  name: string;
};
 
function logStreet(person: Person): void {
  console.log(person.address.street);
}

Fixed Code ✔️

The error originates from the fact that address can be undefined (because of the ?) or null. To fix the problem, we can check if address is defined by using optional chaining:

type Person = {
  address?: {
    street: string;
    zipCode: number;
  } | null;
  name: string;
};
 
function logStreet(person: Person): void {
  console.log(person.address?.street);
}

TS2536

Type string cannot be used to index type Config

Broken Code ❌

export type StrategyConfig = {
  [key: string]: string;
};
 
export class GenericClass<Config extends StrategyConfig> {
  public proxyConfig(source: Config): Config {
    return new Proxy<Config>(source, {
      set: <ConfigKey extends keyof Config>(config: Config, property: string, value: Config[ConfigKey]) => {
        config[property] = value;
        return true;
      },
    });
  }
}

Fixed Code ✔️

Because the type of property is a string and Config expects a ConfigKey, we need to ensure that our property is of type ConfigKey.

We can simply annotate the ConfigKey type to property, but we also have to make sure that ConfigKey extends the string type as the set method of a Proxy only accepts string | symbol:

export type StrategyConfig = {
  [key: string]: string;
};
 
export class GenericClass<Config extends StrategyConfig> {
  public proxyConfig(source: Config): Config {
    return new Proxy<Config>(source, {
      set: <ConfigKey extends keyof Config & string>(config: Config, property: ConfigKey, value: Config[ConfigKey]) => {
        config[property] = value;
        return true;
      },
    });
  }
}

TS2537

Type 'Promise<OctokitResponse<{ name?: string | null | undefined; email?: string | null | undefined; login: string; id: number; node_id: string; avatar_url: string; gravatar_id: string | null; url: string; html_url: string; ... 11 more ...; starred_at?: string | undefined; }[], 200>>' has no matching index signature for type 'number'.

Broken Code ❌

type UserProps = ReturnType<typeof getMaintainers>[number];
 
export async function getUser(user: Pick<UserProps, 'url'>) {}

This error occurs because ReturnType<typeof getMaintainers> is a Promise, not an array, and indexing it with [number] is not valid.

Fixed Code ✔️

To fix this, you need to first resolve the Promise to access the array and then apply the [number] index signature:

type UserProps = Awaited<ReturnType<typeof getMaintainers>>[number];
 
export async function getUser(user: Pick<UserProps, 'url'>) {}

Here, the Awaited utility type is used to extract the resolved type of the Promise, which allows us to safely index the result as an array.

TS2538

Type 'Person' cannot be used as an index type.

Broken Code ❌

interface Person {
  name: string;
}
 
function getValue(person: Person, key: Person): string {
  return person[key];
}

Fixed Code ✔️

You cannot use an interface as an index type, but you can use all keys of the interface using the keyof type operator:

interface Person {
  name: string;
}
 
function getValue(person: Person, key: keyof Person): string {
  return person[key];
}

TS2539

Cannot assign to defaultName because it is not a variable.

Broken Code ❌

defaults.ts

export let defaultName = 'Benny';

main.ts

import { defaultName } from './defaults';
 
defaultName = 'Sofia';

Fixed Code ✔️

Using the let keyword might lead to the assumption of exporting a variable, but in reality, every export becomes a constant. As we're aware, constants cannot be reassigned.

To work around this, we can use a little trick with how some types are handled. If we put our defaultName (initially a primitive string type) inside an object (which is a complex type), we can change the value inside the object as it is passed by reference:

defaults.ts

export const defaults = {
  defaultName: 'Benny',
};

main.ts

import { defaults } from './defaults';
 
defaults.defaultName = 'Sofia';

TS2540

Cannot assign to 'name' because it is a read-only property.

Broken Code ❌

const user = { name: 'Benny' } as const;
user.name = 'Sofia';

Fixed Code ✔️

The user object has been initialized with a const assertion, indicating to the compiler that the object is immutable. If you wish to reintroduce mutability, you have to remove the const assertion:

const user = { name: 'Benny' };
user.name = 'Sofia';

TS2550

Property 'setPrototypeOf' does not exist on type 'ObjectConstructor'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2015' or later.

Broken Code ❌

code.ts

type HumanHero = typeof human & typeof hero;
 
const human = {
  speak: () => {},
};
 
const hero = {
  fly: () => {},
};
 
// Prototype-based inheritance
Object.setPrototypeOf(hero, human);

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es5"],
    "target": "es6"
  }
}

Fixed Code ✔️

ES5, also known as ECMAScript 2009, doesn't include Object.setPrototypeOf which is why you have to upgrade to ES6 (also known as ES2015):

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es6"],
    "target": "es6"
  }
}

TS2551

Property 'title' does not exist on type 'Video'. Did you mean 'titles'?

Broken Code ❌

interface Video {
  titles: string;
}
 
function showEpisode(this: Video, tag: string) {
  console.log(`${this.title} - ${tag}`);
}

Fixed Code ✔️

There is a typo in our code which TypeScript's compiler has caught for us. We have to rename the titles property:

interface Video {
  title: string;
}
 
function showEpisode(this: Video, tag: string) {
  console.log(`${this.title} - ${tag}`);
}

TS2552

Cannot find name 'readonlyArray'. Did you mean 'ReadonlyArray'?

Broken Code ❌

const array: readonlyArray<number> = [1, 2, 3];

Fixed Code ✔️

const array: ReadonlyArray<number> = [1, 2, 3];

TS2554

Expected 2 arguments, but got 1.

Broken Code ❌

function printName(firstName: string, lastName: string): void {
  console.log(`${firstName} ${lastName}`);
}
 
printName('Michael');

Fixed Code ✔️

function printName(firstName: string, lastName: string): void {
  console.log(`${firstName} ${lastName}`);
}
 
printName('Michael', 'Jordan');

Video Tutorial

TS2556

A spread argument must either have a tuple type or be passed to a rest parameter.

Broken Code ❌

function sum(a: number, b: number): number {
  return a + b;
}
 
console.log(sum(1, ...[2, 3, 4, 5]));

Fixed Code ✔️

When calling a function using the spread syntax (...), we have to ensure that the called function uses a rest parameter:

function sum(a: number, ...b: number[]): number {
  return a + b.reduce((c, d) => c + d);
}
 
console.log(sum(1, ...[2, 3, 4, 5]));

TS2558

Expected 2 type arguments, but got 1.

Broken Code ❌

function combine<X, Y>(a: X, b: Y): (X | Y)[] {
  return [a, b];
}
 
combine<number>(1, '2');

Fixed Code ✔️

The combine function defines 2 type variables (X & Y), so you have to pass it 2 type arguments:

function combine<X, Y>(a: X, b: Y): (X | Y)[] {
  return [a, b];
}
 
combine<number, string>(1, '2');

TS2559

Type '{ city: string; }' has no properties in common with type 'User'.

Broken Code ❌

interface User {
  age?: number;
  name?: string;
}
 
function increaseAge(user: User): void {
  if (user.age) {
    user.age += 1;
  }
}
 
const user = { city: 'Berlin' };
 
increaseAge(user);

Fixed Code ✔️

The problem occurs with weak types (in this case User). All properties of a weak type are optional but when your input doesn't match any of the properties, you will get to see error TS2559. To fix it you have to match at least one of the optional properties:

interface User {
  age?: number;
  name?: string;
}
 
function increaseAge(user: User): void {
  if (user.age) {
    user.age += 1;
  }
}
 
const user = { age: 1, city: 'Berlin' };
 
increaseAge(user);

TS2561

Object literal may only specify known properties, but 'playlistId' does not exist in type 'VideoWhereInput'. Did you mean to write 'playlists'?

Broken Code ❌

await prisma.video.deleteMany({
  where: {
    playlistId: playlistId,
  },
});

Solution:

Correct the property name in the object literal to match the expected property in the 'VideoWhereInput' type.

Fixed Code ✔️

await prisma.video.deleteMany({
  where: {
    playlists: playlistId,
  },
});

TS2564

Property 'name' has no initializer and is not definitely assigned in the constructor.

This error can occur with TypeScript 2.7 in "strict" mode. TypeScript 2.7 introduced a new flag called --strictPropertyInitialization, which tells the compiler to check that each instance property of a class gets initialized in the constructor body, or by a property initializer. See Strict Class Initialization.

Broken Code ❌

class Dog {
  private name: string;
}

Fixed Code ✔️

We have to initialize the name member either at its definition or within the constructor.

Solution 1:

class Dog {
  private name: string = 'Laika';
}

Solution 2:

class Dog {
  private name: string;
 
  constructor() {
    this.name = 'Laika';
  }
}

Solution 3:

class Dog {
  constructor(private name: string = 'Laika') {}
}

Video Tutorial

TS2567

Enum declarations can only merge with namespace or other enum declarations. lib.dom.d.ts(18299, 6): 'ResponseType' was also declared here.

Broken Code ❌

enum ResponseType {
  ACTIVE,
  ERROR,
}

Fixed Code ✔️

In the broken code shown above, a type ResponseType is already declared as part of the "dom" typings. Enums can be merged with other enums but since the other declaration of ResponseType is a type, we cannot merge the existing declaration with our custom one. That's why we have to remove "dom" from the "lib" entries in our "tsconfig.json" file or use a different name for our enum:

enum MyResponseType {
  ACTIVE,
  ERROR,
}

TS2571

Object is of type 'unknown'.

Broken Code ❌

If you use third-party libraries then it can happen that TypeScript cannot infer all return types. In such a case a return type can be unknown which makes it impossible to access its properties from TypeScript. In the following example such case is constructed by assigning unknown to an exemplary constant:

const x: unknown = 1337;
console.log(x.toString());

Fixed Code ✔️

To solve the problem of accessing properties from an unknown object, we have to define the type of the object which we want to access:

const x: number = 1337;
console.log(x.toString());

Broken Code ❌

export const hasUsers = (payload: unknown): payload is { users: string[] } => {
  return 'users' in payload;
};

Fixed Code ✔️

If your variable is of type unknown, then you can use a type guard to narrow the type of your variable. If you want to be sure that you have an object at hand, you can use the typeof type guard:

export const hasUsers = (payload: unknown): payload is { users: string[] } => {
  if (payload && typeof payload === 'object') {
    return 'users' in payload;
  }
  return false;
};

Alternative

You may also get the error "Object is of type 'unknown'" when catching errors. In this case you have to type the error in your catch clause.

TS2574

A rest element type must be an array type.

Broken Code ❌

type Operation = '+' | '-';
 
type Calculation = [Operation, ...number];

Fixed Code ✔️

Simply turn ...number into ...number[]:

type Operation = '+' | '-';
 
type Calculation = [Operation, ...number[]];

TS2577

Return type annotation circularly references itself.

Broken Code ❌

type OurReply = ReturnType<typeof reply>;
 
function reply(text: string): OurReply {
  if (text === 'Hello') {
    return 'Hi!';
  }
 
  if (text === 'Goodbye') {
    return 'Bye!';
  }
 
  return "What's up?";
}

Fixed Code ✔️

You can remove the circular reference by removing the explicit return type (OurReply) from the signature of your function:

type OurReply = ReturnType<typeof reply>;
 
function reply(text: string) {
  if (text === 'Hello') {
    return 'Hi!';
  }
 
  if (text === 'Goodbye') {
    return 'Bye!';
  }
 
  return "What's up?";
}

TS2578

Unused '@ts-expect-error' directive.

Broken Code ❌

// @ts-expect-error
const age = 42;

This error occurs because the @ts-expect-error directive is used, but there is no actual TypeScript error on the next line. The directive should only be used when an error is expected and unavoidable.

Fixed Code ✔️

If there is no error, you don’t need the directive:

const age = 42;

TS2580

Cannot find name 'require'. Do you need to install type definitions for node? Try npm i --save-dev @types/node.

Broken Code ❌

const path = require('path');
console.log(path.basename(__dirname));

Fixed Code ✔️

Install typings for Node.js:

npm i --save-dev @types/node

Update code to modern import syntax:

import path from 'path';
console.log(path.basename(__dirname));

TS2582

Cannot find name 'test'. Do you need to install type definitions for a test runner? Try npm i --save-dev @types/jest or npm i --save-dev @types/mocha.

Broken Code ❌

test('create sum', () => {
  expect(1 + 2).toBe(3);
});

Fixed Code ✔️

The error above is very specific to your testing framework and when using Jest it can be easily solved by installing definition files for Jest (npm i --save-dev @types/jest).

When you are using Playwright, then you would have to make sure that you properly import Playwright's definition for test:

import { test, expect } from '@playwright/test';
 
test('create sum', () => {
  expect(1 + 2).toBe(3);
});

TS2583

Cannot find name 'BigInt'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2020' or later.

Broken Code ❌

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom"]
  }
}

ImmortalPerson.ts

type ImmortalPerson = {
  age: BigInt;
};

Fixed Code ✔️

Arbitrary-precision integers (BigInt) were introduced in 11th edition of the ECMAScript Language Specification (ES11 / ES2020), so you have to add this information to the "lib" property of your TypeScript configuration to make use of this API:

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es2020.bigint"]
  }
}

Alternatively, you can make all additional APIs from ES2020 available to your code:

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es2020"]
  }
}

TS2584

Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

Broken Code ❌

TypeScript code:

console.log('Hello, World!');

TypeScript compiler configuration (tsconfig.json):

{
  "compilerOptions": {
    "lib": ["es2017"]
  }
}

Fixed Code ✔️

You have to add the following to your "tsconfig.json" file:

{
  "compilerOptions": {
    "lib": ["es2017", "dom"]
  }
}

When you are working on an application which never runs in a browser but only in Node.js environments, then you could add @types/node to your devDependencies instead of adding "dom" to your "lib" section.

TS2588

Cannot assign to 'name' because it is a constant.

Broken Code ❌

const name = 'Benny';
name = 'Sofia';

Fixed Code ✔️

You cannot reassign values to constants which is why you have to declare a variable using the let keyword:

let name = 'Benny';
name = 'Sofia';

TS2589

Type instantiation is excessively deep and possibly infinite.

Broken Code ❌

type BubbleSort<A extends any[], Curr extends number = A['length']> = Curr extends 1
  ? A
  : A extends [infer F, infer S, ...infer Rest]
    ? BubbleSort<
        [
          ...(M.Comparator<M.Num<F>, M.Num<S>> extends true
            ? [S, ...BubbleSort<[F, ...Rest], M.Sub<Curr, 1>>]
            : [F, ...BubbleSort<[S, ...Rest], M.Sub<Curr, 1>>]),
        ],
        M.Sub<Curr, 1>
      >
    : never;
 
type Demo1 = BubbleSort<[9, 8, 2, 6, 5, 4, 1]>;

Solution:

This TypeScript error occurs because the type instantiation for recursive type definitions is too deep for the compiler to handle, leading to an "excessively deep and possibly infinite" error. Recursive type definitions can cause performance issues in the TypeScript compiler, especially when the recursion depth is significant.

To fix this, you can try to simplify the type or reduce the depth of recursion. Here, we'll try to simplify the type definition by reducing the recursion depth and providing an alternative approach that avoids excessive type instantiation.

Solution:

type Swap<A extends any[]> = A extends [infer F, infer S, ...infer Rest]
  ? M.Comparator<M.Num<F>, M.Num<S>> extends true
    ? [S, F, ...Rest]
    : [F, S, ...Rest]
  : A;
 
type BubbleSortOnce<A extends any[]> = A extends [infer F, infer S, ...infer Rest]
  ? [F, ...BubbleSortOnce<Swap<[S, ...Rest]>>]
  : A;
 
type BubbleSort<A extends any[], Curr extends number = A['length']> = Curr extends 1
  ? A
  : BubbleSort<BubbleSortOnce<A>, M.Sub<Curr, 1>>;
 
type Demo1 = BubbleSort<[9, 8, 2, 6, 5, 4, 1]>;

TS2595

'React' can only be imported by using a default import.

Broken Code ❌

import { React } from 'react';

Fixed Code ✔️

A default import cannot be put in curly braces:

import React from 'react';

TS2604

Component 'Content' is not a valid component. If this is a Svelte or Vue component, it might have a syntax error that makes it impossible to parse.

Broken Code ❌

index.astro

---
const { post } = Astro.props;
const { Content } = post;
---
 
<div>
  <Content />
</div>

Fixed Code ✔️

When running into issues with Astro Components, make sure that your .astro/types.d.ts file is recent by running astro build. Also ensure that the src/env.d.ts file is loaded correctly to wire up the astro/client typings.

TS2611

'name' is defined as a property in class 'Person', but is overridden here in 'MyPerson' as an accessor.

Broken Code ❌

abstract class Person {
  name: string = 'unknown';
}
 
class MyPerson extends Person {
  get name(): string {
    return `${super.name.toUpperCase}`;
  }
}

Fixed Code ✔️

Getters and setters are property accessors, so you have to make sure that you don't mix property definitions with property accessor definitions. Using the accessor keyword, you can turn a property into a property accessor:

abstract class Person {
  accessor name: string = 'unknown';
}
 
class MyPerson extends Person {
  get name(): string {
    return `${super.name.toUpperCase}`;
  }
}

TS2612

Property myVariable will overwrite the base property in MyBaseClass. If this is intentional, add an initializer. Otherwise, add a declare modifier or remove the redundant declaration.

Broken Code ❌

class MyBaseClass {
  myVariable = '123';
}
 
export class MyExtendedClass extends MyBaseClass {
  myVariable;
 
  logMyVariable = () => {
    console.log(this.myVariable);
  };
}

Fixed Code ✔️

If you don't intend to reinitialize an inherited variable, you can simply avoid it to be redeclared:

class MyBaseClass {
  myVariable = '123';
}
 
export class MyExtendedClass extends MyBaseClass {
  logMyVariable = () => {
    console.log(this.myVariable);
  };
}

TS2613

Module 'add' has no default export. Did you mean to use 'import { add } from "add"' instead?

Broken Code ❌

add.ts

export function add(a: number, b: number): number {
  return a + b;
}

main.ts

import add from './add';
 
console.log(add(1000, 337));

Fixed Code ✔️

To fix the bug we have to convert our named export into a default export:

add.ts

export default function add(a: number, b: number): number {
  return a + b;
}

TS2614

TS2614: Module './add.js'has no exported memberadd. Did you mean to use import add from "./add.js" instead?

Broken Code ❌

add.ts

export default function add(a: number, b: number): number {
  return a + b;
}

main.ts

import { add } from './add.js';

Fixed Code ✔️

There are multiple ways to fix this. The simplest would be turning your import statement into a default import:

import add from './add.js';

An alternative solution would be using a named export:

export function add(a: number, b: number): number {
  return a + b;
}

You could actually use a named export and a default export in the same file:

export default function add(a: number, b: number): number {
  return a + b;
}
 
export { add };

TS2616

'React' can only be imported by using 'import React = require("react")' or a default import.

Broken Code ❌

import { React, FC } from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

Fixed Code ✔️

Use default import for React:

import React, { FC } from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

TS2617

path can only be imported by using import path = require("node:path") or by turning on the esModuleInterop flag and using a default import.

Broken Code ❌

import { path } from 'node:path';

Fixed Code ✔️

import path = require('node:path');

TS2632

Cannot assign to path because it is an import.

Broken Code ❌

import path from 'node:path';
 
path = {};

Fixed Code ✔️

const path = {};

TS2636

Type 'Func' is not assignable to type 'Func' as implied by variance annotation. Type 'super-T' is not assignable to type 'sub-T'.

Broken Code ❌

type Func<in T> = () => T;

Fixed Code ✔️

Variance annotations on type variables must be consistent with their position. If a type variable is at output (read) position, it should be annotated with out:

type Func<out T> = () => T;

Alternatively, you can annotate it with both in and out (i.e. as invariant):

type Func<in out T> = () => T;

TS2637

Variance annotations are only supported in type aliases for object, function, constructor, and mapped types.

Broken Code ❌

type Pair<in T> = [T, T];

Fixed Code ✔️

Variance annotations only make sense if variance is considered while resolving the type alias. Since tuples and arrays are always type-checked covariantly, they do nothing in this case and thus raise the error.

To resolve the error, simply remove the variance annotation.

type Pair<T> = [T, T];

TS2638

Type {} may represent a primitive value, which is not permitted as the right operand of the in operator.

Broken Code ❌

try {
  throw { status: 'error-test' };
} catch (error: unknown) {
  if (error && 'status' in error) {
    console.log(error.status);
  }
}

Fixed Code ✔️

When narrowing down the properties of error, it is important to first verify that error is an object and not a primitive value. Only then can we test if error has a property called status. If we skip the object check, error could be a primitive value, making the use of the in operator incorrect.

try {
  throw { status: 'error-test' };
} catch (error: unknown) {
  if (error && typeof error === 'object' && 'status' in error) {
    console.log(error.status);
  }
}

TS2652

Merged declaration 'MyPerson' cannot include a default export declaration. Consider adding a separate 'export default MyPerson' declaration instead.

Broken Code ❌

const MyPerson = 'Benny';
 
export default function MyPerson() {
  //
}

Fixed Code ✔️

You cannot use the same name to declare a constant and a function. If your intention is to export your constant, then do the following:

const MyPerson = 'Benny';
 
export default MyPerson;

TS2654

Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

Broken Code ❌

/// <reference path="../../../typings/index.d.ts" />

Fix

Remove /// <reference path="..." /> in .d.ts files

Video Tutorial

TS2656

Exported external package typings file '../proteus.d.ts' is not a module. Please contact the package author to update the package definition.

Broken Code ❌

proteus.d.ts

declare module Proteus {}

Fixed Code ✔️

proteus.d.ts

export module Proteus {}

TS2661

Cannot export 'getSdk'. Only local declarations can be exported from a module.

Broken Code ❌

index.ts

export { getSdk };

getSdk.ts

function getSdk() {}

Fixed Code ✔️

If you want to re-export getSdk in another file, you have to export it first from its origin and then import it in the file where you want to re-export it:

index.ts

import { getSdk } from './getSdk';
 
export { getSdk };

getSdk.ts

export function getSdk() {}

TS2663

Cannot find name 'firstName'. Did you mean the instance member 'this.firstName'?

Broken Code ❌

class Person {
  get firstName(): string {
    return firstName;
  }
}

Fixed Code ✔️

If you want to use a getter, you need to back it up with a private property:

class Person {
  private _firstName: string = '';
 
  get firstName(): string {
    return this._firstName;
  }
}

Starting from TypeScript 4.9, you can also use an auto-accessor field:

class Person {
  accessor firstName: string = '';
}

TS2664

Invalid module name in augmentation, module 'gas-local' cannot be found.

Broken Code ❌

main.ts

declare module 'gas-local';

Fixed Code ✔️

The problem occurs when you want to write a module augmentation for a package that isn't found in your "node_modules" directory. Make sure to install the module:

npm install gas-local --save

TS2665

Invalid module name in augmentation. Module 'gas-local' resolves to an untyped module at '../node_modules/gas-local/index.js', which cannot be augmented.

Broken Code ❌

main.ts

declare module 'gas-local';
import gas from 'gas-local';
 
const glib = gas.require('./src');

Fixed Code ✔️

You have to move the shorthand ambient module declaration from a ".ts" file into a ".d.ts" file:

types.d.ts

declare module 'gas-local';

main.ts

import gas from 'gas-local';
 
const glib = gas.require('./src');

TS2668

'export' modifier cannot be applied to ambient modules and module augmentations since they are always visible.

Info

Ambient modules

To describe the shape of libraries not written in TypeScript, we need to declare the API that the library exposes. We call declarations that don’t define an implementation “ambient”. Typically, these are defined in .d.ts files. If you’re familiar with C/C++, you can think of these as .h files.

Source: Modules - Introduction

Module Augmentation

With module augmentation, users have the ability to extend existing modules such that consumers can specify if they want to import the whole module or just a subset.

Source: TypeScript 1.8 Release Notes

Broken Code ❌

export module 'amplify' {
  export function publish(topic: string, ...args: any[]): boolean;
}

Fixed Code ✔️

export function publish(topic: string, ...args: any[]): boolean;

Usage

import amplify = require('amplify');

TS2669

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.

Broken Code ❌

declare global {
  namespace NodeJS {
    interface Global {
      __coverage__: {};
    }
  }
}

You have to turn your code into a module by adding an import or export statement to your code. The easiest way to solve the problem is exporting an empty object:

Fixed Code ✔️

How to fix it using a module:

declare global {
  namespace NodeJS {
    interface Global {
      __coverage__: {};
    }
  }
}
 
export {};

Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.

Broken Code ❌

declare global {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

Fixed Code ✔️

You can create an ambient module by using the declare module syntax:

declare module 'global' {
  namespace globalThis {
    var signin: () => string[];
  }
}
 
this.signin();

TS2674

Constructor of class 'Node' is protected and only accessible within the class declaration.

Broken Code ❌

class Node<NodeType> {
  protected constructor(public value: NodeType) {}
}
 
const node = new Node<number>(5);

This error occurs because the Node class's constructor is marked as protected, so it cannot be instantiated directly outside the class.

Fixed Code ✔️

To fix this, either change the constructor to public if you want instances to be created directly:

class Node<NodeType> {
  public constructor(public value: NodeType) {}
}
 
const node = new Node<number>(5);

Alternatively, you can add a static factory method within the class to control instance creation while keeping the constructor protected:

class Node<NodeType> {
  protected constructor(public value: NodeType) {}
 
  static create<NodeType>(value: NodeType): Node<NodeType> {
    return new Node(value);
  }
}
 
const node = Node.create<number>(5);

TS2677

A type predicate's type must be assignable to its parameter's type. Type 'number' is not assignable to type 'string'.

Broken Code ❌

const isInteger = (input: string): input is number => {
  return !!parseInt(input, 10);
};

Fixed Code ✔️

The input is declared to be of type string which is why the type predicate cannot turn it into a number because these two declarations are mutually exclusive. That's why we have to declare an input type of any:

const isInteger = (input: any): input is number => {
  return !!parseInt(input, 10);
};

TS2678

Type 'StreamStatus' is not comparable to type 'number'.

Broken Code ❌

enum StreamStatus {
  ONLINE = 'ONLINE',
  OFFLINE = 'OFFLINE',
}
 
interface StreamResponse {
  status: number;
}
 
function handleResponse(response: StreamResponse): void {
  switch (response.status) {
    case StreamStatus.ONLINE:
      console.log('You are online.');
      break;
    case StreamStatus.OFFLINE:
      console.log('You are offline.');
      break;
  }
}

Fixed Code ✔️

The StreamResponse declares a "status" property of type number but the switch-case statement checks against StreamStatus, so we have to adjust the typing for "status" of StreamResponse:

enum StreamStatus {
  ONLINE = 'ONLINE',
  OFFLINE = 'OFFLINE',
}
 
interface StreamResponse {
  status: StreamStatus;
}
 
function handleResponse(response: StreamResponse): void {
  switch (response.status) {
    case StreamStatus.ONLINE:
      console.log('You are online.');
      break;
    case StreamStatus.OFFLINE:
      console.log('You are offline.');
      break;
  }
}

TS2680

A 'this' parameter must be the first parameter.

Broken Code ❌

type Person = {
  name: string;
};
 
export function sayHello(text: string = 'Hello', this: Person): void {
  console.log(`${text} ${this.name}`);
}

Fixed Code ✔️

TypeScript requires that a this parameter always comes first in the list of parameters:

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}

TS2683

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

Broken Code ❌

export function sayHello(text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}

Fixed Code ✔️

This bug is also a consequence of TS2680. To fix the bug we have to define the context of our function. It can be done by defining this as the first parameter in our argument list and giving it a type annotation:

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}

TS2684

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Person'.

Broken Code ❌

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}
 
sayHello('Welcome');

Fixed Code ✔️

When calling a function that defines a this parameter, then we have to set the this context with apply, bind or call.

Using apply:

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}
 
const benny: Person = {
  name: 'Benny',
};
 
sayHello.apply(benny, ['Welcome']);

Using bind:

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}
 
const benny: Person = {
  name: 'Benny',
};
 
sayHello.bind(benny)('Welcome');

Using call:

type Person = {
  name: string;
};
 
export function sayHello(this: Person, text: string = 'Hello'): void {
  console.log(`${text} ${this.name}`);
}
 
const benny: Person = {
  name: 'Benny',
};
 
sayHello.call(benny, 'Welcome');

Note: The TS2684 error may also occur when attempting to call static functions of a class with a private constructor.

TS2686

'ko' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Broken Code ❌

const downloadProgress = ko.observable();

Fixed Code ✔️

import ko from 'knockout';
 
const downloadProgress = ko.observable();

'sinon' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Broken Code ❌

import { SinonFakeServer } from 'sinon';
let server: SinonFakeServer;

Fixed Code ✔️

import * as sinon from 'sinon';
let server: sinon.SinonFakeServer;

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Broken Code ❌

import { FC } from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

Fixed Code ✔️

Use default import for React:

import React from 'react';
 
const App: React.FC = (): JSX.Element => {
  return <></>;
};

TS2687

All declarations of 'status' must have identical modifiers. lib.dom.d.ts(11620, 14): 'status' was also declared here.

Broken Code ❌

interface Response {
  data?: string;
  status: StreamStatus;
}

Fixed Code ✔️

In the error above, a Response is declared which should be merged (using declaration merging) with the Response interface of the "dom" library which is set in "lib" within the "tsconfig.json" file. When merging with an existing declaration, the property types of the first declaration must be matched because you can only add additional properties when using declaration merging. The same rules applies to modifiers. Because "status" has a readonly modifier in the existing Response interface, we must declare the same in our own interface extension:

interface Response {
  data?: string;
  readonly status: number;
}

TS2688

Cannot find type definition file for 'vitest/globals'. The file is in the program because: Entry point of type library 'vitest/globals' specified in compilerOptions.

Broken Code ❌

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

Solution:

Ensure the "vitest" type definitions are installed via npm:

Fixed Code ✔️

npm install --save-dev @types/vitest

TS2689

Cannot extend an interface 'Animal'. Did you mean 'implements'?

Broken Code ❌

interface Animal {
  name: string;
}
 
class Dog extends Animal {
  name = 'Default Dog';
}

Fixed Code ✔️

The TypeScript compiler tells us already the solution: When implementing an interface, we have to use implements. If we inherit from classes, we use extends.

class Dog extends Animal {
  protected makeNoise(): string {
    return 'Woof!';
  }
}

TS2691

An import path cannot end with a '.d.ts' extension. Consider importing './index' instead.

Broken Code ❌

You cannot directly import code from declaration files:

import { myFunction } from './index.d.ts';

Fixed Code ✔️

You have to import functions from the source code file (e.g. index.ts):

import { myFunction } from './index';

TS2693

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

Broken Code ❌

The error happens when an instance or a constructor is expected but you are providing only the type of something. In the case below the ApiOkResponse decorater expects you to provide a constructor but for the type property but only a type is being provided.

@Get('total')
@ApiOkResponse({ type: number })
total() {
  return this.usersService.getCount();
}

Fixed Code ✔️

To fix the issue, we can make use of a wrapper object for the number type. It's actually one of the few cases where you would need it:

@Get('total')
@ApiOkResponse({ type: Number })
total() {
  return this.usersService.getCount();
}

Broken Code ❌

The error here is that only a type / interface is being exported. Types / interfaces cannot be used with the new keyword as they are not constructors.

Candlestick.ts

interface Candlestick {
  close: number;
  high: number;
  low: number;
  open: number;
}
 
export default Candlestick;

main.ts

import Candlestick from '../../chart/Candlestick';
const candle = new Candlestick();

Fixed Code ✔️

To fix the issue we have to export a class which can then be used to constructed an instance:

Candlestick.ts

class Candlestick {
  close: number = 0;
  high: number = 0;
  low: number = 0;
  open: number = 0;
}
 
export default Candlestick;

main.ts

import Candlestick from '../../chart/Candlestick';
const candle = new Candlestick();

TS2694

Namespace 'React' has no exported member 'NonExistent'.

Broken Code ❌

import React from 'react';
 
export type CompositeComponent<P> = React.NonExistent<P>;

Fixed Code ✔️

When trying to import a type that is missing in an external namespace, then you have to add the missing typings yourself:

import React from 'react';
 
declare global {
  namespace React {
    type NonExistent<P> = React.FunctionComponent<P>;
  }
}
 
export type CompositeComponent<P> = React.NonExistent<P>;

TS2695

Left side of comma operator is unused and has no side effects.

Broken Code ❌

import express from 'express';
 
const app = express();
 
app.use((, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

Fixed Code ✔️

You just cannot leave out a callback parameter if you don't want to use it. Mark it with an underscore (_) instead:

import express from 'express';
 
const app = express();
 
app.use((_, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

TS2705

An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your '--lib' option.

Solution:

Include the ES2015 library in the --lib option of your tsconfig.json :

{
  "compilerOptions": {
    "target": "ES5",
    "lib": ["ES5", "ES2015"] // Include ES2015 for Promise support
  }
}

TS2706

Required type parameters may not follow optional type parameters.

Broken Code ❌

class KeyValuePair<Key = string, Value> {
  key: Key | undefined;
  value: Value | undefined;
}
 
const populationFigures = new KeyValuePair<string, number>();

Fixed Code ✔️

The generic type Key is defined with a default value of string which makes this type parameter not optional. However, the Value type parameter is optional and optional parameters are not allowed to follow required parameters.

To solve the situation, we have can switch the position of the two parameters which would impact how we use the code:

class KeyValuePair<Value, Key = string> {
  key: Key | undefined;
  value: Value | undefined;
}
 
const populationFigures = new KeyValuePair<number, string>();

Alternatively, we can also set a default type for Value:

class KeyValuePair<Key = string, Value = string> {
  key: Key | undefined;
  value: Value | undefined;
}
 
const populationFigures = new KeyValuePair<string, number>();

TS2707

Generic type 'Iterator<T, TReturn, TNext>' requires between 1 and 3 type arguments.

Broken Code ❌

class Counter implements Iterator {
  private counter = 0;
 
  public next(): { done: boolean; value: number } {
    return {
      done: false,
      value: this.counter++,
    };
  }
}

Fixed Code ✔️

You have to at least pass 1 type argument to the generic Iterator type:

class Counter implements Iterator<number> {
  private counter = 0;
 
  public next(): { done: boolean; value: number } {
    return {
      done: false,
      value: this.counter++,
    };
  }
}

TS2709

Cannot use namespace 'globalThis' as a type.

Broken Code ❌

function parseNumber(this: globalThis, input: string): number {
  return this.parseInt(input);
}
 
parseNumber.call(this, '100');

Fixed Code ✔️

You cannot use a namespace as a type, but you can get the type assigned with that namespace by using the typeof operator:

function parseNumber(this: typeof globalThis, input: string): number {
  return this.parseInt(input);
}
 
parseNumber.call(this, '100');

TS2713

Cannot access 'CheckSuite.status' because 'CheckSuite' is a type, but not a namespace. Did you mean to retrieve the type of the property 'status' in 'CheckSuite' with 'CheckSuite["status"]'?

Broken Code ❌

type CheckSuite = {
  passed: boolean
  status: 'ok' | 'error'
}
 
type ServerResponse = {
  status: CheckSuite.status
}

Fixed Code ✔️

The utility type Pick comes in handy when you want to select and extract specific properties from one type and apply them to another type:

type CheckSuite = {
  passed: boolean
  status: 'ok' | 'error'
}
 
type ServerResponse = {
  status: Pick<CheckSuite, 'status'>
}

TS2715

Abstract property 'name' in class 'Animal' cannot be accessed in the constructor.

Broken Code ❌

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  constructor(name: string) {
    super();
    this.name = name;
  }
}

Fixed Code ✔️

The name member of the abstract Animal class is abstract, so we have to define it ourselves in the derived class Dog. Because name has no access modifier, it is public by default which means that our Dog class has to implement it with a public visibility:

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  public name;
 
  constructor(name: string) {
    super();
    this.name = name;
  }
}

TS2717

Subsequent property declarations must have the same type. Property 'verbose' must be of type 'boolean', but here has type 'string'.

Broken Code ❌

declare namespace GreetingLib {
  interface LogOptions {
    verbose: boolean;
  }
}
 
declare namespace GreetingLib {
  interface LogOptions {
    verbose: string;
  }
}

Fixed Code ✔️

When declaring a property (in this case verbose) twice, then the second declaration must follow the typings of the first declaration:

declare namespace GreetingLib {
  interface LogOptions {
    verbose: boolean;
  }
}
 
declare namespace GreetingLib {
  interface LogOptions {
    verbose: boolean;
  }
}

Usually the error TS2717 shows up when you have multiple versions of typings (i.e. @types/react) for the same interfaces in your codebase. If you run into these kind of problems, you can inspect your typing resolutions using yarn why (i.e. yarn why @types/react) or npm explain (i.e. npm explain @types/react) to find out where you have conflicting typings.

Video Tutorial

TS2720

Class 'Dog' incorrectly implements class 'Animal'. Did you mean to extend 'Animal' and inherit its members as a subclass? Property 'makeNoise' is protected but type 'Dog' is not a class derived from 'Animal'.

Broken Code ❌

abstract class Animal {
  protected abstract makeNoise(): string;
}
 
class Dog implements Animal {
  protected makeNoise(): string {
    return 'Woof!';
  }
}

Fixed Code ✔️

The implements keyword is reserved to implement interfaces. If you want to work with class inheritance, you have to use extends:

abstract class Animal {
  protected abstract makeNoise(): string;
}
 
class Dog extends Animal {
  protected makeNoise(): string {
    return 'Woof!';
  }
}

Video Tutorial

TS2722

Cannot invoke an object which is possibly 'undefined'.

Broken Code ❌

function handleClick(event: { onClick?: () => {} }): void {
  event.onClick();
}

Fixed Code ✔️

Method invocation only works if the method is defined. The onClick method of the event object in the example above is optional, which means it can be undefined. That's why we have to make an existence check before calling / invoking it:

function handleClick(event: { onClick?: () => {} }): void {
  if (event.onClick) {
    event.onClick();
  }
}

As of TypeScript 3.7 you can also use the optional chaining (?.) operator to call a method on an object if it exists:

function handleClick(event: { onClick?: () => {} }): void {
  event.onClick?.();
}

A third possibility is to use reference validation:

function handleClick(event: { onClick?: () => {} }): void {
  event.onClick && event.onClick();
}

TS2724

'./index' has no exported member named 'HeaderOptions'. Did you mean 'HeaderOption'?

Broken Code ❌

index.ts

export interface HeaderOption {
  Authorization: string;
  'Cache-Control': string;
}

printHeader.ts

import { HeaderOptions } from './index';
 
export function printHeader(header: HeaderOptions) {
  console.log(header);
}

Fixed Code ✔️

TypeScript noticed a typing error in the name of the imported interface. The code will work if we correct the typo:

printHeader.ts

import { HeaderOption } from './index';
 
export function printHeader(header: HeaderOption) {
  console.log(header);
}

TS2730

An arrow function cannot have a 'this' parameter.

Broken Code ❌

const loadInitialData = (this: Highcharts.Chart): void => {
  // ...
};

Fixed Code ✔️

You have to turn the arrow function expression into to a function declaration:

function loadInitialData(this: Highcharts.Chart): void {
  // ...
}

TS2732

Cannot find module '../../package.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

Broken Code ❌

import pkg from '../../package.json';

Fixed Code ✔️

To fix the issue and allow importing JSON files, you have to set "resolveJsonModule" to true in your "tsconfig.json" file.

TS2739

Type '{}' is missing the following properties from type 'Person': age, name

Broken Code ❌

type Person = {
  age: number;
  name: string;
};
 
const benny: Person = {};

Fixed Code ✔️

The object doesn't have any properties, so it cannot be assigned to the type of Person. We have to add the missing properties to fix this error:

type Person = {
  age: number;
  name: string;
};
 
const benny: Person = {
  age: 34,
  name: 'Benny',
};

Video Tutorial

Type 'string[]' is missing the following properties from type 'Promise ': then, catch, [Symbol.toStringTag]

Broken Code ❌

function myTest(): Promise<string[]> {
  return [''];
}

When your function specifies to return a Promise, you have to ensure that your return value is also wrapped in a Promise:

function myTest(): Promise<string[]> {
  return Promise.resolve(['']);
}

Alternatively, you can make use of the async keyword, which will automatically wrap your return value into a Promise:

async function myTest(): Promise<string[]> {
  return [''];
}

TS2740

Type 'TextLine' is missing the following properties from type 'Position': line, character, isBefore, isBeforeOrEqual, and 6 more.

Broken Code ❌

import { Position, TextEditor } from 'vscode';
 
function logPosition(textEditor: TextEditor, startLine: Position = textEditor.document.lineAt(0)) {
  console.log(startLine.line);
}

Fixed Code ✔️

The parameter startLine is requiring a value of type Position but the default value returns a value of type TextLine, so this has to be fixed to return the expected type:

import { Position, TextEditor } from 'vscode';
 
function logPosition(textEditor: TextEditor, startLine: Position = textEditor.document.lineAt(0).range.start) {
  console.log(startLine.line);
}

TS2741

Property 'name' is missing in type '{}' but required in type 'Animal'.

Broken Code ❌

interface Animal {
  name: string;
}
 
const laika: Animal = {};

Fixed Code ✔️

Interfaces can be used with classes or plain objects. If we want our object (i.e. laika) to fulfill the contract of Animal, we have to assign all required properties to it:

interface Animal {
  name: string;
}
 
const laika: Animal = {
  name: 'Laika',
};

Video Tutorial

TS2742

The inferred type of 'ProductDeleteDocument' cannot be named without a reference to 'graphql-tag/node_modules/graphql/language/ast'. This is likely not portable. A type annotation is necessary.

Broken Code ❌

export const ProductDeleteDocument = gql`
  mutation ProductDelete($productId: ID!) {
    productDelete(input: { id: $productId }) {
      deletedProductId
    }
  }
`;

Fixed Code ✔️

TypeScript asks for a type annotation to explicitly resolve the inferred type, so let's add a type annotation:

import { DocumentNode } from 'graphql';
 
export const ProductDeleteDocument: DocumentNode = gql`
  mutation ProductDelete($productId: ID!) {
    productDelete(input: { id: $productId }) {
      deletedProductId
    }
  }
`;

In a monorepository the error TS2742 can show up when you are using a package that has not set a "main" property in its "package.json" file. Sometimes it also happens that there is a "types" property which does not point to the correct typings. Make sure both paths are present and relative:

package.json

{
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts"
}

You can run into this error when a code generator, such as graphql-code-generator, misses to render an important statement (see here). This can happen when the generator relies on implicit typings (type inference) and it can be fixed by instructing your code generator to render the missing import statement. Depending on your code generator this could be done through a config file:

plugins:
  - add:
    	content: 'import type { DocumentNode } from "graphql/language/ast";'
  - typescript
  - typescript-operations
  - typescript-react-apollo

With TypeScript 5.5, the compiler has become more lenient towards this error, and many instances of it should disappear (source).

TS2749

'paramNames' refers to a value, but is being used as a type here. Did you mean 'typeof paramNames'?

Broken Code ❌

const paramNames = ['age', 'name'];
 
const person: {
  [param in paramNames]: string;
} = {
  age: '34',
  name: 'Benny',
};

Fixed Code ✔️

type paramNames = 'age' | 'name';
 
const person: {
  [param in paramNames]: string;
} = {
  age: '34',
  name: 'Benny',
};

TS2769

No overload matches this call.

Broken Code ❌

function sum(a: number, b: number): number;
function sum(a: string, b: string): string;
function sum(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  return `${parseInt(a + '', 10) + parseInt(b + '', 10)}`;
}
 
const result = sum('1000', 337);

Fixed Code ✔️

There are only two function overloads for sum. The first overload expects a and b to be of type number. The second overload expects a and b to be of type string but there is no overload that specifies a to be a string while b is a number. We have to add a third overload to allow such function calls:

// Function Overload Signature 1
function sum(a: number, b: number): number;
// Function Overload Signature 2
function sum(a: string, b: string): string;
// Function Overload Signature 3
function sum(a: string, b: number): string;
function sum(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  return `${parseInt(a + '', 10) + parseInt(b + '', 10)}`;
}
 
const result = sum('1000', 337);

An even easier solution would be to remove all function overloads as the function body allows us to use number or string through the union type of number | string:

function sum(a: number | string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  return `${parseInt(a + '', 10) + parseInt(b + '', 10)}`;
}
 
const result = sum('1000', 337);

TS2774

This condition will always return true since this function is always defined. Did you mean to call it instead?

Broken Code ❌

interface MyDog {
  age: () => number;
}
 
interface MyPerson {
  name: string;
  age: () => number;
}
 
function printAge(user: MyPerson | MyDog): void {
  if (user.age) {
  }
}

Fixed Code ✔️

Both interfaces (MyPerson & MyDog) declare a function named age, so that if-condition to check for its existence is unnecessary:

interface MyDog {
  age: () => number;
}
 
interface MyPerson {
  name: string;
  age: () => number;
}
 
function printAge(user: MyPerson | MyDog): void {
  console.log(user.age());
}

TS2779

The left-hand side of an assignment expression may not be an optional property access.

Broken Code ❌

type User = {
  id: number;
  name: string;
};
const someUsers: Map<string, User> = new Map();
someUsers.get('some-user-id')?.name = 'Benny';

Fixed Code ✔️

You cannot assign a value to a property which might be undefined. As Map.get() may return undefined, you have to add an existence check:

type User = {
  id: number;
  name: string;
};
const someUsers: Map<string, User> = new Map();
const user = someUsers.get('some-user-id');
if (user) {
  user.name = 'Benny';
}

TS2786

'Component' cannot be used as a JSX component.

Broken Code ❌

import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
 
type AppPropsWithLayout = AppProps & {
  Component: NextPage & {
    getLayout?: (page: React.ReactElement) => React.ReactNode;
  };
};
 
export default function AdvisoryApp({ Component, pageProps }: AppPropsWithLayout): JSX.Element {
  const getLayout = Component.getLayout ?? ((page) => page);
  return <>{getLayout(<Component {...pageProps} />)}</>;
}

Fixed Code ✔️

Usually the problem derives from a mismatch in @types/react. When you have libraries that are dependent on a specific version of @types/react (i.e. v17.0.47) and you have other libraries working with another major version of @types/react (i.e. v18.0.14), then this can cause compatibility issues when using React.ReactNode or JSX.Element. You have to streamline your dependencies on @types/react, so that these follow the same major version.

You can find all libraries depending on @types/react in your project by executing npm explain @types/react (when a package-lock.json file is present) or yarn why @types/react (when a yarn.lock file is present).

TS2790

The operand of a 'delete' operator must be optional.

Broken Code ❌

interface User {
  age: number;
  name: string;
}
 
const benny: User = {
  age: 35,
  name: 'Benny',
};
 
delete benny.age;

Fixed Code ✔️

When using the delete operator to remove a property from an object, the property must be defined as optional in TypeScript:

interface User {
  age?: number;
  name: string;
}
 
const benny: User = {
  age: 35,
  name: 'Benny',
};
 
delete benny.age;

TS2792

Cannot find module '@playwright/test'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

Broken Code ❌

playwright.config.staging.ts

import { PlaywrightTestConfig } from '@playwright/test';
 
const config: PlaywrightTestConfig = {
  use: {
    baseURL: 'https://my-staging-environment.com/',
  },
};
 
export default config;

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "classic"
  }
}

Fixed Code ✔️

To fix the problem you have to use "moduleResolution": "node" in your TS config:

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

TS2794

Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?

Broken Code ❌

await new Promise((resolve, reject) => {
  resolve();
});

Fixed Code ✔️

When a Promise resolves with nothing, you need to define that as a type argument to the generic Promise:

await new Promise<void>((resolve, reject) => {
  resolve();
});

TS2802

Type 'Set' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

Broken Code ❌

const letters = new Set<string>(['A', 'B', 'C']);
 
for (const letter of letters) {
  console.log(letter);
}

{
  "compilerOptions": {
    // Files
    "rootDir": "src",
    "outDir": "dist",
    // Syntax
    "lib": ["ES2022"],
    "target": "ES5",
    // Modules
    "moduleResolution": "Node16",
    "module": "NodeNext",
    // Type Checking Behaviour
    "strict": true
  }
}

Fixed Code ✔️

In order to resolve the issue, you need to use a higher target environment which supports iterables, such as ES6 for example:

{
  "compilerOptions": {
    // Files
    "rootDir": "src",
    "outDir": "dist",
    // Syntax
    "lib": ["ES2022"],
    "target": "ES6",
    // Modules
    "moduleResolution": "Node16",
    "module": "NodeNext",
    // Type Checking Behaviour
    "strict": true
  }
}

Alternative:

TypeScript will downlevel your code based on your defined "target" to support older JavaScript runtimes that lack built-in iterables. You can enable the downlevelIteration option to ensure compatibility with both legacy and modern platforms. This option generates a helper function that checks if the modern iteration is possible. If it is not supported, the helper function falls back to a legacy iteration, such as index-based iteration.

{
  "compilerOptions": {
    // Files
    "rootDir": "src",
    "outDir": "dist",
    // Syntax
    "lib": ["ES2022"],
    "target": "ES5",
    "downlevelIteration": true,
    // Modules
    "moduleResolution": "Node16",
    "module": "NodeNext",
    // Type Checking Behaviour
    "strict": true
  }
}

TS2809

Declaration or statement expected. This '=' follows a block of statements, so if you intended to write a destructuring assignment, you might need to wrap the whole assignment in parentheses.

Broken Code ❌

function sum(a: number, b: number) {
  console.log(a + b);
  return {a, b};
}
 
{a, b} = sum(1000, 70);

Fixed Code ✔️

This error occurs because the compiler interprets { a, b } as a block of statements rather than an object literal for destructuring. Add a const keyword so that the compiler recognizes it as an expression:

function sum(a: number, b: number) {
  console.log(a + b);
  return { a, b };
}
 
const { a, b } = sum(1000, 70);

TS2813

Class declaration cannot implement overload list for 'MyClass'.

Broken Code ❌

class MyClass {}
 
function MyClass(): void {}

Function declarations get hoisted, so you cannot give your class the name of your function. Renaming your class solves the issue:

Fixed Code ✔️

class MyClassWithAnotherName {}
 
function MyClass(): void {}

TS2814

Function with bodies can only merge with classes that are ambient.

Broken Code ❌

class MyClass {}
 
function MyClass(): void {}

Your function cannot be named after your class, so you will have to rename your function:

Fixed Code ✔️

class MyClass {}
 
function MyFunctionWithAnotherName(): void {}

Alternatively you can declare an ambient class which gets implemented by your function:

declare class MyClass {}
 
function MyClass(): void {}

TS2820

Type '"Topicks"' is not assignable to type 'keyof SearchResultStackParamList'. Did you mean '"Topics"'?

Broken Code ❌

<SearchResultStack.Screen
  name="Topicks"
  component={SearchTopicsTabScreen}
  initialParams={{ query }}
/>

Solution:

Correct the screen name ("Topicks") to match the expected type in SearchResultStackParamList.

Fixed Code ✔️

<SearchResultStack.Screen
  name="Topics"
  component={SearchTopicsTabScreen}
  initialParams={{ query }}
/>

TS2821

Import assertions are only supported when the --module option is set to esnext or nodenext.

Broken Code ❌

import accounts from './accounts.json' assert { type: 'json' };
 
console.log(accounts);

tsconfig.json

{
  "compilerOptions": {
    "module": "node16"
  }
}

Fixed Code ✔️

Make sure that "module" in your tsconfig.json is set to esnext or nodenext before using an import assertion.

tsconfig.json

{
  "compilerOptions": {
    "module": "nodenext"
  }
}

TS2823

Import attributes are only supported when the '--module' option is set to 'esnext', 'nodenext', or 'preserve'.

Broken Code ❌

import marketData from '../fixtures/2023-07-SHOP-USD.json' with { type: 'json' };

Solution:

Update your tsconfig.json file to set the --module option to esnext.

Fixed Code ✔️

{
  "compilerOptions": {
    "module": "esnext"
  }
}

This change enables support for import attributes.

TS2834

Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

Broken Code ❌

import MyClass from './MyClass';

Solution:

This error occurs because, with moduleResolution set to node16 or nodenext, TypeScript requires explicit file extensions in import paths for ECMAScript modules to ensure compatibility with Node.js's resolution mechanism. Add the explicit file extension to fix the import path.

Fixed Code ✔️

import MyClass from './MyClass.js';

TS2835

Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './RESTClient.js'?

Broken Code ❌

import { RESTClient } from './RESTClient';

Fixed Code ✔️

When using "moduleResolution": "node16" in your tsconfig.json, you have to add .js file extensions or /index.js suffixes in your import statements or dynamic import() calls.

import { RESTClient } from './RESTClient.js';

TS2845

This condition will always return 'false'.

Broken Code ❌

if (input === NaN) {
  // some logic
}

This error occurs because comparing a value directly to NaN using === will always return false. In JavaScript and TypeScript, NaN is not equal to itself.

Fixed Code ✔️

To check if a value is NaN, use Number.isNaN() instead:

if (Number.isNaN(input)) {
  // some logic
}

The Number.isNaN() method properly checks if the input is NaN, avoiding the issue with direct equality comparison.

TS2855

Class field position defined by the parent class is not accessible in the child class via super.

Broken Code ❌

class ChildClass extends ParentClass {
  get isShort() {
    return super.position === ExchangeOrderPosition.SHORT;
  }
}
 
class ParentClass {
  public readonly position: ExchangeOrderPosition;
}

Solution:

This TypeScript error occurs because while super can be used to call parent class methods, it cannot be directly used to access parent class fields. Use this to access the position property inherited from the parent class, rather than using super, which is intended for method invocation.

Fixed Code ✔️

class ChildClass extends ParentClass {
  get isShort() {
    return this.position === ExchangeOrderPosition.SHORT;
  }
}
 
class ParentClass {
  public readonly position: ExchangeOrderPosition;
}

TS2880

Import assertions have been replaced by import attributes. Use 'with' instead of 'assert'.

Broken Code ❌

import jsonData from './data.json' assert { type: 'json' };

This error occurs because import assertions have been replaced by import attributes in modern TypeScript versions (starting from v5.3).

Fixed Code ✔️

Use with { type: "json" } instead:

import jsonData from './data.json' with { type: 'json' };

TS4010

Type parameter 'T' of public static method from exported class has or is using private name 'StrategyState'.

Broken Code ❌

MyClass.mts

export class MyClass {
  public static printState<T extends State>(state: T) {
    console.log(state);
  }
}

State.mts

type State = {
  today: string;
  tomorrow: string;
};

Fixed Code ✔️

When using a type from another file, you have to make sure that it is exported and imported accordingly:

MyClass.mts

import { State } from './State.js';
 
export class MyClass {
  public static printState<T extends State>(state: T) {
    console.log(state);
  }
}

State.mts

export type State = {
  today: string;
  tomorrow: string;
};

TS4020

'extends' clause of exported class 'StrategyPOJO' has or is using private name 'Model'.

Broken Code ❌

const { Model } = require('objection');
 
class StrategyPOJO extends Model {
  static tableName = 'strategies';
  config: string | undefined;
  exchange: string | undefined;
  identifier: string | undefined;
  symbol: string | undefined;
}
 
export { StrategyPOJO };

Fixed Code ✔️

import { Model } from 'objection';
 
class StrategyPOJO extends Model {
  static tableName = 'strategies';
  config: string | undefined;
  exchange: string | undefined;
  identifier: string | undefined;
  symbol: string | undefined;
}
 
export { StrategyPOJO };

TS4023

Exported variable 'moduleA' has or is using name 'ClassA' from external module 'ClassA' but cannot be named.

Broken Code ❌

ClassA.ts

export default class ClassA {
  public method() {
    return true;
  }
}

ModuleB.ts

import ClassA from './ClassA';
var moduleB = {
  ClassA: ClassA,
};
export default moduleB;

ModuleA.ts

import moduleB from './ModuleB';
var moduleA = {
  moduleB: moduleB,
};
export default moduleA;

Solution:

The error occurs because the exported variable moduleA references ClassA indirectly through moduleB, and TypeScript needs to be able to name ClassA for type-checking purposes. Since ClassA is being exported as a default export, TypeScript cannot directly reference it without importing it.

To fix this, you need to explicitly import and export the ClassA type in your ModuleA.ts file. This ensures TypeScript can reference the ClassA type properly.

Fixed Code ✔️

ClassA.ts

export default class ClassA {
  public method() {
    return true;
  }
}

ModuleB.ts

import ClassA from './ClassA';
var moduleB = {
  ClassA: ClassA,
};
export default moduleB;

ModuleA.ts

import moduleB from './ModuleB';
import ClassA from './ClassA'; // Import ClassA to reference its type
 
var moduleA = {
  moduleB: moduleB,
};
 
export default moduleA;
export { ClassA }; // Export ClassA explicitly

TS4025

Exported variable 'App' has or is using private name 'FC'.

Broken Code ❌

import React from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

Fixed Code ✔️

When using an external type (like FC) you also have to make sure that it is imported:

import React, { FC } from 'react';
 
const App: FC = (): JSX.Element => {
  return <></>;
};

TS4031

Public property 'socket' of exported class has or is using private name 'ReconnectingWebSocket'.

Broken Code ❌

import ReconnectingWebSocket from 'reconnecting-websocket';
 
class MyClass {
  public socket: ReconnectingWebSocket | undefined;
}

Fixed Code ✔️

Employ the typeof keyword to use the type of your import:

import ReconnectingWebSocket from 'reconnecting-websocket';
 
class MyClass {
  public socket: typeof ReconnectingWebSocket | undefined;
}

TS4055

Return type of public method from exported class has or is using private name PortfolioOpenPositionSchema.

Broken Code ❌

const PortfolioOpenPositionSchema = z.object({
  averagePrice: z.number(),
  currentPrice: z.number(),
  frontend: z.string(),
  fxPpl: z.number(),
  initialFillDate: z.string(),
  maxBuy: z.number(),
  maxSell: z.number(),
  pieQuantity: z.number(),
  ppl: z.number(),
  quantity: z.number(),
  ticker: z.string(),
});
 
async getOpenPosition(ticker: string): Promise<PortfolioOpenPositionSchema>;

Solution:

Change the method's return type to use the exported type PortfolioOpenPosition instead of the non-exported schema object.

Fixed Code ✔️

const PortfolioOpenPositionSchema = z.object({
  averagePrice: z.number(),
  currentPrice: z.number(),
  frontend: z.string(),
  fxPpl: z.number(),
  initialFillDate: z.string(),
  maxBuy: z.number(),
  maxSell: z.number(),
  pieQuantity: z.number(),
  ppl: z.number(),
  quantity: z.number(),
  ticker: z.string(),
});
 
export type PortfolioOpenPosition = z.infer<typeof PortfolioOpenPositionSchema>;
 
async getOpenPosition(ticker: string): Promise<PortfolioOpenPosition>;

TS4060

Return type of exported function has or is using private name 'JSX'.

Broken Code ❌

function App(): JSX.Element {
  return <p>My App!</p>;
}
 
export default App;

Fixed Code ✔️

The global JSX namespace is declared in @types/react. You have to install the @types/react package to make use of it:

yarn add --dev @types/react

TS4063

Parameter 'config' of constructor from exported class has or is using private name 'DoubleMovingAverageConfig'.

Broken Code ❌

type DoubleMovingAverageConfig = {
  lastBuyPrice: string;
  lastSellPrice: string;
  warmUpCandles: number;
};
 
class DoubleMovingAverage extends Strategy {
  constructor(
    private setup: StrategySetup,
    private config?: DoubleMovingAverageConfig
  ) {}
}

Fixed Code ✔️

export type DoubleMovingAverageConfig = {
  lastBuyPrice: string;
  lastSellPrice: string;
  warmUpCandles: number;
};
 
class DoubleMovingAverage extends Strategy {
  constructor(
    private setup: StrategySetup,
    private config?: DoubleMovingAverageConfig
  ) {}
}

TS4075

Parameter 'event' of method from exported interface has or is using private name 'Strategy'.

Broken Code ❌

export interface Strategy<SpecificConfig extends StrategyConfig> {
  on(event: Strategy.TOPIC.TRADER_DELETE, listener: () => void): this;
}
 
export abstract class Strategy<SpecificConfig extends StrategyConfig> extends EventEmitter {
  static readonly TOPIC = {
    TRADER_DELETE: 'TRADER_DELETE',
  };
 
  // ...
}

Fixed Code ✔️

enum TOPIC {
  TRADER_DELETE = 'TRADER_DELETE',
}
 
export interface Strategy<SpecificConfig extends StrategyConfig> {
  on(event: TOPIC.TRADER_DELETE, listener: () => void): this;
}
 
export abstract class Strategy<SpecificConfig extends StrategyConfig> extends EventEmitter {
  static readonly TOPIC = TOPIC;
 
  // ...
}

TS4081

Exported type alias 'MyReturnType' has or is using private name 'getSdk'.

Broken Code ❌

index.ts

export type MyReturnType = ReturnType<typeof getSdk>;

getSdk.ts

function getSdk() {}

Fixed Code ✔️

The getSdk is identified to be private because it is not exported. If we export the getSdk function, we won't have any more problems:

index.ts

import { getSdk } from './getSdk';
 
export type MyReturnType = ReturnType<typeof getSdk>;

getSdk.ts

export function getSdk() {}

TS4104

The type 'readonly [1, 2, 3]' is 'readonly' and cannot be assigned to the mutable type '[1, 2, 3]'.

Broken Code ❌

const array: [1, 2, 3] = [1, 2, 3] as const;

Fixed Code ✔️

Using a const assertion makes your array immutable, so you have to use the readonly modifier for its type:

const array: readonly [1, 2, 3] = [1, 2, 3] as const;

Alternative:

const array: Readonly<[1, 2, 3]> = [1, 2, 3] as const;

Alternative #2:

const array: ReadonlyArray<number> = [1, 2, 3] as const;

TS4111

Property 'BUCKET' comes from an index signature, so it must be accessed with ['BUCKET'].

Broken Code ❌

const env: { [`SHOP_${number}_URL`]: string } = {
  SHOP_123_URL: '',
};

Solution:

To resolve this, ensure that you access properties defined by an index signature using the bracket notation.

Fixed Code ✔️

const env: { [key: string]: string } = {
  [`SHOP_123_URL`]: '',
};

TS4112

This member cannot have an 'override' modifier because its containing class does not extend another class.

Broken Code ❌

class Cat {
  override makeNoise(): string {
    return 'Meow!';
  }
}

Fixed Code ✔️

class Cat {
  makeNoise(): string {
    return 'Meow!';
  }
}

TS4113

This member cannot have an 'override' modifier because it is not declared in the base class 'MyBaseClass'.

Broken Code ❌

class MyBaseClass {
  sayHello(): string {
    return 'Hello!';
  }
}
 
class MyDerivedClass extends MyBaseClass {
  override sayWelcome(): string {
    return 'Welcome!';
  }
}

Fixed Code ✔️

You can only override functions in our derived class when those exist in our base class. We can solve the error by overwriting an existing function:

class MyBaseClass {
  sayHello(): string {
    return 'Hello!';
  }
}
 
class MyDerivedClass extends MyBaseClass {
  override sayHello(): string {
    return 'Welcome!';
  }
}

Depending on our use case, we can also remove the override modifier:

class MyBaseClass {
  sayHello(): string {
    return 'Hello!';
  }
}
 
class MyDerivedClass extends MyBaseClass {
  sayWelcome(): string {
    return 'Welcome!';
  }
}

TS4114

This member must have an 'override' modifier because it overrides a member in the base class 'MyBaseClass'.

Broken Code ❌

class MyBaseClass {
  sayHello(): string {
    return 'Hello!';
  }
}
 
class MyDerivedClass extends MyBaseClass {
  sayHello(): string {
    return 'Welcome!';
  }
}

Fixed Code ✔️

The error pops up when "noImplicitOverride" is set to true in your "tsconfig.json" file, and you don't use the override modifier when overwriting a function from your base class. You can fix this by setting "noImplicitOverride" to false (not recommended) or using the override modifier (preferred solution):

class MyBaseClass {
  sayHello(): string {
    return 'Hello!';
  }
}
 
class MyDerivedClass extends MyBaseClass {
  override sayHello(): string {
    return 'Welcome!';
  }
}

TS4115

This parameter property must have an 'override' modifier because it overrides a member in base class 'MovingAverage'.

Broken Code ❌

class MovingAverage {
  constructor(protected readonly length: number) {}
}
 
class MyStrategy extends MovingAverage {
  // TS4115
  constructor(protected readonly length: number) {
    super(length);
  }
}

This error occurs because you're using a parameter property (a property declared directly in the constructor) to override a property from the base class, but you haven't marked it with the override modifier.

Fixed Code ✔️

When using parameter properties to override a property from a parent class, you must explicitly use the override keyword to make your intent clear to the compiler. This ensures safe refactoring and helps catch accidental mismatches in the base class.

class MovingAverage {
  constructor(protected readonly length: number) {}
}
 
class MyStrategy extends MovingAverage {
  constructor(protected override readonly length: number) {
    super(length);
  }
}

TS5023

Unknown compiler option '-c'.

Broken Code ❌

npx tsc -c mytsconfig.json

Fixed Code ✔️

If you want to point the TypeScript compiler to a different configuration, you have to use the --project flag (see all tsc CLI options):

npx tsc --project mytsconfig.json

TS5024

Compiler option 'lib' requires a value of type string.

Broken Code ❌

{
  "compilerOptions": {
    "lib": [6],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

Fixed Code ✔️

You have to define a valid set of high level libraries (such as "es6") that are available in your runtime:

{
  "compilerOptions": {
    "lib": ["es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

TS5025

Unknown compiler option '--no-emit'. Did you mean 'noEmit'?

Broken Code ❌

tsc --no-emit

Fixed Code ✔️

Use camel case writing:

tsc --noEmit

TS5042

Option 'project' cannot be mixed with source files on a command line.

Broken Code ❌

npx tsc -p tsconfig.strict.json src/main.ts

Fixed Code ✔️

If you're using the -p / --project option, it's not possible to directly pass a source file as an argument to the TypeScript compiler. If you want to specify the files to be compiled while using the project option from the command line interface (CLI), you need to add the desired files to the include section of your TypeScript project configuration:

tsconfig.strict.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "outDir": "dist"
  },
  "extends": "@tstv/tsconfig-common/tsconfig.json",
  "include": ["src/main.ts"]
}

TS5054

A 'tsconfig.json' file is already defined at: 'C:/dev/bennycode/ts-node-starter/tsconfig.json'.

Broken Code ❌

npx tsc --init

Fixed Code ✔️

You cannot initialize a new TypeScript compiler configuration when there is one already present. You have to delete the existing file first.

TS5055

Cannot write file because it would overwrite input file. Adding a tsconfig.json file will help organize projects that contain both TypeScript and JavaScript files.

Broken Code ❌

tsc mycode.js --allowJs

Fixed Code ✔️

tsc mycode.js --allowJs --outDir dist

Alternatively, you can also skip compiling code (if you just want to check the types of your code):

tsc mycode.js --allowJs --noEmit

TS5058

The specified path does not exist: 'test.json'.

Broken Code ❌

npx tsc --project test.json

Fixed Code ✔️

You probably don't have a TS config named test.json. Try to load tsconfig.json:

npx tsc --project tsconfig.json

TS5069

Option 'declarationMap' cannot be specified without specifying option 'declaration' or option 'composite'.

Broken Code ❌

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "declarationMap": true
  }
}

Fixed Code ✔️

You have to activate the "declaration" property before you can activate "declarationMap":

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true
  }
}

TS5070

Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy.

Broken Code ❌

{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "resolveJsonModule": true,
    "target": "es6"
  }
}

Fixed Code ✔️

Just define the "moduleResolution" property and set it to "node":

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "es6"
  }
}

TS5083

Cannot read file 'base.json'.

Broken Code ❌

{
  "extends": "./base.json",
  "compilerOptions": {
    "lib": ["dom", "es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src",
    "target": "es6"
  }
}

Fixed Code ✔️

Your TS config is extending another config (called base.json) which cannot be found. Make sure that this file (base.json) exists or remove your extends property.

TS5087

A labeled tuple element is declared as rest with a '...' before the name, rather than before the type.

Broken Code ❌

type Operation = "+" | "-";
 
type CalcInput = [operation: Operation, numbers: ...number[]];

Fixed Code ✔️

We have to move the rest operator to the label name:

type CalcInput = [operation: Operation, ...numbers: number[]];

TS5093

Compiler option '--verbose' may only be used with '--build'.

Broken Code ❌

Attempting to use --verbose without --build:

tsc --verbose

Solution:

Use the --verbose option together with the --build option, which is used for incremental builds.

Fixed Code ✔️

tsc --build --verbose

TS5095

Option 'bundler' can only be used when 'module' is set to 'preserve' or to 'es2015' or later.

Broken Code ❌

{
  "compilerOptions": {
    "module": "CommonJS",
    "bundler": true
  }
}

Solution:

Change the module option to es2015 or later, or to preserve to use the bundler option.

Fixed Code ✔️

{
  "compilerOptions": {
    "module": "es2015",
    "bundler": true
  }
}

TS5097

An import path can only end with a .ts extension when allowImportingTsExtensions is enabled.

Broken Code ❌

import { getDistanceReport } from './getDistanceReport.ts';

Solution:

Enable allowImportingTsExtensions in your tsconfig.json file.

Fixed Code ✔️

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["coverage", "dist", "node_modules"]
}

TS5101

Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error. Use 'verbatimModuleSyntax' instead.

tsconfig.json

{
  "compilerOptions": {
    "importsNotUsedAsValues": "error"
  }
}

Fixed Code ✔️

The compiler option importsNotUsedAsValues is not recommended when using TypeScript 5 and above, so you have to remove it from your tsconfig.json file:

tsconfig.json

{
  "compilerOptions": {}
}

TS5110

Option 'module' must be set to 'Node16' when option 'moduleResolution' is set to 'Node16'.

Broken Code ❌

{
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "Node16"
  }
}

Solution:

Set the module option to Node16 to match the moduleResolution setting in your tsconfig.json.

Fixed Code ✔️

{
  "compilerOptions": {
    "module": "Node16",
    "moduleResolution": "Node16"
  }
}

TS6053

File '/typings/index.d.ts' not found.

Broken Code ❌

/// <reference path='/typings/index.d.ts' />

Fixed Code ✔️

Use relative paths when using Triple-Slash Directives:

/// <reference path='../../../typings/index.d.ts' />

TS6059

File 'server/package.json' is not under 'rootDir' 'server/src'. 'rootDir' is expected to contain all source files.

Broken Code ❌

import pkg from '../../../../package.json';

Fixed Code ✔️

When using require then we can access files outside the specified root folder for input files ("rootDir" in "tsconfig.json"):

const pkg = require('../../../../package.json');

An even better solution would be changing the "rootDir" in your "tsconfig.json", so that it includes the "package.json" file that you are trying to important. This may require you to also set "allowJs" to true in your "tsconfig.json".

TS6133

'c' is declared but its value is never read.

Broken Code ❌

function sum(a: number, b: number, c: number) {
  return a + b;
}

Fixed Code ✔️

The best way to fix it is prefixing the unused parameter with an underscore (_) as shown below or completely removing it:

function sum(a: number, b: number, _c: number) {
  return a + b;
}

'volume' is declared but its value is never read.

Broken Code ❌

test.ts

const closes = ohlc.map(([time, open, high, low, close, volume]) => close);

tsconfig.json

{
  "compilerOptions": {
    "noUnusedParameters": true
  }
}

Fixed Code ✔️

A workaround is to loosen the compiler config (not recommended, though):

tsconfig.json

{
  "compilerOptions": {
    "noUnusedParameters": false
  }
}

'b' is declared but its value is never read.

Broken Code ❌

test.ts

let b;

tsconfig.json

{
  "compilerOptions": {
    "noUnusedLocals": true
  }
}

Fixed Code ✔️

You can remove the unused variable from your code or disable the check for unused variables in your TypeScript compiler config:

tsconfig.json

{
  "compilerOptions": {
    "noUnusedLocals": false
  }
}

Video Tutorial

TS6138

Property 'lastName' is declared but its value is never read.

Broken Code ❌

User.ts

class User {
  constructor(
    private firstName: string,
    private lastName: string
  ) {}
 
  get fullName() {
    return this.firstName;
  }
}

Fixed Code ✔️

Simply make use of the lastName property:

User.ts

class User {
  constructor(
    private firstName: string,
    private lastName: string
  ) {}
 
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

TS6192

All imports in import declaration are unused.

Broken Code ❌

import { type BigSource, Big } from 'big.js';
 
console.log('Not using big.js API');

Fixed Code ✔️

When multiple imports from a package are not being used, you will receive error TS6192. You can easily fix it by removing the unused import statement:

console.log('Not using big.js API');

TS6196

'MyAbstractClass' is declared but never used.

Broken Code ❌

abstract class MyAbstractClass {
  abstract getResult(): boolean;
}

Fixed Code ✔️

You have three possibilities to fix the broken code:

Make use of MyAbstractClass in your application
Export MyAbstractClass
Set "noUnusedLocals" to false in your "tsconfig.json"

export abstract class MyAbstractClass {
  abstract getResult(): boolean;
}

TS6198

All destructured elements are unused.

Broken Code ❌

function returnSomething(): { low: number; high: number } {
  return {
    low: 10,
    high: 20,
  };
}
 
const { low: lowest, high: highest } = returnSomething();

Fixed Code ✔️

You have to make use of the destructured values in your application / code:

function returnSomething(): { low: number; high: number } {
  return {
    low: 10,
    high: 20,
  };
}
 
const { low: lowest, high: highest } = returnSomething();
 
console.log(lowest + highest);

TS6205

All type parameters are unused.

Broken Code ❌

function identity<T, U>(value: T): T {
  return value;
}

This error occurs because the type parameter U is declared but not used anywhere in the function definition.

Fixed Code ✔️

Remove the unused type parameter to resolve the error:

function identity<T>(value: T): T {
  return value;
}

Alternatively, if U is necessary for future implementation, you can use it properly in the function:

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

This approach ensures all declared type parameters are actively used in the function.

TS6234

TS6234: This expression is not callable because it is a get accessor. Did you mean to use it without '()'?

Broken Code ❌

if (this.isLong()) {
  return new Big(1).plus(this.toFactor(this.config.trailingPercentage)).mul(price);
}

Solution:

To correct this, remove the parentheses from isLong, allowing it to be accessed as a property.

Fixed Code ✔️

if (this.isLong) {
  return new Big(1).plus(this.toFactor(this.config.trailingPercentage)).mul(price);
}

TS6385

'parent' is deprecated.

Broken Code ❌

if (module.parent) {
  // some logic
}

Solution:

Use import.meta for checking module parents in modern JavaScript environments.

Fixed Code ✔️

if (import.meta.url) {
  // some logic
}

TS6387

The signature (from: number, length?: number | undefined): string of error.substr is deprecated.

Broken Code ❌

function parseErrorCode(error: string): number {
  return parseInt(error.substr(2, 4).trim(), 10);
}
 
console.log(parseErrorCode('TS12345')); // "1234"

Fixed Code ✔️

Use the slice method instead of substr, but be careful about the supplied parameters as the signature is slightly different:

function parseErrorCode(error: string): number {
  return parseInt(error.slice(2, 6).trim(), 10);
}
 
console.log(parseErrorCode('TS12345')); // "1234"

TS6504

File 'mycode.js' is a JavaScript file. Did you mean to enable the 'allowJs' option?

Broken Code ❌

tsc mycode.js

Fixed Code ✔️

You have to enable the "allowJS" flag in your "tsconfig.json" file:

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true
  }
}

Alternatively, you can enable it through the TypeScript Compiler CLI:

tsc mycode.js --allowJs

TS7005

Variable 'HistoryOrderDataPageSchema' implicitly has an 'any' type.

Broken Code ❌

const HistoryOrderDataPageSchema<T> = z.object({
  items: z.array(HistoryOrderDataSchema),
  nextPagePath: z.union([z.string(), z.null()]),
});

Solution:

Define the type parameter T correctly by making HistoryOrderDataPageSchema a function or using a generic type annotation:

Fixed Code ✔️

const HistoryOrderDataPageSchema = <T>() =>
  z.object({
    items: z.array(HistoryOrderDataSchema<T>()),
    nextPagePath: z.union([z.string(), z.null()]),
  });

TS7006

Parameter 'person' implicitly has an 'any' type.

Broken Code ❌

main.ts

function greeter(person) {
  return `Hello, ${person}`;
}

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true
  }
}

Fixed Code ✔️

You have to define the type for the argument named person:

main.ts

function greeter(person: string) {
  return `Hello, ${person}`;
}

Alternative, but not recommend:

Set "noImplicitAny" to false in your "tsconfig.json"

TS7008

Member 'name' implicitly has an 'any' type.

Broken Code ❌

abstract class Person {
  accessor name;
}

Fixed Code ✔️

To fix the problem, you can initialize the class member so that TypeScript can infer the type:

abstract class Person {
  accessor name = 'unknown';
}

Alternatively, you can annotate the type:

abstract class Person {
  accessor name: string;
}

TS7009

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.

Broken Code ❌

export function getPromise(): Promise<void> {
  return new Promise.resolve();
}

Fixed Code ✔️

The resolve function of a Promise is not a constructor. You can use the new keyword only with constructors, so the new keyword has to be removed in order to fix the code:

export function getPromise(): Promise<void> {
  return Promise.resolve();
}

Alternatively, you can make use of the constructor:

export function getPromise(): Promise<void> {
  return new Promise((resolve) => {
    resolve();
  });
}

TS7010

'sum', which lacks return-type annotation, implicitly has an 'any' return type.

Broken Code ❌

namespace MyModule {
  export function sum(a: number, b: number);
}

Fixed Code ✔️

You have to add a return-type annotation and preferably a function implementation:

namespace MyModule {
  export function sum(a: number, b: number): number {
    return a + b;
  }
}

TS7015

Element implicitly has an 'any' type because index expression is not of type 'number'.

Broken Code ❌

const users = ['Anna', 'Benny', 'Clara'];
 
function returnUser(id: string | number) {
  return users[id];
}

This error occurs because TypeScript cannot guarantee that the index expression (id) is a valid key of the user object, and it infers the return type as any.

Fixed Code ✔️

Arrays can be accessed with numerical indices, thus you can use type number:

const users = ['Anna', 'Benny', 'Clara'];
 
function returnUser(id: number) {
  return users[id];
}

TS7016

Could not find a declaration file for module 'uuidjs'.

Broken Code ❌

import UUID = require('uuidjs');

Fixed Code ✔️

Solution 1

The problem shows that uuidjs is a plain JavaScript module and doesn't ship with TypeScript declaration files (.d.ts). That's why we have to use the CommonJS import syntax to import this module in a Node.js environment:

main.ts

const UUID = require('uuidjs');

Solution 2

A proper fix would be to have a uuidjs.d.ts as part of uuidjs (see GitHub issue).

Example:

uuidjs.d.ts

declare class UUID {
  static generate(): string;
}

main.ts

import UUID from 'uuidjs';
const id = UUID.generate();

Solution 3

If external typings are available in the DefinitelyTyped repository, then you can also install external declarations from there:

npm i --save-dev @types/uuidjs

Solution 4

If there are no declarations available and you want to use the module (in this case uuidjs) with standard import syntax (not CommonJS), then you can create a shorthand ambient module declaration by creating a "*.d.ts" file and writing the following into it:

types.d.ts

declare module 'uuidjs';

Video Tutorial

TS7017

Element implicitly has an 'any' type because type '{}' has no index signature.

Broken Code ❌

const recipients = {};

Fixed Code ✔️

You have to define the type for indexing your object properties (object["index"]):

const recipients: { [index: string]: number } = {};

The name of the index can be freely chosen:

const recipients: { [myKey: string]: number } = {};

How to fix such errors in interfaces:

interface Recipients {
  [index: string]: number;
}

Alternative, but not recommend:

Set "noImplicitAny" to false in your "tsconfig.json"

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.

Broken Code ❌

global.client = new APIClient(APIClient.URL_DEMO, 'global-demo-api-key');

Fixed Code ✔️

declare global {
  var client: APIClient;
}
 
global.client = new APIClient(APIClient.URL_DEMO, 'global-demo-api-key');

Source: globalThis property access errors

Video Tutorial

TS7022

'window' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

Broken Code ❌

var window = window || null;

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2017"]
  }
}

Fixed Code ✔️

The above error can occur when TypeScript doesn't know about the window interface. Make sure to add "dom" to your list of known runtime libraries in your compiler options:

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es2017"]
  }
}

TS7023

'fibonacci' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.

Broken Code ❌

function fibonacci(n) {
  return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}

Fixed Code ✔️

To avoid the implicit typing of any for the return type, you have to add a return type annotation:

function fibonacci(n): number {
  return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}

TS7026

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

Broken Code ❌

function App() {
  return <p>My App!</p>;
}
 
export default App;

Fixed Code ✔️

The global JSX namespace is declared in @types/react. You have to install the @types/react package to make use of it:

yarn add --dev @types/react

TS7027

Unreachable code detected.

Broken Code ❌

process.exit(0);
console.log('Hello, World!');

Fixed Code ✔️

Your code cannot print text to the standard output when your program is told to exit beforehand, so you have to remove the call to exit or place it at a later point in time:

console.log('Hello, World!');
process.exit(0);

TS7029

Fallthrough case in switch.

Broken Code ❌

export function f(x: unknown) {
  switch (true) {
    case typeof x === 'string':
      // 'x' is a 'string' here
      console.log(x.toUpperCase());
    // falls through...
    case Array.isArray(x):
      // 'x' is a 'string | any[]' here.
      console.log(x.length);
    // falls through...
    default:
    // 'x' is 'unknown' here.
    // ...
  }
}

Solution:

To address the fallthrough warning in a TypeScript switch statement, you can explicitly use the break statement.

Fixed Code ✔️

export function f(x: unknown) {
  switch (true) {
    case typeof x === 'string':
      // 'x' is a 'string' here
      console.log(x.toUpperCase());
      break; // Properly terminate the case
    case Array.isArray(x):
      // 'x' is a 'string | any[]' here.
      console.log(x.length);
      break; // Properly terminate the case
    default:
      // 'x' is 'unknown' here.
      // Additional logic can be added here
      break; // Properly terminate the default case
  }
}

TS7030

Not all code paths return a value.

Broken Code ❌

function getFlightType(type: 1 | 2) {
  if (type === 1) {
    return 'Return trip';
  }
}

Fixed Code ✔️

TypeScript reminds us that we forgot to return a value in case our if-condition doesn't match. We can solve this problem in many ways.

Always return a value:

function getFlightType(type: 1 | 2) {
  if (type === 1) {
    return 'Return trip';
  }
  return 'One way';
}

Add general else:

function getFlightType(type: 1 | 2) {
  if (type === 1) {
    return 'Return trip';
  } else {
    return 'One way';
  }
}

Handle all cases:

function getFlightType(type: 1 | 2) {
  switch (type) {
    case 1:
      return 'Return trip';
    case 2:
      return 'One way';
  }
}

Add default case:

function getFlightType(type: 1 | 2) {
  switch (type) {
    case 1:
      return 'Return trip';
    default:
      return 'One way';
  }
}

Define that the return type can be void:

function getFlightType(type: 1 | 2): string | void {
  if (type === 1) {
    return 'Return trip';
  }
}

Video Tutorial

TS7031

Binding element 'age' implicitly has an 'any' type.

Broken Code ❌

export function printAge({ age }): void {
  console.log(age);
}

Fixed Code ✔️

TypeScript complains because it doesn't know the type of the argument that we are destructuring. That's why it sets all its properties to the type of any. To prevent that we have to define a type for the parameter of the printAge function:

type Person = {
  age: number;
  name: string;
};
 
export function printAge({ age }: Person): void {
  console.log(age);
}

TS7034

Variable 'expectations' implicitly has type 'any[]' in some locations where its type cannot be determined.

Broken Code ❌

const expectations = [];

Fixed Code ✔️

An array can collect values of different types, so we have to tell TypeScript which types we want to collect:

const expectations: string[] = [];

If we want to specify multiple types, we have to define a union type:

const expectations: (string | number)[] = [];
expectations.push('1');
expectations.push(2);

Alternative #1:

Create a type alias and provide a type annotation for the expectations constant:

type ArrayInput = string | number;
const expectations: ArrayInput[] = [];
expectations.push('1');
expectations.push(2);

Alternative #2:

Use concrete values to initialize the expectations array, so TypeScript can infer the array type for you:

const expectations = [-1, '0'];
expectations.push('1');
expectations.push(2);

Unrecommended solution:

Set "noImplicitAny" to false in your "tsconfig.json"

TS7038

A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

Broken Code ❌

import * as request from 'supertest';

Solution:

Change the import statement to use default import syntax to properly use the 'supertest' module.

Fixed Code ✔️

import request from 'supertest';

TS7041

The containing arrow function captures the global value of 'this'.

Broken Code ❌

const myObject = {
  name: 'Benny',
  myMethod: () => {
    return this.name;
  },
};

Fixed Code ✔️

Using this is not allowed in arrow functions (source) because arrow functions aren't made to work with call, apply and/or bind methods (source). We have to replace our arrow function with an anonymous function declaration to prevent that our this context gets captured:

const myObject = {
  name: 'Benny',
  myMethod: function () {
    return this.name;
  },
};

Since ECMAScript 2015 (ES6) this can be shortened (Object Literal Property Value Shorthand) to:

const myObject = {
  name: 'Benny',
  myMethod() {
    return this.name;
  },
};

TS7044

Parameter 'a' implicitly has an 'any' type, but a better type may be inferred from usage.

Broken Code ❌

const multiply = (a, b) => a * b;

Fixed Code ✔️

From the body of the arrow function expression, TypeScript can see by the * that a and b may be of type number:

const multiply = (a: number, b: number) => a * b;

TS7053

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Person'. No index signature with a parameter of type 'string' was found on type 'Person'.

Broken Code ❌

interface Person {
  name: string;
}
 
function getValue(person: Person, key: string): string {
  return person[key];
}

The problem with the code listed above is that the parameter key can be any string but the Person interface only allows keys that relate to the properties of the Person interface (such as name).

Solution 1 ✔️

You can define an index signature for the Person interface which will allow all strings:

interface Person {
  [index: string]: string;
  name: string;
}
 
function getValue(person: Person, key: string): string {
  return person[key];
}

However, this is not recommend as it will allow you to access keys that are not defined (like age):

interface Person {
  [index: string]: string;
  name: string;
}
 
function getValue(person: Person, key: string): string {
  return person[key];
}
 
console.log(getValue({ name: 'Benny' }, 'age')); // returns `undefined`

Solution 2 ✔️

The better solution is using the keyof type operator which creates a literal string union for the possible keys of Person:

interface Person {
  name: string;
}
 
function getValue(person: Person, key: keyof Person): string {
  return person[key];
}

Solution 3 ✔️

You can also use type narrowing, to ensure that the key parameter is set to a string literal that is supported by the Person interface:

interface Person {
  name: string;
}
 
function getValue(person: Person, key: string): string {
  if (key === 'name') {
    return person[key];
  }
  return '';
}

Solution 4 ✔️

It is overly complex for this example, but another approach is to create an assertion function that ensures the key corresponds to a specific string literal that matches the Person interface:

interface Person {
  name: string;
}
 
function assertName(key: string): asserts key is 'name' {
  if (key !== 'name') {
    throw new Error(`Key is not "name".`);
  }
}
 
function getValue(person: Person, key: string): string {
  assertName(key);
  return person[key];
}

Solution 5 ✔️

Also overengineered, but you could solve the problem with a custom type guard:

interface Person {
  name: string;
}
 
function isName(key: string): key is 'name' {
  return key === 'name';
}
 
function getValue(person: Person, key: string): string {
  return isName(key) ? person[key] : '';
}

TS8020

JSDoc types can only be used inside documentation comments.

Broken Code ❌

function add(a: number, b: number, c: number?): number {
  return a + b;
}

Fixed Code ✔️

If you wanted to make c optional:

function add(a: number, b: number, c?: number): number {
  return a + b;
}

If you wanted to document c with JSDoc:

/**
 * @param a Initial quantity
 * @param b Amount to add
 * @param [c] Optional number to add
 */
function add(a: number, b: number, c: number): number {
  return a + b;
}

TS17000

JSX attributes must only be assigned a non-empty 'expression'.

Broken Code ❌

<Typography variant={}>Title</Typography>

Fixed Code ✔️

You can't use an empty expression ({}) in JSX attributes:

<Typography variant={'h2'}>Title</Typography>

TS17004

Cannot use JSX unless the '--jsx' flag is provided.

Broken Code ❌

function App() {
  return <p>My App!</p>;
}
 
export default App;

Fixed Code ✔️

You have to add a configuration for "jsx" to your "tsconfig.json" file:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

TS17008

JSX element 'Typography' has no corresponding closing tag.

Broken Code ❌

<Typography variant="h6">
  Welcome to TypeScript!

This error occurs because the JSX element <Typography> is not properly closed. In JSX, every tag must either be self-closing or have a matching closing tag.

Fixed Code ✔️

JSX syntax is strict about tag structure. If you open a tag like <Typography>, you must also close it with </Typography> unless it's self-closing (e.g. <input />, <br />). To fix the issue, add the missing closing tag:

<Typography variant="h6">Welcome to TypeScript!</Typography>

TS17009

'super' must be called before accessing 'this' in the constructor of a derived class.

Broken Code ❌

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  public name;
 
  constructor(name: string) {
    this.name = name;
    super();
  }
}

Fixed Code ✔️

abstract class Animal {
  abstract name: string;
}
 
class Dog extends Animal {
  public name;
 
  constructor(name: string) {
    super();
    this.name = name;
  }
}

TS17019

'?' at the end of a type is not valid TypeScript syntax. Did you mean to write 'URLSearchParams | undefined'?

Broken Code ❌

export async function* getPageGenerator<ItemType extends z.ZodTypeAny>(
  apiClient: AxiosInstance,
  url: string,
  itemSchema: ItemType,
  params: URLSearchParams? = new URLSearchParams()
) {}

Solution:

Correct the parameter type declaration by using | undefined for optional parameters.

Fixed Code ✔️

export async function* getPageGenerator<ItemType extends z.ZodTypeAny>(
  apiClient: AxiosInstance,
  url: string,
  itemSchema: ItemType,
  params: URLSearchParams | undefined = new URLSearchParams()
) {}

TS18003

No inputs were found in config file 'C:/dev/typescripttv/tsconfigs/packages/tsconfig-common/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["coverage","dist","node_modules"]'.

Solution:

Ensure that the include paths in your tsconfig.json correctly point to the TypeScript files you want to compile. Verify that the files exist in the specified directories and are not excluded by the exclude settings.

Fixed Code ✔️

{
  "compilerOptions": {},
  "include": ["src/**/*"],
  "exclude": ["coverage", "dist", "node_modules"]
}

TS18004

No value exists in scope for the shorthand property 'age'. Either declare one or provide an initializer.

Broken Code ❌

export function getPerson() {
  return {
    age,
    fistName: 'Benny',
    lastName: 'Neugebauer',
  };
}

Fixed Code ✔️

If you want to use the shorthand property name syntax to access the age property, you have to make sure that this variable is defined in the first place:

export function getPerson() {
  const age = 34;
  return {
    age,
    fistName: 'Benny',
    lastName: 'Neugebauer',
  };
}

Alternatively, you can avoid using the shorthand property name syntax:

export function getPerson() {
  return {
    age: 34,
    fistName: 'Benny',
    lastName: 'Neugebauer',
  };
}

TS18016

Private identifiers are not allowed outside class bodies.

Broken Code ❌

interface Person {
  #age: number;
}

Fixed Code ✔️

Private properties can only be used in classes but not in interfaces. We therefore need to convert the interface into a class in order to be able to compile the code:

class Person {
  #age: number;
}

TS18026

'#!' can only be used at the start of a file.

Broken Code ❌

console.log('Hello, World!');
 
#!/usr/bin/env node

This error occurs because the #! (shebang) syntax, used to indicate that a file is an executable script, must appear at the very beginning of the file.

Fixed Code ✔️

To fix this, place the #! shebang at the top of the file before any other code:

#!/usr/bin/env node
 
console.log('Hello, World!');

TS18028

Private identifiers are only available when targeting ECMAScript 2015 and higher.

Broken Code ❌

export class MyConverter {
  #flatten: (numbers?: (number | number[])[]) => number[];
 
  constructor() {
    this.#flatten = (numbers) => {
      // Implementation of the flatten function
      return [];
    };
  }
}

Solution:

This TypeScript error occurs because private identifiers (#) are a feature introduced in ECMAScript 2015 (ES6) and later. To use private identifiers, you need to ensure that your TypeScript configuration targets at least ES6.

Fixed Code ✔️

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["coverage", "dist", "node_modules"]
}

TS18046

'error' is of type 'unknown'.

Broken Code ❌

async function test() {
  try {
    await Promise.reject(new Error('This is a test'));
  } catch (error: unknown) {
    console.error(error.message);
  }
}
 
test();

Fixed Code ✔️

If you set the useUnknownInCatchVariables option to true in your tsconfig.json file, you may encounter the TS18046 error.

Enabling the useUnknownInCatchVariables feature causes the error within a catch clause to be treated as the unknown type instead of any. As a result, you will need to incorporate a type guard or an assertion function to access properties on an object of type unknown:

async function test() {
  try {
    await Promise.reject(new Error('This is a test'));
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.error(error.message);
    }
  }
}
 
test();

TS18047

'user' is possibly 'null'.

Broken Code ❌

function logName(user: unknown) {
  if (typeof user === 'object') {
    console.log(user.props.name);
  }
}

Solution:

This TypeScript error occurs because typeof user === "object" does not exclude the possibility of user being null, which is also considered an object in TypeScript/JavaScript.

Add an additional check to ensure that user is not null before accessing its properties.

Fixed Code ✔️

function logName(user: unknown) {
  if (user !== null && typeof user === 'object') {
    console.log((user as any).props.name);
  }
}

TS18048

'text' is possibly 'undefined'.

Broken Code ❌

function getShortenedText(text?: string): string {
  return text.slice(0, 5);
}

Fixed Code ✔️

If the text parameter is optional, it can potentially be of type unknown. When the type is unknown, accessing methods like Array.slice is not possible.

To solve this error, we need to employ a type guard to ensure that text is of type string:

function getShortenedText(text?: string): string {
  if (typeof text === 'string') {
    return text.slice(0, 5);
  }
  return '';
}

Note: We also need to employ a default return value to maintain the function return type of string.

TS18049

'match' is possibly 'null' or 'undefined'.

Broken Code ❌

const team_slug = owner[0];
console.log('Responsible Team:', team_slug);
 
const regex = /@([^/]+)/;
const match = team_slug?.match(regex);
 
const org = match[1];

This error occurs because match can return null if no match is found, and accessing match[1] would result in a runtime error if null.

Fixed Code ✔️

You can fix this by safely checking if match is not null before trying to access its values:

const team_slug = owner[0];
console.log('Responsible Team:', team_slug);
 
const regex = /@([^/]+)/;
const match = team_slug?.match(regex);
 
if (match) {
  const org = match[1];
  console.log('Organization:', org);
} else {
  console.log('No match found.');
}

TS18052

Non-abstract class MyExtendedClass does not implement all abstract members of `MyBaseClass.

Broken Code ❌

abstract class MyBaseClass {
  myVariable: string;
  abstract logMyVariable: () => void;
}
 
export class MyExtendedClass extends MyBaseClass {}

Fixed Code ✔️

You have to implement all abstract members of MyBaseClass:

abstract class MyBaseClass {
  myVariable: string;
  abstract logMyVariable: () => void;
}
 
export class MyExtendedClass extends MyBaseClass {
  logMyVariable = () => {
    console.log(this.myVariable);
  };
}

TS71002

"fontSans" is not a valid Next.js entry export value.

Broken Code ❌

import type { Metadata } from 'next';
import { Inter as FontSans } from 'next/font/google';
 
export const fontSans = FontSans({
  subsets: ['latin'],
  variable: '--font-sans',
});

Fixed Code ✔️

If you don't need the constant in another file, simply remove it's export statement:

import type { Metadata } from 'next';
import { Inter as FontSans } from 'next/font/google';
 
const fontSans = FontSans({
  subsets: ['latin'],
  variable: '--font-sans',
});

TS80001

File is a CommonJS module; it may be converted to an ES module.

Broken Code ❌

const toc = require('markdown-toc');

Solution:

Changing require to import updates the module syntax to ES modules, which are more compatible with modern JavaScript environments and tooling.

Fixed Code ✔️

import toc from 'markdown-toc';

TS80005

'require' call may be converted to an import.

Broken Code ❌

const pkg = require('../package.json');

Fixed Code ✔️

import pkg from '../package.json';