TypeScript errors and how to fix them

Common Errors

Below you find a list of common TypeScript errors along with the buggy code and its fixed version.

If you’re interested in more TypeScript troubleshooting and best practices, check out our free TypeScript tutorials on YouTube. 📺 You can also follow TypeScript TV on Twitter to stay up to date. 🐤

1. 1. TS1002
2. 2. TS1005
3. 3. TS1006
4. 4. TS1015
5. 5. TS1016
6. 6. TS1029
7. 7. TS1036
8. 8. TS1038
9. 9. TS1046
10. 10. TS1055
11. 11. TS1056
12. 12. TS1064
13. 13. TS1066
14. 14. TS1070
15. 15. TS1095
16. 16. TS1103
17. 17. TS1109
18. 18. TS1117
19. 19. TS1127
20. 20. TS1128
21. 21. TS1149
22. 22. TS1155
23. 23. TS1160
24. 24. TS1183
25. 25. TS1192
26. 26. TS1196
27. 27. TS1202
28. 28. TS1208
29. 29. TS1218
30. 30. TS1219
31. 31. TS1225
32. 32. TS1228
33. 33. TS1243
34. 34. TS1244
35. 35. TS1259
36. 36. TS1308
37. 37. TS1337
38. 38. TS1357
39. 39. TS1361
40. 40. TS1363
41. 41. TS1371
42. 42. TS1375
43. 43. TS1378
44. 44. TS1385
45. 45. TS1431
46. 46. TS1432
47. 47. TS1434
48. 48. TS1471
49. 49. TS2300
50. 50. TS2304
51. 51. TS2305
52. 52. TS2306
53. 53. TS2307
54. 54. TS2314
55. 55. TS2315
56. 56. TS2322
57. 57. TS2335
58. 58. TS2339
59. 59. TS2345
60. 60. TS2348
61. 61. TS2349
62. 62. TS2351
63. 63. TS2352
64. 64. TS2355
65. 65. TS2361
66. 66. TS2364
67. 67. TS2365
68. 68. TS2366
69. 69. TS2367
70. 70. TS2368
71. 71. TS2369
72. 72. TS2370
73. 73. TS2371
74. 74. TS2372
75. 75. TS2377
76. 76. TS2378
77. 77. TS2390
78. 78. TS2391
79. 79. TS2394
80. 80. TS2395
81. 81. TS2403
82. 82. TS2411
83. 83. TS2420
84. 84. TS2428
85. 85. TS2430
86. 86. TS2440
87. 87. TS2445
88. 88. TS2448
89. 89. TS2451
90. 90. TS2454
91. 91. TS2456
92. 92. TS2459
93. 93. TS2475
94. 94. TS2488
95. 95. TS2497
96. 96. TS2503
97. 97. TS2507
98. 98. TS2511
99. 99. TS2515
100. 100. TS2528
101. 101. TS2531
102. 102. TS2532
103. 103. TS2533
104. 104. TS2538
105. 105. TS2551
106. 106. TS2552
107. 107. TS2554
108. 108. TS2556
109. 109. TS2564
110. 110. TS2567
111. 111. TS2571
112. 112. TS2580
113. 113. TS2582
114. 114. TS2583
115. 115. TS2584
116. 116. TS2588
117. 117. TS2595
118. 118. TS2613
119. 119. TS2616
120. 120. TS2652
121. 121. TS2654
122. 122. TS2656
123. 123. TS2661
124. 124. TS2664
125. 125. TS2665
126. 126. TS2668
127. 127. TS2669
128. 128. TS2677
129. 129. TS2678
130. 130. TS2680
131. 131. TS2683
132. 132. TS2684
133. 133. TS2686
134. 134. TS2687
135. 135. TS2689
136. 136. TS2691
137. 137. TS2693
138. 138. TS2694
139. 139. TS2695
140. 140. TS2709
141. 141. TS2715
142. 142. TS2717
143. 143. TS2720
144. 144. TS2730
145. 145. TS2732
146. 146. TS2739
147. 147. TS2740
148. 148. TS2741
149. 149. TS2742
150. 150. TS2749
151. 151. TS2769
152. 152. TS2774
153. 153. TS2779
154. 154. TS2786
155. 155. TS2792
156. 156. TS2794
157. 157. TS2813
158. 158. TS2814
159. 159. TS4020
160. 160. TS4025
161. 161. TS4060
162. 162. TS4063
163. 163. TS4075
164. 164. TS4081
165. 165. TS4104
166. 166. TS4112
167. 167. TS4113
168. 168. TS4114
169. 169. TS5023
170. 170. TS5024
171. 171. TS5025
172. 172. TS5054
173. 173. TS5055
174. 174. TS5058
175. 175. TS5069
176. 176. TS5070
177. 177. TS5083
178. 178. TS6053
179. 179. TS6059
180. 180. TS6133
181. 181. TS6138
182. 182. TS6196
183. 183. TS6198
184. 184. TS6504
185. 185. TS7006
186. 186. TS7009
187. 187. TS7010
188. 188. TS7016
189. 189. TS7017
190. 190. TS7022
191. 191. TS7026
192. 192. TS7027
193. 193. TS7030
194. 194. TS7031
195. 195. TS7034
196. 196. TS7041
197. 197. TS7044
198. 198. TS7053
199. 199. TS8020
200. 200. TS17000
201. 201. TS17004
202. 202. TS17009
203. 203. TS18004
204. 204. TS18016
205. 205. TS80005

