Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
You are on page 1/ 26
Microsoft’s TypeScript:
JavaScript for the
SharePoint Dev Guy John Liu
Major Sponsors Minor Sponsors
about John Liu
• Senior Consultant for
SharePoint Gurus Sydney
• User Groups, SharePoint Saturday, SharePoint Conferences,
• http://johnliu.net • @johnnliu Contents
• What is TypeScript • Why do we need TypeScript • How • Demo • Pinteresp • Working with your existing JavaScript What is TypeScript
• Free and open source, strongly supported by
Microsoft • Based on ecmascript 4 + ecmascript 6 • Created by the father of C# Anders Hejlsberg • A superset of JavaScript
• To answer why we need JavaScript+, we
need to understand what's wrong with vanilla JavaScript What is the problem
• Why do people hate working in JavaScript?
Problem - dynamic types
• Variables are untyped and dynamic. They are flexible
• Bad because it is so easy to get wrong • var x = 1; var y = x + 1; // OK, type is inferred. can assume x and y are both numbers.
• var x = 1; x = "hello"; // NOT OK, type is mixed up. We can't assume what type is x.
• // I am most guilty too - var i, j, k, x, y, z, a, b, c, i1, i2;
// JS is interpreted. There are no design-time intellisense or compile-time assistance to help you point out errors Problem - scope
• JavaScript's scope looks like C#, but does not
work at a block level. It is at the function level. • It is so easy to get wrong
• var i = 1; if (i == 1) { var i = 2; } var y = function { var i = 3; } Problem - object inheritance is hard • Based on object extension. Not class inheritance (at a syntax level)
• var animal = { var name; };
var cat = jQuery.extend( animal,
var claw = function() { /*claw*/ }; });
• //Syntax complicated, so nobody really does it.
Problem - multiple files
• Last problem for today.
• JavaScript doesn't understand multiple files. • VS.NET helps with <reference>, but doesn't help you check the correctness of your reference code Let's look at TypeScript
• To get started with TypeScript, grab it from
http://typescriptlang.org this includes VS2012 extensions • Next, grab Web Essentials 2012 VS Extension. http://visualstudiogallery.msdn.microsoft.com /07d54d12-7133-4e15-becb-6f451ea3bea6 TypeScript - first glance - optional strong type checking
• // js function f(x, y) { return x * y; }
• // ts function f(x : number, y : number) : number { return x * y; }
// Type information is enforced in design and
// compile time, but removed at runtime TypeScript - demo.ts
• Let's go see demo.ts in Visual Studio
TypeScript - pinteresp.ts
• see pinteresp.ts - building a sandbox webpart
with TypeScript Real world story
• Brian Harry (of TFS) converts TFS Web UI to
TypeScript • 80,000 lines of code • Heavily tested by unit tests and functional tests, JSLint clean • Finds 13 bugs after initial conversion • http://blogs.msdn.com/b/bharry/archive/2012 /10/24/typescript-a-real-world-story-of-adopti on-in-tfs.aspx How - existing projects - practical guidelines
• Q: I have spaghetti JavaScript how do I
update them to TypeScript?
• You don't have to start with your largest
file. You don't have to convert all your files. Start with the smaller file. Everything will still work. How - existing projects
• #1 copy the JS file and paste into a TS file.
Remember: JS is subset of TS How - existing projects
• #2 Add <reference> for
definition files
• #3 Optional arguments in your functions
• #4 Fix ad-hoc objects to match definition
interfaces.
• #5 Create missing definitions (e.g. 3rd party
JQuery extensions) • Majority of errors are TypeScript asking you to describe the interface better. How - existing projects
• #6 Fix minor issues is TS
• Fix deprecated method references (JQuery.live should be JQuery.on) • Fix Date - Date • These are common issues - easy to find solutions on StackOverflow (the official support forum for TypeScript)
• Good news: That's it!
How - existing projects
• Now, you can start to refactor and improve your TypeScript
• #1 Group utility functions into a separate scope.
Move them out into a commonly shared file. Add Type information and jsdoc comments for them.
• #2 Use F2 rename symbol to finally standardize the
variable/function names in JS, without fearing things would break
• #3 If you are working with a number of files, TypeScript will
now check across files to make sure you are still calling valid functions, if your team member change them. How - existing projects
• Congratulations you (and your team) are on
your way to cleaner, maintainable code In Summary…
• Awesome VS.NET tools for design, compile and
debug • Helps you understand and write better JavaScript • Works with any existing third party JS libraries • Refactoring, multiple files enables code reuse and team work
• Requires very little new learning. Combine
what you already know from Javascript and C#
• TypeScript is great for your SharePoint projects.
