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://medium.com/media/f04e0490d1c4db6233bf78abd53fbd63/href
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.
Using types
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://medium.com/media/7cedeecfc1ea76d7e54d1de91511cd01/href
Types can be used:
- When declaring a variable
- In function parameters
- To type check the return value of a function
Variable declaration
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://medium.com/media/4c16687c2dbf060c6dbc43ec3e8605a5/href
Also, we can use the generic Array type Array, where elementType is the type of the element contained in the Array. An example looks like this:
https://medium.com/media/30a8e67f303f6c3b04daf9b1c8d12a4f/href
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://medium.com/media/70d6b7398ee4b3ee10d4e5e4004aa316/href
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://medium.com/media/18769edf4e59e38300386839b22edfc2/href
Boolean A boolean is the most basic datatype. It is either true or false.
https://medium.com/media/fe714e7b389aa6c3797091c9a5a626b8/href
String Strings in TypeScript can be used in one of three ways:
- Double quotes.
- Single Quotes.
- Template literals.
Double quotes:
https://medium.com/media/41b25f65335f9a16dc0930ab1b63494b/href
Single quotes:
https://medium.com/media/9639f4237ec9a2cdc2b5256ca9ec8c47/href
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 }.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b3eacea0b81994f911b9b778d6322b49/href">https://medium.com/media/b3eacea0b81994f911b9b778d6322b49/href</a></iframe>
**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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d042fef7a78711e7f43b99a1d1dccfa9/href">https://medium.com/media/d042fef7a78711e7f43b99a1d1dccfa9/href</a></iframe>
**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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/a330f533ce63cd635330af8a4ca45444/href">https://medium.com/media/a330f533ce63cd635330af8a4ca45444/href</a></iframe>
Or we can manually set the values of the enum:
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/5b9c0079b3b5379313dd7360dc58914a/href">https://medium.com/media/5b9c0079b3b5379313dd7360dc58914a/href</a></iframe>
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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d7870d8e03e495ec6578f3e4a058c9c3/href">https://medium.com/media/d7870d8e03e495ec6578f3e4a058c9c3/href</a></iframe>
**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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e59c8eae0424d018300e224d68f7b5ae/href">https://medium.com/media/e59c8eae0424d018300e224d68f7b5ae/href</a></iframe>
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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/94f392b81a96cb07ec5839a015bc679a/href">https://medium.com/media/94f392b81a96cb07ec5839a015bc679a/href</a></iframe>
**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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c2f84494a4c10e3846bed43f83102e0d/href">https://medium.com/media/c2f84494a4c10e3846bed43f83102e0d/href</a></iframe>
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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b551bd8021732be551c919a0b82967f3/href">https://medium.com/media/b551bd8021732be551c919a0b82967f3/href</a></iframe>
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:
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d0f6f7905e14f928569ff6c45a4da3ba/href">https://medium.com/media/d0f6f7905e14f928569ff6c45a4da3ba/href</a></iframe>
**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.
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c4f7f5437aeb3b780496b38ab06d2af6/href">https://medium.com/media/c4f7f5437aeb3b780496b38ab06d2af6/href</a></iframe>
### Conclusion
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](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html).
### Plug: [LogRocket](http://logrocket.com), a DVR for web apps
[](http://logrocket.com)
[LogRocket](https://logrocket.com) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Try it for free.
* * *
Top comments (0)