Getting to know Typescript Part 1.
January 08, 2017
Step 1: Set up TypeScript
On a first quick pass, TypeScript introduces Type Annotations, handy definitions for variables:
//use string argument }
The above bit of code should throw a warning when not receiving a string as an argument.
The first gotcha, is the following example:
See the Pen TypeScript 001 by Eugenio Keno Leon (@k3no) on CodePen.
Step 1b: Set up TypeScript on an IDE/text editor/desktop environment
You will now be able to make .ts - Typescript files and Atom will warn you when your types are wrong:
Variable Types in Typescript
Step 2: What are some basic types in Typescript ?
Note: Typescript prefers the use of the more modern LET when declaring variables.
See the Pen TypeScript - Types by Eugenio Keno Leon (@k3no) on CodePen.
The more you know
Step 3: Make an interface, figure out what an interface does
The more you know So what's an interface and what is it good for you ask. In general, an interface is a description of the actions that an object can do or the properties it should have, in other words this class/object must have these functions/things and it is valuable because well it prevents you from designing some object or class and later misconfiguring it
See the Pen TypeScript - Interfaces by Eugenio Keno Leon (@k3no) on CodePen.
So we have a basic interface and a function that implements it, to see it fail and why it is useful, we need to go back to our desktop editor and try to compile our typescript file, you will get the following error if you ommit part of the interface:
The more you know
was introduced, which in turn is just a new name or syntactic sugar for protoypes. Typescript allows for the use of classes even when there is no browser support ( like babel or a polyfill does) plus it also adds some other niceties
Step 4: Make a class in Typescrypt
See the Pen TypeScript - Classes by Eugenio Keno Leon (@k3no) on CodePen.
And breaking our new class is just a matter of ommiting a variable..
Step 5: Class inheritance & other Classy things
See the Pen TypeScript - Class Inheritance by Eugenio Keno Leon (@k3no) on CodePen.
Class Modifiers: Public & Private
The more you know What, why use them ?...Class Modifiers or Access Modifiers are very common on other languages like Java,C#, C++ etc, they allow for control over who gets to access your object variables and methods, and using them is a good idea for security and convenience.
See the Pen TypeScript - Class Modifiers by Eugenio Keno Leon (@k3no) on CodePen.
So while this example still compiles an runs, in your editor you would get errors: