This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    TypeScript - Using Typings and Loading From node_modules

    John LindquistJohn Lindquist

    Using TypeScript when installing packages from npm often requires you to install related definition files. This lesson shows you how to use typings to install es6-shim then how to configure SystemJS to load from node_modules.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 There are few projects on NPM that already include the definition files or the typings like RxJS. If I go ahead and just saved that. You've installed RxJS from NPM.

    00:11 Now, I'll switch over to my main, and you'll see if I import RxJS, that it's going to throw some errors here about can't find promise. One way to fix this in the future will be to hop over to our tsconfig, switch over to a target of ES 6. That way, promises and all the ES 6 features will be available.

    00:36 Just to show what I mean, I'll restart the types of compiler. Sometimes, if you change the tsconfig, you usually need to restart the types of compilers, what gets all those changes from your configuration.

    00:48 Then if you switch over to main.js, you can see that use this classes and other ES 6 features, that it wouldn't have used if it would've been ES 5. We'll hit that, and I'll recompile. You can see you run into these promise errors again when we're targeting ES 5, and it's doing classes in the ES 5 way.

    01:09 What we need to do is typings, install ES 6-shim. We'll save it. We're also going to throw in the ambient flag so that goes out the looks for ES 6-shim in all possible locations. I'll find it the different repository than the normal one.

    01:27 We got ES 6-shim. You'll see that in the typings now. If I look into my browser, ambient, there is my ES 6-shim definition file. Then all my errors went away. Now on my main.ts, I can import RxJS just fine.

    01:43 Even though RxJS had its definitions inside of node modules, it relied on some ES 6 features like promises, where you need to go out and get the ES 6-shim, which someday you won't need to do, because you could just target ES 6. For now, it's much safer to target ES 5. I'll go ahead and use my RxJS.

    02:06 Import, let's say, observable, grab observable off of it. Then, I'm also going to want to import RxJS, add observable timer. So, I can do something like observable timer. Every one second, push out a value. We'll subscribe to that. Then just log out the output. Now, when I hit save and this recompiles, I won't get any errors. But when I refresh, I'll run into that same can't find the things that I tried to import.

    02:49 Remember, type script does not do anything to load these for you. It just is going to write these require statements, and you need to configure how to load them yourself. In this case, from node modules, we're going to map RxJS to node modules/RxJS. Make sure I had the comma there. Now, we'll hit save. I'll refresh.

    03:18 You'll see this time a little bit different behavior. Now, it's trying to load add/observable/timer, which is a directory or a file without an extension, meaning that we need to configure another package, this one being RxJS.

    03:33 Just give it the same default extension, so that we know we're loading JavaScript files. I'll hit save again. In this way, it'll append the .js to the end of this when I reload. I'll reload now. You can see, we get true, and then it's going to start logging out the timer. It hit zero.

    03:50 Let's switch that over to interval, import interval as well, switch this to interval, hit save. This will compile for us, so I'll refresh. Now, we get true, zero, one two, It's running this interval.

    04:07 You can see on our main that it's requiring interval and in our network, that it's loading in all the things necessary, each individual file necessary to make those work, because now we've mapped our system JS so that any files it needs, it's going to look in RxJS and load all those individual files.

    04:30 I just want to re-emphasize, no matter what sort of module loader you use, whether it's system JS or anything else, there will be configuration required on how you load it up, because type script is just outputting files and you need to tell these files what it's supposed to do with require.

    Discuss

    Discuss