TS1002

error TS1002: Unterminated string literal.

Broken Code ❌

1

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

Fixed Code ✔️

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

1

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:

1
2

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:

1
2

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

error TS1005: ‘=’ expected.

Broken Code ❌

1
2
3
4

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

Fixed Code ✔️

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

1
2
3
4

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

Alternatively you can declare an interface:

1
2
3
4

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

error TS1005: ‘;’ expected.

Broken Code ❌

1
2
3

export function requireEnvs(name: string[]): Record<string, string> {
  const names = name.map(name => {[name]: requireEnv(name)});
}

Fixed Code ✔️

Use an implicit return:

1
2
3

export function requireEnvs(name: string[]): Record<string, string> {
  const names = name.map(name => ({[name]: requireEnv(name)}));
}

TS1006

error TS1006: A file cannot have a reference to itself.

Broken Code ❌

1

/// <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:

1

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

TS1015

error TS1015: Parameter cannot have question mark and initializer.

Broken Code ❌

1
2
3

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

Fixed Code ✔️

1
2
3

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

TS1016

error TS1016: A required parameter cannot follow an optional parameter.

Broken Code ❌

1
2
3

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:

1
2
3

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”:

1
2
3

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

You could also make middleName non-optional:

1
2
3

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:

1
2
3

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

TS1029

error TS1029: ‘public’ modifier must precede ‘abstract’ modifier.

Broken Code ❌

1
2
3

