TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is open-sourced, it was developed and maintained by Microsoft. TypeScript may be used to develop JavaScript applications for both client-side and server-side execution.
TypeScript is a statically typed language. A language is statically typed if the type of a variable is known at compile time. For some languages this means that you as the programmer must specify what type each variable is (e.g.: Java, C, C++); other languages offer some form of type inference, the capability of the type system to deduce the type of a variable.
Declaring types prevent many runtime errors and allow IDEs to do their magic and show you where the errors lie. If you’re coming from a typed language background like Java, you’d be used to seeing examples like this:
https://gist.github.com/883a68c221b91e39abbefe738d9e4cc0
In the example above, if a string was added to the array, the compiler will throw a Compilation Error. This is what TypeScript brings to JavaScript, error and type checking.
In TypeScript, the type of a variable is defined on the right-side before variable declaration. If we wanted to define the type of a variable name, it’ll look like the snippet below:
https://gist.github.com/2900f3e0f9216bef4e29553e388cfdb2
Types can be used:
- When declaring a variable
- In function parameters
- To type check the return value of a function
When declaring a variable in TypeScript, we make use of the let and const keywords. You can type check Arrays, Strings, Numbers etc.
Arrays
TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type:
https://gist.github.com/1e949428f63ad2d80d89e42211957a23
Also, we can use the generic Array type Array<elementType>, where elementType is the type of the element contained in the Array. An example looks like this:
https://gist.github.com/14e74566f8ef743ebd4cdbb27f44d1e2
Now if your Array will contain several types, the tuple comes into play.
Tuples
Tuples allow you to declare an array where the type of a fixed number of elements is known, but need not be the same. For example, you may want to represent a value as a pair of a string and a number:
https://gist.github.com/23ca159454801c663a47f4a0ae8b0af9
The last example is an Array with more than two characters, this didn’t error out because we supplied additional elements that were either a string or a number. If a boolean were to be added to the array, an error would be thrown.
https://gist.github.com/ac8fb414bb7127f192283d05a2f7dc77
Boolean
A boolean is the most basic datatype. It is either true or false.
https://gist.github.com/0fe7e7f3f9aa0ea81ccbd726f059679e
String Strings in TypeScript can be used in one of three ways:
- Double quotes.
- Single Quotes.
- Template literals.
Double quotes:
https://gist.github.com/d6b2886c4e6de47ae044c638156ccb0f
Single quotes:
https://gist.github.com/33042e07b6ce4933c081d8c8980b394d
Template literals:
These are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification. These strings are surrounded by the backtick/backquote (```) character, and embedded expressions are of the form ${ expr }.
https://gist.github.com/b7d8d416449f0d4f74964630ec884aa5
Number In JavaScript, all numbers have the definitive type of number. All JavaScript numbers are floating point values, it is the same with TypeScript. TypeScript also supports binary and octal literals alongside hexadecimal and decimal values.
https://gist.github.com/6dd3ae830ff584c395a447a3cf381e4e
Enum An enum is a friendly way of naming sets of numeric values. Enums begin numbering from 0 but you can manually set the value of one of the members.
https://gist.github.com/a8684d662658e4a997ca328b6412d150
Or we can manually set the values of the enum:
https://gist.github.com/0f25e57552d9ea55e5e440cf2b2e9d15
A handy feature of enums is that you can also go from a numeric value to the name of that value in the enum. For example, if we had the value 6 but weren’t sure what that mapped to in the Car enum above, we could look up the corresponding name
https://gist.github.com/884b6ef656527e74e6fa8dfb3ec09696
Any
There are time where we may not know the types we are working with. That’s when we can use the any type. The any type lets us opt out of type checking.
https://gist.github.com/136e945593d10e7390a95ebe50a33efa
The any type is very flexible. Even more so than the JavaScript object. With the any type, you can continuously opt in and opt out of type checking in your code.
https://gist.github.com/d89e70f2bba611e9e9f190219b852caa
Void
Void is almost a direct opposite of any, it depicts the absence of a type. It is commonly used to define the return type of a function.
https://gist.github.com/90f3d8abe2bec71751c4adc3fe2ce8ce
When declaring variables, defining the variable type as void isn’t really useful as you can only set the variable to either undefined or null.
Null and Undefined
Null and Undefined both have their respective types named after them. These types aren’t useful on their own because we can only assign Null and Undefined to a variable defined as a Null or Undefined type.
https://gist.github.com/7e8d2fec1361dda49de3ed5ab858cb30
Naturally, null and undefined are subtypes of any types. So you can assign null or undefined to number or string.
Never
The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns; Variables also acquire the type never when narrowed by any type guards that can never be true.
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never.
Some examples of functions returning never:
https://gist.github.com/1b775dd8bfe263baf72048e2e071b7b3
Types on Functions
We can define types for function parameters and function return values. We did something similar above when we used void on a function that doesn’t any values.
https://gist.github.com/396b56edfbdfdbe6cb20303e4726766a
We had a quick overview of TypeScripts types. There are more advanced applications of types in TypeScript, like creating declaration files etc. You can read more about creating declaration files here.