My App!
; 10 | } 11 | 12 | export default App; 13 | ``` 14 | 15 | ### Fixed Code ✔️ 16 | 17 | You have to add a configuration for "jsx" to your "tsconfig.json" file: 18 | 19 | 20 | {% codeblock lang:json tsconfig.json %} 21 | { 22 | "compilerOptions": { 23 | "jsx": "react" 24 | } 25 | } 26 | {% endcodeblock %} 27 | 28 | -------------------------------------------------------------------------------- /errors/includes/TS17xxx/TS17009.md: -------------------------------------------------------------------------------- 1 | ## TS17009 2 | 3 | > error TS17009: 'super' must be called before accessing 'this' in the constructor of a derived class. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | abstract class Animal { 9 | abstract name: string; 10 | } 11 | 12 | class Dog extends Animal { 13 | public name; 14 | 15 | constructor(name: string) { 16 | this.name = name; 17 | super(); 18 | } 19 | } 20 | ``` 21 | 22 | ### Fixed Code ✔️ 23 | 24 | 25 | {% codeblock lang:ts mark:9 %} 26 | abstract class Animal { 27 | abstract name: string; 28 | } 29 | 30 | class Dog extends Animal { 31 | public name; 32 | 33 | constructor(name: string) { 34 | super(); 35 | this.name = name; 36 | } 37 | } 38 | {% endcodeblock %} 39 | 40 | -------------------------------------------------------------------------------- /errors/includes/TS18xxx/TS18004.md: -------------------------------------------------------------------------------- 1 | ## TS18004 2 | 3 | > error TS18004: No value exists in scope for the shorthand property '`age`'. Either declare one or provide an initializer. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | export function getPerson() { 9 | return { 10 | age, 11 | fistName: 'Benny', 12 | lastName: 'Neugebauer', 13 | }; 14 | } 15 | ``` 16 | 17 | ### Fixed Code ✔️ 18 | 19 | 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: 20 | 21 | ```ts 22 | export function getPerson() { 23 | const age = 34; 24 | return { 25 | age, 26 | fistName: 'Benny', 27 | lastName: 'Neugebauer', 28 | }; 29 | } 30 | ``` 31 | 32 | Alternatively, you can avoid using the **shorthand property name syntax**: 33 | 34 | ```ts 35 | export function getPerson() { 36 | return { 37 | age: 34, 38 | fistName: 'Benny', 39 | lastName: 'Neugebauer', 40 | }; 41 | } 42 | ``` 43 | -------------------------------------------------------------------------------- /errors/includes/TS18xxx/TS18016.md: -------------------------------------------------------------------------------- 1 | ## TS18016 2 | 3 | > error TS18016: Private identifiers are not allowed outside class bodies. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | interface Person { 9 | #age: number; 10 | } 11 | ``` 12 | 13 | ### Fixed Code ✔️ 14 | 15 | 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: 16 | 17 | ```ts 18 | class Person { 19 | #age: number; 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /errors/includes/TS18xxx/TS18046.md: -------------------------------------------------------------------------------- 1 | ## TS18046 2 | 3 | > error TS18046: '`error`' is of type '`unknown`'. 4 | 5 | ### Broken Code ❌ 6 | 7 | 8 | {% codeblock mark:5 %} 9 | async function test() { 10 | try { 11 | await Promise.reject(new Error('This is a test')); 12 | } catch (error: unknown) { 13 | console.error(error.message); 14 | } 15 | } 16 | 17 | test(); 18 | {% endcodeblock %} 19 | 20 | 21 | ### Fixed Code ✔️ 22 | 23 | If you set the `useUnknownInCatchVariables` option to `true` in your `tsconfig.json` file, you may encounter the **TS18046** error. 24 | 25 | Enabling the [useUnknownInCatchVariables](https://www.typescriptlang.org/tsconfig#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](/glossary/index.html#Type-Guards) or an [assertion function](/glossary/index.html#Assertion-Functions) to access properties on an object of type `unknown`: 26 | 27 | ```ts 28 | async function test() { 29 | try { 30 | await Promise.reject(new Error('This is a test')); 31 | } catch (error: unknown) { 32 | if (error instanceof Error) { 33 | console.error(error.message); 34 | } 35 | } 36 | } 37 | 38 | test(); 39 | ``` 40 | -------------------------------------------------------------------------------- /errors/includes/TS18xxx/TS18048.md: -------------------------------------------------------------------------------- 1 | ## TS18048 2 | 3 | > error TS18048: '`text`' is possibly '`undefined`'. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | function getShortenedText(text?: string): string { 9 | return text.slice(0, 5); 10 | } 11 | ``` 12 | 13 | ### Fixed Code ✔️ 14 | 15 | If the `text` parameter is optional, it can potentially be of type `unknown`. When the type is `unknown`, accessing methods like [Array.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) is not possible. 16 | 17 | To solve this error, we need to employ a [type guard](/glossary/index.html#Type-Guards) to ensure that `text` is of type `string`: 18 | 19 | ```ts 20 | function getShortenedText(text?: string): string { 21 | if (typeof text === 'string') { 22 | return text.slice(0, 5); 23 | } 24 | return ''; 25 | } 26 | ``` 27 | 28 | **Note:** We also need to employ a default return value to maintain the function return type of `string`. 29 | -------------------------------------------------------------------------------- /errors/includes/TS1xxx/TS1002.md: -------------------------------------------------------------------------------- 1 | ## TS1002 2 | 3 | > error TS1002: Unterminated string literal. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | const text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr 9 | ``` 10 | 11 | ### Fixed Code ✔️ 12 | 13 | You have to close the **string literal** with an ending `'`: 14 | 15 | ```ts 16 | const text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr'; 17 | ``` 18 | 19 | If you want to support multiline text, then you would have to use **string concatenation**: 20 | 21 | ```ts 22 | const text = 23 | 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ' + 24 | 'sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'; 25 | ``` 26 | 27 | Another solution would be using a **[template literal](/glossary/index.html#Template-Literal)**: 28 | 29 | ```ts 30 | const text = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 31 | sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`; 32 | ``` 33 | -------------------------------------------------------------------------------- /errors/includes/TS1xxx/TS1005.md: -------------------------------------------------------------------------------- 1 | ## TS1005 2 | 3 | > error TS1005: '=' expected. 4 | 5 | ### Broken Code ❌ 6 | 7 | ```ts 8 | type Person { 9 | age: number; 10 | name: string; 11 | } 12 | ``` 13 | 14 | ### Fixed Code ✔️ 15 | 16 | You need to assign your type declaration using the `=` character: 17 | 18 | ```ts 19 | type Person = { 20 | age: number; 21 | name: string; 22 | }; 23 | ``` 24 | 25 | Alternatively you can declare an interface: 26 | 27 | ```ts 28 | interface Person { 29 | age: number; 30 | name: string; 31 | } 32 | ``` 33 | 34 | > error TS1005: ';' expected. 35 | 36 | ### Broken Code ❌ 37 | 38 | ```ts 39 | export function getNumbers(names: string[]) { 40 | return names.map(name => {[name]: parseInt(name)}); 41 | } 42 | ``` 43 | 44 | ### Fixed Code ✔️ 45 | 46 | When using an [**arrow function expression**](/glossary/index.html#Arrow-Function-Expression), you can implicitly return values by wrapping the [**object literal**](/glossary/index.html#Literal-Types) in parentheses: 47 | 48 | 49 | {% codeblock lang:ts mark:2 %} 50 | export function getNumbers(names: string[]) { 51 | return names.map(name => ({[name]: parseInt(name)})); 52 | } 53 | {% endcodeblock %} 54 | 55 | -------------------------------------------------------------------------------- /errors/includes/TS1xxx/TS1006.md: -------------------------------------------------------------------------------- 1 | ## TS1006 2 | 3 | > error TS1006: A file cannot have a reference to itself. 4 | 5 | ### Broken Code ❌ 6 | 7 | 8 | {% codeblock index.d.ts lang:ts %} 9 | ///