abstract class Animal {
  abstract public 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:

1
2
3

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

Solution 2:

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

1
2
3

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

Video Tutorial

TS1036

error TS1036: Statements are not allowed in ambient contexts.

Broken Code ❌

1
2
3
4
5

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:

1
2
3

declare global {
  function client(): APIClient;
}

If you don’t want client to be a function, you have to use thevar` keyword:

1
2
3

declare global {
  var client: APIClient;
}

TS1038

error TS1038: A ‘declare’ modifier cannot be used in an already ambient context.

Broken Code ❌

1
2
3

declare global {
  declare var REST_URL: string;
}

Fixed Code ✔️

1
2
3

declare global {
  var REST_URL: string;
}

TS1046

error TS1046: Top-level declarations in .d.ts files must start with either a ‘declare’ or ‘export’ modifier.

Broken Code ❌

1

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:

1

export const MAGIC_NUMBER = 1337;

TS1055

error 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 ❌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 ✔️

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.

Broken Code ❌

1
2
3
4
5
6
7
8

class User {
  constructor(private firstName: string, private lastName: string) {
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

1
2
3
4
5

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

Fixed Code ✔️

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

1
2
3
4
5

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

TS1064

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

Broken Code ❌

1
2
3

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

Fixed Code ✔️

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

1
2
3

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

TS1066

error TS1066: In ambient enum declarations member initializer must be constant expression.

Broken Code ❌

1
2
3
4
5

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

Fixed Code ✔️

Try to replace your enum declaration with a type:

1

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

TS1070

error TS1070: ‘private’ modifier cannot appear on a type member.

Broken Code ❌

1
2
3

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:

1
2
3

interface Animal {
  name: string;
}

Video Tutorial

TS1095

error TS1095: A ‘set’ accessor cannot have a return type annotation.

Broken Code ❌

1
2
3
4
5
6
7
8
9
10
11

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:

1
2
3
4
5
6
7
8
9
10
11

export class Person {
  private myName: string = 'unknown';

  get name(): string {
    return this.myName;
  }

  set name(newName: string) {
    this.myName = newName;
  }
}

TS1103

error TS1103: ‘for await’ loops are only allowed within async functions and at the top levels of modules.

Broken Code ❌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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);
  }
}

TS1109

error TS1109: Expression expected.

Broken Code ❌

1

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:

1
2
3
4

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

TS1117

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

Broken Code ❌

1
2
3
4

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

Fixed Code ✔️

We can only have one value per property:

1
2
3

const objectLiteral = {
  name: 'Benny'
};

TS1127

error TS1127: Invalid character.

Broken Code ❌

1

# My comment

Fixed Code ✔️

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

1

// My comment

TS1128

error TS1128: Declaration or statement expected.

Broken Code ❌

1

=

Fixed Code ✔️

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

1
2
3
4

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

TS1149

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:

1

import { BaseTestPage } from './baseTestPage';

File B:

1

import { BaseTestPage } from './BaseTestPage';

Fixed Code ✔️

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

File A:

1

import { BaseTestPage } from './BaseTestPage';

File B:

1

import { BaseTestPage } from './BaseTestPage';

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

1
2
3
4
5

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

TS1155

error TS1155: ‘const’ declarations must be initialized.

Broken Code ❌

1

const name: string;

Fixed Code ✔️

1

const name: string = 'Benny';

Alternatively you can define a block-scoped local variable:

1

let name: string;

TS1160

error TS1160: Unterminated template literal.

Broken Code ❌

1
2

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 `:

1
2

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.`;

TS1183

error TS1183: An implementation cannot be declared in ambient contexts.

Broken Code ❌

1
2
3

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:

1

export function logSomething(error: unknown): void;

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

TS1192

error TS1192: Module ‘json5‘ has no default export.

Broken Code ❌

1

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:

1
2
3
4
5

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

error TS1192: Module ‘.../logdown‘ has no default export.

Broken Code ❌

1
2
3
4
5

declare class Logdown {
  // ...
}

export = Logdown;

Fixed Code ✔️

1
2
3
4
5

declare class Logdown {
  // ...
}

export default Logdown;

error TS1192: ‘export *’ does not re-export a default.

Broken Code ❌

1
2

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

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

Fixed Code ✔️

1
2
3

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

TS1196

error TS1196: Catch clause variable type annotation must be ‘any’ or ‘unknown’ if specified.

Broken Code ❌

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 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

error 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 ❌

1

import sinon = require('sinon');

Fixed Code ✔️

1

import * as sinon from 'sinon';

TS1208

error 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 ❌

1
2
3
4
5

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

1
2
3

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:

1
2
3
4
5

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

export default {};

TS1218

error TS1218: Export assignment is not supported when ‘–module’ flag is ‘system’.

Broken Code ❌

1
2
3
4
5

class LRUCache {
  // ...
}

export = LRUCache;

Fixed Code ✔️

1
2
3

export class LRUCache {
  // ...
}

TS1219

error 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 ❌

1
2
3
4
5
6
7
8

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

error TS1225: Cannot find parameter ‘error‘.

Broken Code ❌

1
2
3

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

Fixed Code ✔️

A type predicate needs a parameter to validate:

1
2
3

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

TS1228

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

Broken Code ❌

1
2
3

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 ::

1
2
3

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

TS1243

error TS1243: ‘static’ modifier cannot be used with ‘abstract’ modifier.

Solution

Broken Code ❌

1
2
3

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

Your abstract class cannot define an abstract static function. You have to keep it static:

Fixed Code ✔️

1
2
3
4
5

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

error TS1243: ‘async’ modifier cannot be used with ‘abstract’ modifier.

Broken Code ❌

1

abstract async goto(): Promise<void>;

Fixed Code ✔️

1

abstract goto(): Promise<void>;

TS1244

error TS1244: Abstract methods can only appear within an abstract class.

Broken Code ❌

1
2
3

class Animal {
  abstract makeNoise(): string;
}

Fixed Code ✔️

1
2
3

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

TS1259

error TS1259: Module can only be default-imported using the ‘esModuleInterop’ flag

Broken Code ❌

1

import api from 'api';

1
2
3
4
5
6
7
8
9
10
11
12
13

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

Fixed Code ✔️

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  "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:

1

tsc main.ts --esModuleInterop

TS1308

error TS1308: ‘await’ expressions are only allowed within async functions and at the top levels of modules.ts.

Broken Code ❌

1
2
3
4
5

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:

1
2
3
4
5
6

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:

1
2
3
4
5

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

TS1337

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

Broken Code ❌

1
2
3

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

Fixed Code ✔️

1
2
3

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

Alternative:

1
2
3

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

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

Broken Code ❌

1
2
3
4
5
6
7

interface CustomError {
  [key: string | number]: string | number;
}

const error: CustomError = {
  401: 'Unauthorized',
};

Fixed Code ✔️

Solution with mapped object type:

1
2
3
4
5
6
7

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

const error: CustomError = {
  401: 'Unauthorized',
};

Alternative:

1
2
3
4
5
6
7
8
9
10
11

interface ErrorNumber {
  [key: number]: string | number;
}

interface ErrorString {
  [key: string]: string | number;
}

const error: ErrorNumber | ErrorString = {
  401: 'Unauthorized',
};

TS1357

error TS1357: An enum member name must be followed by a ‘,‘, ‘=‘, or ‘}‘.

Broken Code ❌

1
2
3

enum GameAction {
  RUN : 'RUN'
}

Fixed Code ✔️

1
2
3

enum GameAction {
  RUN = 'RUN'
}

TS1361

error TS1361: ‘Range‘ cannot be used as a value because it was imported using ‘import type’.

Broken Code ❌

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7
8
9
10

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

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

Broken Code ❌

1
2
3
4
5

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:

1
2
3
4
5
6

import type {MyPerson} from './MyPerson';
import type MyDog from './MyPerson';

export function printAge(personOrDog: MyPerson | MyDog) {
  console.log(personOrDog.age);
}

TS1371

error TS1371: This import is never used as a value and must use ‘import type’ because ‘importsNotUsedAsValues’ is set to ‘error’.

Broken Code ❌

1
2
3
4

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

1
2
3
4
5

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:

1
2
3
4
5

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:

1
2
3
4
5
6
7
8

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

error 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 ❌

1

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

Fixed Code ✔️

1
2
3

export {};

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

TS1378

error 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 ❌

1
2
3
4
5
6
7
8
9

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

Fixed Code ✔️

1
2
3
4
5
6
7
8
9

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

TS1385

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

Broken Code ❌

1

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

Fixed Code ✔️

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

1

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

TS1431

error 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 ❌

1
2
3
4
5
6
7
8
9
10

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:

1
2
3
4
5
6
7
8
9
10
11
12
13

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

error 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 ❌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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}`);
}

