TypeScript is a language on top of JavaScript. Everything possible in JavaScript is available in TypeScript – it is a superset of JavaScript. It provides two strong advantages. The first one is that it transpiles TypeScript into JavaScript so the advanced ECMAScript features not available to all web browsers can be used by providing a polyfill. It acts as a combination of other static checkers combined with Babel. The second advantage of TypeScipt is that it can enforce static typing to catch potential issues earlier in the lifecycle of development. It reduces the need for some unit tests and can analyze the code to find runtime errors at design time.
TypeScript was made public since 1 October 2012, but its inception started at Redmond two years prior as an internal product (2010) at Microsoft. The project is open-source, hosted on Github.com under an Apache2 license.
TypeScript’s popularity increases year after year. It has 317 branches, 228 contributors, 48 releases, 188 pull requests monthly created with over 3 600 forks and 25 000 stars. The consistent cadence of a new version releases every two months and the great ecosystem of people contributing make it a stellar open source project. It evolves rapidly to sustain developers’ needs, and it follows the rapid pace of web technologies.
TypeScript is far from being used only by its creator, Microsoft. While it’s true that many Microsoft products use TypeScript, such as Microsoft Teams, Visual Studio Team Services (VSTS), the online version of Office, and Visual Studio Code (VSCode), to say the least, other technology giants have been borrowing the advantages of static typing. Google has been using TypeScript since Angular 2, Slack has migrated their JavasScript code base to TypeScript as well, and other companies like Ubisoft, Asana, Ericsson, Upwork, Bloomberg, and Lyft are following suit. The reason I mention these systems that use TypeScript is to highlight the investment of thousands of developers and the millions of lines in these technologies. Most of them come from different backgrounds. Aside from the tremendous amount of work and knowledge poured across the industry, it illustrates that many people before you had to decide whether to go with TypeScript or not—and chose to do so. While most of the examples provided are big projects, they all do have one thing in common, i.e. some people must write and maintain the code. Static typing shines in these areas, from small to big projects.
Here is a quick note about who is leading TypeScript. Anders Hejlsberg manages TypeScript. He is the creator of Turbo Pascal, Delphi, C# and now TypeScript. Hejlsberg graduated in the ‘80s, has received many awards in his career, and is the person who made the most commits on GitHub on that project. Having such a prolific engineer at the head of TypeScript boosts the maturity of the language.
The TypeScript community is beyond the repository where it resides. StackOverflow’s members are strong, with more than 35 000 questions. There are plenty of examples with TypeScript code with many different frameworks. It’s not difficult to find Angular or React examples written in TypeScript or popular projects like the famous TodoMVC.
TypeScript is all about having a strongly typed language at design time, but the code produced doesn’t contain any type. The type gets erased because Typescript removes types, interfaces, aliases at transpilation and ends up with a common JavaScript file. The removal may sound logical but the lack of type at runtime results in a design that must not rely on the type dynamically at runtime. We will see examples of this when working on type comparisons to figure out the interface used. Keep in mind that interface and type are not available at runtime, hence how can this check be performed when the code executed is a challenge?
Mutable and Immutable Arrays
In this lesson you will learn about two different syntaxes to define an array.
Arrays in TypeScript are exactly like in JavaScript in terms of features. The difference is that TypeScript assigns a type to the list.
The syntax, as shown below, utilizes square brackets [] with the actual type before the brackets and after the colon.
It is also possible to initialize values during the declaration. In the following example, the two arrays are typed. TypeScript infers that the first one is number and the second is a string. You can move your cursor over the two variables to see the type.
Using multiple types will require you to evaluate what the type of each value is before using an individual item of the array. This is because the variable’s operations are type-dependent. There is an equivalent syntax that uses the generic Array<T>. Both are the same.
You can initialize an empty list by setting the variable equal to empty square brackets. An array can use one or many unions to allow multiple types. Union will be discussed later. At that stage, remember that with multiple types, you must to wrap the union with parentheses.
The preference to explicitly declare type or not depends on your style of coding. For maintainability, it is good practice to be explicit. With a peek at the code above may notice, you know that the array takes 2 types without having to read further. It also forces future additions to be constrained by the expected type. Without explicitly typing the variable, someone could add a string and suddenly the variable allows a number, boolean, and string.
Before moving on, it is important to note that you can also instantiate a strongly typed object array. This is equivalent to creating a new array without assigning any values.
Immutable arrays
While the two syntaxes presented above refer to mutable collections, there is also the possibility to desire a list that is immutable. The ReadonlyArray is a generic array that allows only to read from the array once it’s constructed. As with the mutable array, there are two ways to write a read-only collection.
The first approach is to use ReadonlyArray<T> instead of Array<T>.
Control flow analysis for array construction
Control Flow Analysis is how TypeScript figure out dynamically what type it should infer. Arrays can be tricky since they accept many values which can be of many types. For example, the following code accepts a list of numbers or strings.
The last question may surprise you. The empty array is an evolving type that will be analysed during the “flow” of the code, meaning depending of what happen with the following operations. Functions like push, shift, unshift or setting directly to an index a value myArray[index] = value will transform the type. The type is finally attributed once it stops changing, hence the question #4 gets to its real type at the end of the code, not before which could be anything.
In this lesson, we saw two different syntaxes to write an array in TypeScript. We also illustrated that it is possible to have the content of an array to be immutable with readonly. We also described the difference between a constant and a read-only list.
Read more:
