Learning about a new Type of Script

A Brief Introduction into the language of TypeScript:

When you begin your journey into the world of writing code the nuances of the language you learn will be one of the most difficult things you encounter, or at least it was that way for me when I started. Wrapping my head around the concept of variable types, and then remembering the differences in how each interacted with the other in JavaScript was initially a huge challenge. With time the rules became clearer and I then began to feel more comfortable with writing more robust blocks of JavaScript code. I later experienced, mostly through error handling, that JavaScript is very lenient in what it will allow you to write and will even permit you to construct improper expressions without ever throwing an error. Frankly, I prefer to be warned that something is not set up correctly on line 1 before I can move onto line 2 or even further to 200. Now that I have suffered through hours of debugging, engraining certain best practices, I am able to catch potential errors before they happen. Continuing my evolution as a developer learning new languages, I was pointed toward TypeScript, which was touted to protect against some of the errors that JavaScript allows. This blog is my dive into better understanding TypeScript starting at its roots.

What is typescript?

TypeScript (TS) is a static scripting language maintained by Microsoft that is open-sourced and intended to be a syntactical superset of JavaScript (JS). This is a very technical definition transposed from the TS docs, but it still needs further deconstruction for a newbie like me to gain a clear understanding of what TS is and how it differs from JS. Static scripting refers to a type checking format or set of rules that a language enforces to ensure code the developer has written is bug-free. Static typing languages are those that enforce their type constraints at compile-time, and also demand that the developer define the data type of the language construct (variables, expressions, functions, etc.) they intend to use before it is utilized in their code. Static scripting allows for code to be debugged as it is written, prior to being run or executed by the computer, resulting in faster run times, and of course, we can all understand the importance of this feature. Catching bugs before code is run will ensure better and proper functionality of the programs you write. Let's examine how TS interacts with some primitive data types.

Example 1

var name: string = "James Thomas";

// explicit data typing

Above is an example of a static scripting language in action, explicitly defining the variable data type before it is assigned in the code. TS has an extra optional feature, due to its strongly typed designation, that needs to be showcased. The term “Strongly Typed” simply refers to the fact that in this language declared variables are bound to a certain data type. Variables must be assigned to values of the data type they “Explicitly Defined” or “Inferred” to be whenever used in the code or the compiler will return a type error. This optional feature mentioned will allow for the dynamic typing of written variables while still providing the security of static typing error protocols by the compiler. “Inferred Typing”, is the languages' ability to determine a variables data types without prior explicit definition.

Example 2

var name = "James Thomas";

// inferred data typing

Although the above variable definition looks like vanilla JS, the magic happens when the variable is used later in code and fails to adhere to the typing rules of the language. If the variable is used in a syntactically incorrect manner the compiler will throw an error just as if it were explicitly defined in our first code example.

Example 3

var number = 36;

number = "James Thomas";

// Error: Type 'string' is not assignable to type 'number'. (2322)

So, we have seen how TS works with a few primitive data types but still need to explore how the language applies the static typing parameters to complex data types.

How Typescript interacts with complex data types?

Because complex data can contain primitive values, the static typing rules employed by TS must interact with complex data types in a slightly different manner. To facilitate this static typing interaction with complex data, TS includes what is called an “Interface”. The Interface should be looked at as a defining blueprint or contract for all elements of the complex data type to be later defined and used in your code. These TS Interfaces operate much like ES6 class constructors, where each newly instantiated class instance will always contain the properties and methods defined in the parent constructor.

Side Note => TS does include classes as well but interfaces are a new aspect of the language to me and so I'm gonna highlight them here to improve my understanding.

One major difference between Interfaces and Classes is that Interfaces only contain the declarations of the contained elements and not the values or method functionality to be inherited by each new entity created. Just to clarify “instance” refers to classes while “entity” is referring to interfaces. This means that with interfaces the developer must later define the elements of complex data type outlined by the interface.

Example 4

interface Student {
    firstName: string,
    lastName: string,
    className: string,
    answerRoll: ()=>string
}

// this interface defines the types of all Student objects to come

Looking at code example above we see our TS interface called student which defines all the elements any Student object must contain. This interface is our blueprint to follow when we create Student objects for use in our code. Another key difference between interfaces and classes is that interface entities are not instantiated with the new keyword. The syntax differs in that you must still define the object and all its containing elements.

Example 5

 var senior: Student = {
    firstName: “James”,
    lastName: “Thomas”,
    className: “McLaren”,
    answerRoll: ()=>string => {return “Here, ready to code!”}
}

// new Student object

Although this way of creating new entities via the interface may seem a bit cumbersome compared to simply using the keyword “new” and a class constructor function the pay off comes at compile time. Remember that TS compiles into JS so when the compiler reads an interface it ignores it. Less code to compile results to smaller build times and no impact on the runtime of the code you wrote. That is a great pay off in my book.

Conclusion

I think this is a great place to stop on this leg of our journey into the basics of TS. We have unpacked a few foundational concepts like:

• What a static scripting language is?

• The differences between static and dynamic typing.

• What defines a strongly typed language.

• The TS optional feature of "inferred" typing.

• The differences between interfaces and classes.

These concepts will allow us on our next leg to explore the Union Type and how it interacts with variables, functions, arrays, and interfaces. Hope you enjoyed the read and in the process learned a little something new.

Happy Coding!!!

Sources:

• TypeScript docs (https://www.typescriptlang.org/docs)

• Oracle docs (https://docs.oracle.com/cd/E57471_01/bigData.100/extensions_bdd/src/cext_transform_typing.html)

• Tutorialspoint.com

• Sitepoint.com (https://www.sitepoint.com/typing-versus-dynamic-typing/)

• Wikipedia.com