1
2
3
4
5
6
7

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

Fixed Code ✔️

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

1
2
3
4
5
6
7

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

TS1434

error TS1434: Unexpected keyword or identifier.

Broken Code ❌

1
2
3

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

Fixed Code ✔️

You have to remove the duplicate static keyword:

1
2
3

class MyClass {
  static ID: number = 1337;
}

TS1471

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 ❌

1

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

Fixed Code ✔️

Using a dynamic import:

1

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

TS2300

error TS2300: Duplicate identifier ‘name’.

Broken Code ❌

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

1
2
3
4

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

Fixed Code ✔️

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

1
2
3

const objectLiteral = {
  name: 'Sofia'
};

TS2304

error TS2304: Cannot find name ‘world’.

Broken Code ❌

1

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):

1
2
3
4
5

declare var world: {
  name: string;
};

console.log(world.name);

error TS2304: Cannot find name ‘Promise’

Broken Code ❌

1
2
3
4
5
6
7
8
9

// ...

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.

1

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

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

1
2
3
4
5
6
7
8
9
10
11

/// <reference path='es6-promise.d.ts' />

...

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

...

error TS2304: Cannot find name ‘Promise’

Broken Code ❌

1

const UUID = require('uuidjs');

Fixed Code ✔️

1

npm install @types/node --save-dev

error TS2304: Cannot find name ‘FC’.

Broken Code ❌

1
2
3
4
5

import React from 'react';

const App: FC = (): JSX.Element => {
  return <></>;
};

Fixed Code ✔️

1
2
3
4
5

import React, {FC} from 'react';

const App: FC = (): JSX.Element => {
  return <></>;
};

TS2305

error TS2305: Module ‘./sum‘ has no exported member ‘multiply‘.

Broken Code ❌

1
2
3

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

1
2
3

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:

1
2
3

import { sum } from './sum';

console.log(sum(1, 2));

TS2306

error TS2306: File ‘add.ts‘ is not a module.

Broken Code ❌

1
2
3

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

1
2
3

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:

1
2
3

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

Alternatively we can use a default export:

