Last active
July 24, 2019 13:01
-
-
Save dezfowler/b81b210c888b19aeb4057384b95ddc12 to your computer and use it in GitHub Desktop.
TypeScript type checking fails
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// No error with incorrect 'botton' item | |
var x1 = <Alignment[]>['top', 'top', 'botton']; | |
// No error with different underlying value number | |
var x2 = <Alignment[]>['top', 'top', 2]; | |
// Correctly errors with | |
// Type '"botton"' is not assignable to type 'Alignment'. | |
var x3: Alignment[] = ['top', 'top', 'botton']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var requestFactory = (): IRequest => ({ | |
method: 'GET', | |
url: 'https://example.com' | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Fails with error | |
// Conversion of type 'string' to type 'number' may be a | |
// mistake because neither type sufficiently overlaps with | |
// the other. If this was intentional, convert the expression | |
// to 'unknown' first. | |
let p1 = <number>''; | |
// Fails with error | |
// Type '""' is not assignable to type 'number'. | |
let p2: number = ''; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A union type with some constant string values | |
type Alignment = 'top' | 'middle' | 'bottom'; | |
// No error with invalid value 'nope' | |
var a1 = <Alignment>'nope'; | |
// Correctly errors with | |
// Conversion of type 'number' to type 'Alignment' may be a | |
// mistake because neither type sufficiently overlaps with | |
// the other. If this was intentional, convert the expression | |
// to 'unknown' first. | |
var a2 = <Alignment>2; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Tuple inferrence is more strict and balks on the | |
// incorrect values | |
// Type '"botton"' is not comparable to type 'Alignment'. | |
var x4 = <[Alignment, Alignment]>['top', 'botton']; | |
// Type 'number' is not comparable to type 'Alignment'. | |
var x5 = <[Alignment, Alignment]>['top', 2]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Object type with two non-optional properties | |
type Foo = { thing: string, erm: number; other?: string }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// No error when you create an empty object | |
var foo1 = <Foo>{}; | |
var foo2 = {} as Foo; | |
// Doing this instead fails to compile with error | |
// Type '{}' is missing the following properties from type 'Foo': thing, erm | |
var foo3: Foo = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Miss-spelling required property fails with... | |
// Conversion of type '{ thing: string; erms: number; }' to type 'Foo' | |
// may be a mistake because neither type sufficiently overlaps with the other. | |
// If this was intentional, convert the expression to 'unknown' first. | |
// Property 'erm' is missing in type '{ thing: string; erms: number; }' but required in type 'Foo'. | |
var foo4 = <Foo>{ thing: '', erms: 0 }; | |
// Inferrence only checks all required properties are | |
// satisfied and ignores additional parameters so | |
// miss-spelling an optional property will slip through | |
var foo5 = <Foo>{ thing: '', erm: 0, othen: '' }; | |
// Only defined properties are allowed in object literal so this fails with... | |
// Type '{ thing: string; erm: number; othen: string; }' is not assignable to type 'Foo'. | |
// Object literal may only specify known properties, but 'othen' does not exist in type 'Foo'. | |
// Did you mean to write 'other'? | |
var foo6: Foo = { thing: '', erm: 0, othen: '' }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Doing something like this... | |
var request = <IRequest>{ | |
method: 'GET', | |
url: 'https://example.com' | |
}; | |
// Instead of this... | |
var request: IRequest = { | |
method: 'GET', | |
url: 'https://example.com' | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Very common to see this in function return values... | |
var requestFactory = () => (<IRequest>{ | |
method: 'GET', | |
url: 'https://example.com' | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var temp: { method: string, url: string } = { | |
method: 'GET', | |
url: 'https://example.com' | |
}; | |
var request = <IRequest>temp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment