Here at theCodeCampus and w11k we are using TypeScript in web projects for 12 months now. Our experiences with TypeScript are overwhelming\u00a0so far! Using TypeScript is a huge improvement over a JavaScript-based development, especially in larger projects.<\/p>\n
One of TypeScript’s advantages and often communicated characteristic is that its syntax is a (typed) superset of JavaScript. Hence, existing JavaScript code is valid TypeScript code. So far, so good! The selling point is that you can easily take existing JavaScript code and convert it to TypeScript, simply by changing the file extension from ‘js’ to ‘ts’.<\/p>\n
When new TypeScript users try this in practice, they often experience this error message:<\/p>\n
error TS7006 Parameter 'methodParam' implicitly has an 'any' type.<\/pre>\nThe reason for this is quite simple: When e.g. a method parameter does not declare a type (which isn’t possible\u00a0when the code used to be valid JavaScript), the TypeScript compiler warns that the ‘any type’ was inferred. Let’s say your method looks like this:<\/p>\n
function myFunction(methodParam) {\r\n \/\/ ...\r\n}\r\n<\/pre>\nThe solution is to simply explicitly add a type, either the ‘any type’ or a more precise one. Both declaration below would work:<\/p>\n
function myFunction(methodParam: any) {\r\n \/\/ ...\r\n}\r\n\r\n<\/pre>\nfunction myFunction(methodParam: string) {\r\n \/\/ ...\r\n}\r\n<\/pre>\n<\/p>\n
Another solution is to change the behavior of the TypeScript compiler.\u00a0How to do this, depends on the way you used to invoke the compiler. The command line tool ‘tsc’ uses the flag ‘–noImplicitAny’ to toggle this behavior. If you use a tsconfig.json (what you hopefully do), you can alter the compiler flags there:<\/p>\n
{\r\n \"compilerOptions\": {\r\n \"noImplicitAny\": false,\r\n }\r\n}<\/pre>\nHowever, I highly recommend to leave this flag on or respectively to add this flag to the ‘tsc’ invocation. After all, you want the compiler to assist you in writing better code and adding reasonable type annotations to your variables is one part of it.<\/p>\n
Problem 2:\u00a0Inferred Structural Types for Object Literals<\/h2>\n
Take the following perfectly valid JavaScript code:<\/p>\n
var obj = {\r\n key1: 1,\r\n key2: 2\r\n};\r\n\r\nif (CONDITION) {\r\n obj.key3 = 3; \r\n}<\/pre>\nWe first initialize the object ‘obj’ with 2 properties. Then, based on a condition, we add another property ‘key3’. If the condition is false, the expression ‘obj.key3’ will evaluate to ‘undefined’. All this is common JavaScript code. However, if we pass this to the TypeScript compiler, we get an error message:<\/p>\n
error TS2339 Property 'key3' does not exist on type '{ key1: number; key2: number; }'<\/pre>\nThe reason for this is that our object literal used to initialize the ‘obj’ variable also creates a ‘structural type’ consisting of two properties: ‘key1’ and ‘key2’. When we try to assign the property ‘key3’, the compiler rightfully complains that this type has no property ‘key3’.<\/p>\n
There are two possible solutions for this. We can add this property to the structural type:<\/p>\n
var obj = {\r\n key1: 1,\r\n key2: 2,\r\n key3, undefined\r\n};<\/pre>\n<\/p>\n
Or, we declare the variable ‘obj’\u00a0with the ‘any type’:<\/p>\n
var obj: any = {\r\n key1: 1,\r\n key2: 2\r\n};<\/pre>\n<\/p>\n
If possible, I recommend to always choose the first solution.<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"