1
2
3

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):

1
2
3

import add from './add';

console.log(add(1000, 337));

TS2307

error 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:

1

import {EventEmitter} from 'events';

Fixed Code ✔️

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

1

npm install @types/node

More: Error TS2307: Cannot find module events

TS2314

error TS2314: Generic type ‘Omit‘ requires 2 type argument(s).

Broken Code ❌

1
2
3
4

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 (|):

1
2
3
4

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

TS2314: Generic type ‘ReadonlyArray ‘ requires 1 type argument(s).

Broken Code ❌

1

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:

1

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

TS2315

error TS2315: Type ‘CustomRequest‘ is not generic.

Broken Code ❌

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7
8
9

type CustomRequest<CustomType> = {
  url: string;
  data: CustomType;
}

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

TS2322

error TS2322: Type ‘string’ is not assignable to type ‘number’.

Broken Code ❌

1
2
3

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:

1
2
3

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

Video Tutorial

TS2335

error TS2335: ‘super’ can only be referenced in a derived class.

Broken Code ❌

1
2
3
4
5
6
7
8
9
10
11
12
13

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:

1
2
3
4
5
6
7
8
9
10
11
12
13

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

class Cat extends Animal {
  constructor() {
    super();
  }

  makeNoise(): string {
    return 'Meow!';
  }
}

TS2339

error TS2339: Property ‘width‘ does not exist on type ‘Shape‘.

Broken Code ❌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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;
  }
}

TS2339: Property ‘pop‘ does not exist on type ‘readonly [1, 2, 3]‘.

Broken Code ❌

1
2

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:

1
2

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

TS2345

error TS2345: Argument of type ‘number‘ is not assignable to parameter of type ‘TimerHandler‘.

Broken Code ❌

1
2
3
4
5

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:

1
2
3
4
5

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

setTimeout(() => add(1000, 337), 5000);

Video Tutorial

TS2348

error TS2348: Value of type ‘typeof BaseN’ is not callable. Did you mean to include ‘new’?

Broken Code ❌

1
2
3

import {BaseN} from 'js-combinatorics';

const iterator = BaseN([1, 2, 3], 2);

Fixed Code ✔️

1
2
3

import {BaseN} from 'js-combinatorics';

const iterator = new BaseN([1, 2, 3], 2);

TS2349

error TS2349: Cannot invoke an expression whose type lacks a call signature. Type ‘Promise‘ has no compatible call signatures.

Broken Code ❌

1
2
3

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

Fixed Code ✔️

1
2
3

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

TS2351

error TS2351: This expression is not constructable. Type ‘EMA‘ has no construct signatures.

Broken Code ❌

1
2
3
4
5
6
7

export class RSI {
  private readonly avgGain: MovingAverage;

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

1

export class EMA {}

Fixed Code ✔️

1
2
3
4
5
6
7

export class RSI {
  private readonly avgGain: MovingAverage;

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

TS2352

error 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 ❌

1
2
3
4
5
6
7
8
9

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:

1
2
3
4
5
6
7
8
9

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

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

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

1
2
3
4
5
6
7
8
9

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

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

TS2355

error TS2355: A function whose declared type is neither ‘void’ nor ‘any’ must return a value.

Broken Code ❌

1
2
3

getName(): string {

}

Fixed Code ✔️

1
2
3

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

TS2361

error TS2361: The right-hand side of an ‘in’ expression must not be a primitive.

Broken Code ❌

1
2
3
4
5

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:

1
2
3
4
5

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:

1
2
3

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

TS2364

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

Broken Code ❌

1

1 = 1

Fixed Code ✔️

Using a variable on the left-hand side assignment:

1

const a = 1;

TS2365

error TS2365: Operator ‘+’ cannot be applied to types ‘number’ and ‘object’.

Broken Code ❌

1
2
3

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):

1
2
3

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

TS2366

error TS2366: Function lacks ending return statement and return type does not include ‘undefined’.

Broken Code ❌

1
2
3
4
5
6
7
8

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:

1
2
3
4
5
6
7
8
9
10

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:

1
2
3
4
5
6
7
8
9
10

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

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

Broken Code ❌

1
2
3
4
5

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:

1
2
3
4
5

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

TS2368

error TS2368: Type parameter name cannot be ‘number’.

Broken Code ❌

1
2
3

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

Fixed Code ✔️

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

1
2
3

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

TS2369

error TS2369: A parameter property is only allowed in a constructor implementation.

Broken Code ❌