In any development team, there will come a time when you will need to either bug-fix, or enhance a body of code that has already been written in JavaScript. If you are in this situation, then you would want to try and write new areas of code in TypeScript, and integrate them with your existing body of JavaScript. To do so, however, you will need to write your own declaration files for any existing JavaScript that you need to reuse. This may seem like a daunting and time-consuming task, but when you are faced with this situation, just remember to take small steps, and define small sections of code at a time. You will be surprised at how simple it really is.

In this section, let's assume that you need to integrate an existing helper class—one that is reused across many projects, is well tested, and is a development team standard. This class has been implemented as a JavaScript closure, as follows:

ErrorHelper = (function() { 
    return { 
        containsErrors: function (response) { 
            if (!response || !response.responseText) 
                return false; 
 
            var errorValue = response.responseText; 
 
            if (String(errorValue.failure) == "true" 
                || Boolean(errorValue.failure)) { 
                return true; 
            } 
            return false; 
        }, 
        trace: function (msg) { 
            var traceMessage = msg; 
            if (msg.responseText) { 
                traceMessage = msg.responseText.errorMessage; 
            } 
            console.log("[" + new Date().toLocaleDateString()
                + "] " + traceMessage); 
        } 
    } 
})(); 

This JavaScript code snippet defines a JavaScript object named ErrorHelper that has two methods. The containsErrors method takes an object named response as an argument. This response object is then checked for errors. An object does not have an error if the following are true:

• The response argument is undefined.
• The response.responseText is undefined.

An error condition, however, is returned if the following are true:

• The response.responseText.failure property is set to the string value of "true".
• The response.responseText.failure property is set to the boolean value of true.

The ErrorHelper closure also has a function called trace that can be called with a string, or a response object similar to what the containsErrors function is expecting.

Unfortunately, this ErrorHelper function is missing a key piece of documentation. What is the structure of the object being passed into these two methods, and what properties does it have? Without some form of documentation, we are forced to reverse engineer the code to determine what the structure of the response object looks like. If we can find some sample usages of the ErrorHelper class, this may help us to guess this structure.

As an example of how this ErrorHelper is used, consider the following JavaScript code:

var failureMessage = { 
    responseText : { 
        "failure" :true, 
        "errorMessage" : "Message From failureMessage" 
    } 
} 
 
var failureMessageString = { 
    responseText : { 
        "failure" : "true", 
        "errorMessage" : "Message from failureMessageString" 
    } 
} 
 
var successMessage = { 
    responseText : { 
        "failure" : false 
    } 
} 
 
if (ErrorHelper.containsErrors(failureMessage)) 
    ErrorHelper.trace(failureMessage); 
     
if (ErrorHelper.containsErrors(failureMessageString)) 
    ErrorHelper.trace(failureMessageString); 
     
if (!ErrorHelper.containsErrors(successMessage)) 
    ErrorHelper.trace("success"); 
     

Here, we start with a variable named failureMessage that has a single property, reponseText. The responseText property in turn has two child properties—failure and errorMessage. Our next variable, failureMessageString, has the same structure, but defines the responseText.failure property to be of type string, instead of type boolean. Finally, our successMessage object defines the responseText.failure property to be false, but it does not have an errorMessage property.

The last couple of lines of the preceding code block show how the ErrorHelper closure is used. All we need to do is call the ErrorHelper.containsErrors method with our variable, and, if the result is true, log the message to the console through the ErrorHelper.trace function. Our output would be as follows: