Building SharePoint solutions with Microsoft's TypeScript: why and how
/
I wanted to write up a summary of this presentation that I've had the chance to present at two recent events: SharePoint Saturday Perth (09/03/2013) and Sydney SharePoint User Group (13/03/2013).
This is a blog post aiming to cover both the feedback I've received, as well as additional notes to the presentation that I may not have covered due to time constraints.
A new and improved version of this entire presentation will be shown at the Australian SharePoint Conference in Sydney, come to my session then!
Introduction
- To cover why, oh why we need another scripting language. (~15mins).
- What is TypeScript
- TypeScript is free, open source and supported by Microsoft
- It is based on ECMA4 standards with ECMA6 proposals.
- Created by the father of C# - Anders Hejlsberg
- It is a superset of JavaScript
- Why do we JavaScript+
- JavaScript: The Good Parts vs. JavaScript: The Definitive Guide
- History of JavaScript, but now we use it as a programming language for all sort of things.
- JavaScript is not suited for large applications.
- As your JavaScript codebase gets large, it is unwieldy.
- JavaScript Problems
- Untyped variables
- key: JavaScript is interpreted. There are no design-time or compile-time assistance to help you point out errors
- Object-extension based, not class-based inheritance.
- Key: although object inheritance is possible, it is too messy, so we learn to live without it.
- This means we are back in an age where we don't define contracts for our code, we don't describe the shape or capabilities of our object upfront, we expect it to all just work at runtime.
- Parameters - not taken seriously
- Key: they are sort of like guidelines.
- Caller can still do whatever they want. Callee has to be defensive and check everything.
- Scope - while JavaScript shares a similar syntax to C-based languages, it only doe scope at new function levels.
- Hoisting
- Key: an example where JavaScript is so easy to get wrong, with strange weird results.
- Multiple Files
- Last problem for today.
- JavaScript doesn't understand multiple files. Visual Studio helps with <reference>, but VS.NET doesn't help you check the correctness of your reference code.
Let's look at TypeScript
- To ease audience into TypeScript (switch from thinking mode to demo mode ~1min break/reset)
- How do you install it?
- Grab it from http://typescriptlang.org this includes extensions for VS.NET 2012.
- You can do it with VS.NET 2010, but there are manual bits involved. Installer doesn't help you.
- First glance
- Key: a TypeScript function is a JavaScript function with more, optional, bits.
TypeScript Demo
- To show simple TypeScript language features (~15min)
- Function type checking
- Intellisense
- Generated code
- Best way to describe this. TypeScript is option strict for your JavaScript.
- Function optional parameters
- Module
- Generated code. Talk about how JavaScript namespace / scope is possible, but very easy to screw up.
- Interfaces
- Defines the shape of an object. TypeScript works with Shapes.
- Definition files
- jQuery - jQuery methods are smarter with TypeScript.
- SP.UI.ModalDialog.showModalDialog
- Wrong Url parameter
- Interfaces are open - so you can extend it
- Class-based inheritance
- Generated code.
- Export keyword
New Project - Pinteresp webpart Demo
- To show a Complex example of TypeScript and debugging. (~10min)
- Module with:
- 2 interfaces, 3 helper functions, 2 classes and a jQuery ready event handler.
- Create a PictureLibrary object. Call Load()
- This populates an Items() array with PictureItem objects.
- Call Render() to display to screen.
- Show how to write the Load method.
- Show SourceMap debugging.
Using TypeScript on your existing projects
- Discuss strategies to get TypeScript onto an existing project (~10 min)
- Get it to work first
- You don't have to tackle everything at once. Start with the simple JavaScript file.
- Copy everything from JS to TS
The errors that you will see are all related to the fact that TypeScript doesn't know what the objects you are referring to are. - Fixing the initial errors
- Add References
- Improve your Definition files
- Specify optional parameters
- Some specific issues - the main support forum is http://stackoverflow.com/questions/tagged/typescript, and they are very responsive. I blog issues I come across along the way.
- Refactor - now you can finally clean up that old JavaScript code
- Here are some things you've ALWAYS wanted to do to that nasty script file but were too afraid to break things.
- Move common functions into a shared Utilities module
- Write detailed jsdoc comments for the functions you use, and you expect your team to use
- Use rename to fix up the variable names - John's i, j, k, i1, i2 nastiness.
- Add more type information to your variable declarations to increase the strictness of your code
History of TypeScript
- Release 0.8 to public in 11/2012
- 0.8.1 added Source Map debugging
- 0.8.2 added jsdoc
- 0.8.3 added more debugging options
- 0.9 scheduled to deliver generics in JavaScript. So in my example above, I can use an Array of PictureItem objects, and not just an Array of objects with PictureItem in them.
Summary
- The ideal conclusion I want to get to at this point, is that it should be pretty obvious TypeScript is good for your team and your code.
- If you plan to read your own significant JavaScript after a 3 month break, you need TypeScript.
- If you plan to work on JavaScript with a team, you need TypeScript.
- VS.NET development and debugging experience for JavaScript is not bad, but with TypeScript it is awesome. You need TypeScript.
The Short Summary
- You need TypeScript.
- Grab it from http://typescriptlang.org
- See my blog on /
Questions and Comments
- CoffeeScript / Dart comparison
- CoffeeScript is more mature, has more features.
- CoffeeScript thinks JavaScript is too broken and needs a new simpler, different syntax to fix it. TypeScript thinks JavaScript is not broken enough to be replaced. It just needs to be strengthened.
- TypeScript has strong VS.NET integration.
