>> Did you buy something for yourself?
>> Yes.
>> On my card?
>> Yes.
>> By the way,
thanks for getting dressed up for this interview.
>> Oh thanks.
>> I appreciate it.
>> I wanted to- well I'll wrap in.
>> You look really nice.
>> I got this at the campus store.
>> Hi Burke Holland.
>> And I'm Jonathan Creamer.
>> And we're in Historic Downtown
Franklin Tennessee to bring
you five things that TypeScript can do for you.
>> Grays on Main is an amazing restaurant,
and I love the bar up here.
They have this drink called the Anthem Spirit.
>> What's an Anthem Spirit?
>> Man, hands down on my favorite drinks around.
>> Really!
>> They stir it for like five minutes- whiskey.
>> You can't talk about alcohol.
>> Sorry.
>> Number one. TypeScript can help
prevent bugs, but how does that work?
>> Well, part of it is the
whole static vs dynamic typing thing,
that's kind of like a rift in the community,
you've got your static people
and you've got your dynamic people.
But, really static typing can help save
bugs or prevent bugs whether you like it or not,
and there's actually a really cool study,
I've forgotten the name of the guy who did it,
but basically what they did is,
they analyzed a bunch of GitHub repositories,
and they came up with this pretty accurate study on
all the different types of bugs that they had found in
all these top trending repositories in GitHub,
and they found that on average,
just by adding static typing with
either TypeScript or Flow to your repo,
you could reduce your bugs by like as high as 15 percent.
>> 15 percent. Wow!
>> Yes. And there's a lot of good reasons why,
especially with something like JavaScript
that's dynamically typed.
You can easily pass in
a number where you expect a string,
and call some sort of method that
doesn't work on the perimeter you passed in,
so just adding TypeScript or Flow
really helps solve a lot of those kinds of
problems were just boneheaded things or
misspellings in a class function,
and then you get into working with VS Code or
tooling that supports TypeScript and static typing,
then that really helps even further because you're
not just guessing at what a function is,
you actually know because
the TypeScript Type-Checker tells you what's on your.
>> And it enables the tooling to do that?
>> Yes, it does.
>> That sounds great.
Plus you've referenced a vague scientific study,
so it must be true.
>> Absolutely yes. Of course.
I can't remember the name of it,
I'll have to find it.
But yes, it is a thing. I promise, it's a cool thing.
>> Okay. We'll take your word for it.
>> Yes.
>> Number two. TypeScript can help you
ship built-in documentation. What?
>> Well, that kind of comes with 7.1,
which is that static typing
enables you to do things where
you can suddenly infer what your methods have on them,
what your class have on them,
without you having to go read through docs.
Especially in VS code,
you can just basically say,
new thing and then say hit a dot,
and then all of sudden
you're Microsoft IntelliSense stuff
pops up and you see what's all on it.
>> Right.
All the methods and properties that are available.
>> Right. Exactly. And especially if you have that in
there and you just hit
that dot and you see it's all there,
you don't have to go read docs to find
out what your API methods are for classes.
Actually, there's a cool tool,
I forget the name of it, but you can
basically run TS Docs,
I think it is, and it will actually
go and parse all of your classes
and methods and generate
a huge documentation file thing for you.
>> Really?
>> Yes.
>> TS Docs. You should check that out. That sounds good.
>> Yes, and that's a really nice feature too,
and you get that just by
adding that static typing to your doc-.
>> It's great when your documentation is in
your code because nobody reads the docs.
I definitely don't read the docs.
>> No.
>> But it's something the JavaScript Developers
aren't really used to having.
Actually, I remember going to
through the jQuery documentation
like 600 times a day,
trying to remember what methods
and properties that were involved.
>> Exactly. So what's cool is,
there's a library called DefinitelyTyped that has
tens of thousands of different typing files in it,
so there is one for jQuery.
If we had that now, you would imagine where,
like you said, you'd go to read JQuery docs or whatever.
Now, use a dollar sign,
parentheses and all of a sudden it's like,
this takes this selector and you can say dot
and do whatever thing underneath it.
>> It doesn't say, if you put a dollar sign,
it doesn't say, you put
dollar sign and then it says, use React?
>> No it does not say that.
>> Okay. I'm never going to give them.
>> That would be a funny history.
>> Yeah. I'm never going to give you
up jQuery. Never. You can't make me.
>> Never going to give you up.
>> Like Rick Astley.
>> Number three. TypeScript can help you
work with JavaScript files.
This is kind of a weird one because
it's not what you would expect.
>> Right. I think it was the 2.5 release of TypeScript,
they released some features that allow
you to work with JavaScript files.
You can adjust your tsconfig a
little bit and then all of a sudden,
you don't even have to start writing
TypeScript just straight out of the gate,
you can actually start adapting your
JavaScript projects right away,
and there's a couple of ways you can do that.
It comes, in VS code there's
a setting that can start checking that for you,
and then what you can do, speaking of documentation,
the one thing I have seen a lot of libraries uses JSDoc.
It's just that little waxed star, star,
and then you can say add param and add whatever on there.
The texture compiler now will read
those JSDoc comments and attach typing to the IDE.
>> So you can put types in the
JSDoc comments and the compiler will use that?
>> Correct, yes, exactly. And it's just
standard what you would writing JSDoc.
If you say like add param,
num and then you say in curly braces number.
>> So what the compiler allow me to
use things like Async/await
in JavaScript would automatically transpile that for me?
>> Yes. The TypeScript compiler can do that as well.
>> On regular JavaScript files?
>> Yes. You can change your allowJS,
there is a setting called allowJS in tsconfig.
And then all of a sudden you're basically just writing
JavaScript and it'll still-.
>> But without its features.
>> Yes. Your target can be set to
ES 5 or whatever and it will ship with.
>> Nice.
>> I did find this out recently,
you do still need to provide
Polyfills for Promise, for old browsers.
I had a bug report come in like
literally yesterday because of this,
because it doesn't ship with Promise.
IE 11 doesn't, so I had to
go in and add a Promise Polyfill-.
>> Wait a minute. You got a bug report coming in,
but thing number one was prevent bugs.
>> Well, that's my fault for.
>> Jonathan either prevents bugs or he doesn't.
>> That's my fault for not testing it in old browsers.
>> Testing?
>> Yes. IE 11.
>> Nobody tests.
>> I didn't browse a test.
>> Testing is for conference sessions, not for real life.
>> Thankfully we have a QA guy now,
who finds bugs for a living.
>> And if he doesn't then it's on him. You're fired.
>> Yes, that's true. What's this?
>> Number for four.
>> Coughing my in lungs. That was a disaster.
>> Number four, you can use
TypeScript to build Serverless functions in Azure.
>> Well, kind of.
It's experimental but by the time you see
this video it may be,
so Azure functions, is
coming with support for TypeScript.
>> I built one, so
hopefully that means it's good enough to.
>> You already build a Serverless function in TypeScript?
>> Yes. I definitely did.
>> Am I supposed to be impressed?
>> You should be. Like.
>> All right. I guess I kind of am, to be honest.
So be like Jonathan, check out the
experimental or production support for
TypeScript in Azure functions when you
watch this video. We don't know when that would be.
>> Number five. TypeScript can make building
of React apps even easier.
>> Yes, this is true.
>> How's that?
>> Well, because of the fact that you
have the static typing,
one of the things that I found
building just JavaScript React components was that,
with TypeScript you write
these interfaces and you say this is
a React component that
takes generic types for your props.
So all of a sudden in VS Code,
when you create a new Dashboard component
and you hit that props dot,
you see all the different props,
and even drill down further,
like if it takes a color,
could say Dashboardprops. blue
>> So basically it provides IntelliSense
for your components?
>> Yes, which is incredibly helpful especially like we
have a crap-load of React components in our app.
>> That's an actual measurement?
Crap-load is a number,
Google metric crap ton.
>> Yes. So yeah we have a lot of components and so
it's really hard to remember which things take which.
So with this tooling,
with the TypeScript's interfaces and props,
you'd only have to remember that stuff which is built in.
>> That does sound nice.
>> It is nice.
>> Check that out. I'm Burke Holland.
>> And I'm Jonathan Creamer.
>> And now you know five things
the TypeScript can do for you.