7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 28 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Angular 2 and TypeScript

In this lesson you’ll learn how to set up your project to use TypeScript. After that, we’ll build another simple component that displays a message about learning Angular.

Related Links

2.3 Angular 2 and TypeScript

Hello everyone. This is Reggie Dawson. Welcome to the What's New in Angular 2 course for Touch Plus. In this video we are going to learn how to use Typescript with Angular 2. I know it may seem like we are introducing a new language. But when you get down to it, typescript is just Java Script with additional goodies that aren't available to ES5. We can use regular JavaScript code in a TypeScript file. And the TypeScript is compiled to plain JavaScript anyway. The advantages of using type script are the features we have available to us. Most noticeably, decorators. For example, the component decorator lets Angular 2 know we are configuring our component. This will make more sense in a moment. First we need to set up our project. Again, we will need to have Note installed. First, make a project folder and name it whatever you like. Inside of this folder create a folder called SRC and inside of that folder place another folder called app. This is the suggested project structure from Angular but of course we can structure our project any way we like. Then inside of our ad folder, create a file called app.ts. This is our typescript file that we'll compile to JavaScript. Then come up a level to the SRC folder and create an index.html file. And then create a file called tsconfig.json. Then go to the command line and make sure you are inside of your project folder, and run. We're running mpminit-y which will generate our package.json file with the default arguments. And after that we're going to run, MPM install, Angular 2 system js-- save. This will install Angular 2 and system js and add it to our dev dependencies of our package.json file. System js is a modular loader that we will need for our project. After installing Angular, we need to install TypeScript in the Live server. If you need it. As before, I am on Cloud 9, so I don't need it to preview. But I will show you how to configure it in case you need it. npm install typescript live-server --save-dev. This time we add our applications to the dev dependencies. Then we need to go to our package.json file. Again, we will be adding to the script section of our file. First, let's add a script for our TypeScript compiler. "tsc": "tsc -p src -w". This tells the TypeScript compiler to compile the project in our src folder. The w flag tells the compiler to continue running and watch for changes. When the final changes it will be compiled. Then we add start: live-server --open=src. This will start your live server for previewing your file. As long as our compiler is running, our app will be updated immediately when we make changes. Now, open up our TSconfig.JSON file. In order for the type script compiler to use the -P option, the folder it is pointing to must have this TSconfig file. Add curly brackets and inside add compiler options in double quotes with a colon in curly braces. Then we add our target, which is ES5, which tells the compiler we are compiling to plain JavaScript. Then we have our module code generation format, which is set to commonjs. The first map is set to true, which generates a source map file. Then we add the emit decorator meta-data option set to true. The experimental decorator set to true. The remove comment set to false. And no inputs at any set to false. These are settings I found on the Angular 2 site that relate the type-script compilation. I've included a link to the documentation for the compiler option so that you can look over what all of these options do. After that open up index.html. First, we will add our opening and closing html tags. Then we will add our head tags and our title, Angular 2 TypeScript. Under our title, we would add our reference to our system dot gs files. Remember, we added systems yes with mpm so it's stored in our node module. Next, we add our reference to Angular 2. Notice we use the dev version as opposed to the sfx.dev version we use for JavaScript. Then, we're going to add another script tag that tells the system loader where to find our JavaScript files in their default extension. Then inside we'll add packages. This is the app folder storage for our script files, and the default extension to js for modules within our package. Then on the next line we add, system.m4@/@ serves to load our .js file. You may have noticed that we don't have a app.js file. But we will after we compile our type script. Also, notice that we don't the JS extension to reference our file because of the system config we just set up. After that, the last thing we need to do is add our opening and closing body tags. And then we add our component. After that, our HTML file is done. Now, let's go to our app.ts file. The first thing we need to do is import the parts of Angular 2 that we need. In ES5, all of Angular is available. When using Typescript, we have to import what we need. For this example, we need Component, View and Bootstrap. So we will import them. After that, we start with our component decorator. This is one of the features that is not supported by JavaScript. All this is saying is that we are creating a component. Just like the ES-5 example, we will add a selector. And then we add our view decorator. Here we will add our template. This time we will use the back tick to allow template strings. Which is a feature type script in ES-6 that allows multi-line templates. Remember before we had to add a br tag. This time we add, then we add the same HTML from the last example. This time we add the skill line on a new line. Then we add our constructor. Again, we see class, which is a feature of TypeScript in ES6. The JavaScript equivalent is basically a function. At any rate, the first thing we need to do is declare our types. Typescript is a type language which means we have to declare the type we want our variables to be. If we don't, when we compile we will get an error. This declares the myFramework variable and the mySkill variable will be strings. Then we have our constructor function. In here we will set myFramework to Angular 2, and then we will set mySkill to novice. The final thing we need to do is bootstrap the app. Here we just use bootstrap and the name of the component. After that, save your file and make sure that you're on the root of your project folder. So, that we can compile our TypeScript file. Go to the command line and run, mpm run tsc. This will run the script that we added to the package.json file. It will compile your app.ts to app.js, and then continue running and watching files in the folder. If any further changes are made it will compile again. In order to stop it we can use Control C. After running the compiler, preview the file. If you're using Live Server just run NPM start. When we preview our file we should see the same thing we saw in the last example. We can also add another component in our base component. Go to your app.ts file and copy the TSComponent and paste it above the original. Change the selector to sub-comp. Then remove the first line of the template, the I am learning framework message. Then we change the name of the class to subcomponent. After that, we can remove the myFramework variable type definition. And then remove the this.myFramework property in the constructor. After that, we go to the TSComponent and change the second line of the template to the SubComp component that we just defined. Next we add our directives reference in our view. This is just like the ES5 example. The last thing we need to do is remove the mySkill type definition and the this.mySkill property in the constructor. After that, save. Compile your files. And preview. It should appear the same as before. That is everything you need to know to build components in type square. With the changes to the ES5 syntax at angular 2, the amount of typing is about the same to create a component. But I think it is still worth it to learn type script. I like the idea being able to load just the parts of Angular I need, as opposed to loading the whole framework. On top of that, the features of TypeScript are features that will be present in ES6. So, it doesn't hurt to start getting familiar with them. In the next video, we will talk about dependency, injection, and services.

Back to the top