Our TypeScript journey has now led us to a new destination: Array-bia. Typing arrays is a little bit different than working with primitive types. This is because arrays usually contain many pieces of data. Keeping track of the array’s type means keeping track of every element’s type. For example:
We can see that firstArray has elements that are all number types. On the other hand, secondArray has elements of varying types: number, string, and Array. Both are examples of valid JavaScript arrays. As we’ll soon explore, TypeScript makes it very easy to keep track of element types in arrays, such as those above.
For now, though, let’s make life difficult by pretending that TypeScript didn’t have special ways of typing arrays. How hard would it be to enforce type consistency?
Instructions
Imagine you are a software engineer for a company that keeps track of customer names in the array customersArray. The company’s codebase loops through this array to generate an annual report. The code was written by an untrained intern over 10 years ago, and it will crash the entire system if customersArray is found to contain any data of the number type!
Because you’re not using TypeScript, you need to write the function checkCustomersArray() to check that every element of customersArray is a string. For any element el that is not a string, this function should log an error message using the statement console.log(`Type error: ${el} should be a string!`).
Call the checkCustomersArray() function after you’ve defined it to see your messages print out.
OK, you found a couple of errors. (Wouldn’t it be nice if this error checking was automatic?) You’ll fix them later. Right now, there is a more pressing concern. The array customersArray is constantly being altered by existing code. The last thing we want is for somebody to .push() a non-string value into this array.
Write an alternative pushing function called stringPush() that takes one argument: val, the value meant to be pushed into the array. The function should check if the val is a string and .push() it into the customersArray array only if it is a string.
Even with all this, people could ruin your precious string array by writing code like customersArray[4] = 4. You don’t have to waste time finding a way around this right now.
Now you can see how needlessly difficult manual type-checking is. And imagine, you would have to write even more code if you needed arrays of numbers! It’s all too much.
Click the “Run” button to move on to the next exercise, where you will learn how TypeScript makes it easy to maintain a typed array!