Last year I started my Twitter account while I was at Visual Studio Live! in Orlando. I blogged at the end of each day. I meant to do that this year while I have been at DevIntersection in Las Vegas this year. We got to Vegas yesterday for the pre-session workshops and will be here until Friday. There is a little different feel in the Las Vegas vs Orlando environment, but I am not here for the city, I am here for the conference.
First, John and Dan talked about the tsconfig.json file and how you can set sourceMap to true in order to enable debugging in TypeScript. How do you get TypeScript to work? You transpile TypeScript to JavaScript or ES. You want to use ES2015? Transpile your TypeScript to ES2015 and you have ES2015 version of your code. I guess the good news is, that if TypeScript is ever not supported, you just transpile it to ES2015, or ES5, or even ES3 if you wanted.
We then started talking about ES 2015 and some of the features now available. These are not all the functions available but the main ones that were covered. I understood most of these. Maps/Sets are like dictionary pairs you can use so that you no longer have to use arrays and splice and slice the arrays. Maps store a collection of key/value pairs with unique keys. Sets can store a collection of items where the items must be unique.
What about those classes? HEY! I use those all the time in C#. There are some that probably don't like this, but it sure helps me understand what is going on in TypeScript. And those Arrow Functions look real familiar! A few weeks ago (maybe two months, who knows) I learned about LINQ statements and Lambda funcitons. The Arrow functions look close to the same as LINQ statements
Other features we talked about template strings (embed a variable in a string literal), destructuring (create multiple variables, along with their values, in one line of code), default parameters, and rest parameters. All look close to stuff I have done in C#.
We then went to a TypeScript playground at http://www.typescriptlang.org/play/index.html which allows you to type TypeScript and immediately get the JavaScript equivalent back. We then went into types in TypeScript. For example, you can now go:
var age: number = 5;
This will set a new variable age of type number with a default value of 5. Very similar to how variables can be set in C#.You can also used inferred types, where the variable will either be a type any or the actual type if TypeScript is able to infer what the type should be. You can do Enums, again similar to C#.
The next piece I liked talking about where the classes. They classes look just as they do in C#. Helpful for me!
One piece I really liked in the auto generated properties. These are a little different then auto properties in C#. For TypeScript you create the auto generated property in the constructor. An example:
class CoolCode {
constructor(public greeting: string)
{
this.greeting = greeting;
}
}
This creates the property greeting in the class CoolCode and also has the value of a string in the constructor called greeting. You can also create gets and sets on properties. This is almost the same as and auto property in C#. Here is an example in TypeScript:
class Address {
_houseNumber: string = 0;
get houseNumber() {
return this._houseNumber
}
set houseNumber(houseNumber: number) {
this._houseNumber = houseNumber;
}
}
You can now do class inheritance and interfaces just as you can with C#. In order to use inheritance you need to use the keyword extends. For interfaces you have to have a class with the key word interface and then your class that is implementing the interface will do something like:
interface KillerGame() {}
class AwesomeGame implements KillerGame{}
Other things that are similar to C#:
Today I went to Building Single Page Applications with Angular 2, again by Dan Wahlin and John Papa. The discussion started with the differences between Angular 1 and Angular 2. Since I have never used Angular 1 I did not have any reference. They then touched on what we had gone over the first day in the TypeScript and ES6 workshop.
There was not much more added from what we learned in day 1. We used a tool called Plunker (in order to avoid having to get the correct setup on all the machines in the room) to enter TypeScript and use Angular 2. What was added to our knowledge for Angular 2:
We went through many examples using TypeScript from the day before to create/change single page websites. Of course, we started with Hello World and went from there. I learned today that Dan and John went pretty fast while editing the code and a few times I fell behind getting to a state where my pages weren't working. Luckily, they would save their Plunker and I was able to get to a good state before we moved on too much.
In addition to examples from examples using TypeScript from the day before, I got to learn a little HTML. I did HTML years ago in a college course but nothing big. It was nice for a little refresher.
We were pointed to a tutorial on angular.io that will help getting more familiar with Angular 2.
Day 1:
Yesterday I went to a session called Making the Jump to ES6 and TypeScript with Dan Wahlin and John Papa. I thought this was an ambitious decision as everything I have done has been done in C#. I was afraid that I would not be able to keep up or understand what was being said. I was in for a pleasant surprise! I was very surprised at how close ES2015 and TypeScript have many features that are very similar to C#.First, John and Dan talked about the tsconfig.json file and how you can set sourceMap to true in order to enable debugging in TypeScript. How do you get TypeScript to work? You transpile TypeScript to JavaScript or ES. You want to use ES2015? Transpile your TypeScript to ES2015 and you have ES2015 version of your code. I guess the good news is, that if TypeScript is ever not supported, you just transpile it to ES2015, or ES5, or even ES3 if you wanted.
What about those classes? HEY! I use those all the time in C#. There are some that probably don't like this, but it sure helps me understand what is going on in TypeScript. And those Arrow Functions look real familiar! A few weeks ago (maybe two months, who knows) I learned about LINQ statements and Lambda funcitons. The Arrow functions look close to the same as LINQ statements
Other features we talked about template strings (embed a variable in a string literal), destructuring (create multiple variables, along with their values, in one line of code), default parameters, and rest parameters. All look close to stuff I have done in C#.
We then went to a TypeScript playground at http://www.typescriptlang.org/play/index.html which allows you to type TypeScript and immediately get the JavaScript equivalent back. We then went into types in TypeScript. For example, you can now go:
var age: number = 5;
This will set a new variable age of type number with a default value of 5. Very similar to how variables can be set in C#.You can also used inferred types, where the variable will either be a type any or the actual type if TypeScript is able to infer what the type should be. You can do Enums, again similar to C#.
The next piece I liked talking about where the classes. They classes look just as they do in C#. Helpful for me!
One piece I really liked in the auto generated properties. These are a little different then auto properties in C#. For TypeScript you create the auto generated property in the constructor. An example:
class CoolCode {
constructor(public greeting: string)
{
this.greeting = greeting;
}
}
This creates the property greeting in the class CoolCode and also has the value of a string in the constructor called greeting. You can also create gets and sets on properties. This is almost the same as and auto property in C#. Here is an example in TypeScript:
class Address {
_houseNumber: string = 0;
get houseNumber() {
return this._houseNumber
}
set houseNumber(houseNumber: number) {
this._houseNumber = houseNumber;
}
}
You can now do class inheritance and interfaces just as you can with C#. In order to use inheritance you need to use the keyword extends. For interfaces you have to have a class with the key word interface and then your class that is implementing the interface will do something like:
interface KillerGame() {}
class AwesomeGame implements KillerGame{}
Other things that are similar to C#:
- Generics are now available
- You can know use namespaces - if you use modules do you still need namespaces?
Day 2:
Today I went to Building Single Page Applications with Angular 2, again by Dan Wahlin and John Papa. The discussion started with the differences between Angular 1 and Angular 2. Since I have never used Angular 1 I did not have any reference. They then touched on what we had gone over the first day in the TypeScript and ES6 workshop.
There was not much more added from what we learned in day 1. We used a tool called Plunker (in order to avoid having to get the correct setup on all the machines in the room) to enter TypeScript and use Angular 2. What was added to our knowledge for Angular 2:
- How to build components - importing and exporting
- Creating and using templates
- Angular Modules
- Binding and Directives
- Services and Dependency Injection
- HTTP and ReactJS
- Routing
Ok, I type it out and it is a little more then I thought. This post is getting really long already, maybe I will have to write another post after I have been able to research them a little more. The workshop today was nice, but they moved so quick that I would like to understand them a little better.
We went through many examples using TypeScript from the day before to create/change single page websites. Of course, we started with Hello World and went from there. I learned today that Dan and John went pretty fast while editing the code and a few times I fell behind getting to a state where my pages weren't working. Luckily, they would save their Plunker and I was able to get to a good state before we moved on too much.
In addition to examples from examples using TypeScript from the day before, I got to learn a little HTML. I did HTML years ago in a college course but nothing big. It was nice for a little refresher.
We were pointed to a tutorial on angular.io that will help getting more familiar with Angular 2.
