TypeScript talk overview

Talking Points.md

Features

• Optional static typing
• Classes
• Inheritence
• Interfaces
• Visibility
  • Accessors
• Namespaces
• Modules
• Type inference - stay dynamic
• Type definitions support for existing JavaScript libraries

Easy to Use

• Available as a package from npm
• CLI tool
• Project support

Built for Scale

• Robustness of large projects
• Early feedback of mistakes - CI & CD

Excellent Developer Experience

• IDE integration

Accessible

• Easily transition from vanilla JS
• Target ES3, ES5 and ES6

Typescript Talk Demo Plan.md

Demo Plan

Classes and Types

1. Show index.js with tooltips etc

   console.log('hello world')
   > hello world

2. Show string indexOf with a number - Salsa warnings but no errors, and output is -1.

   console.log('hello world'.indexOf(1))
   > -1

3. Show string containing 1 succeeds.

   console.log('hello 1 world'.indexOf(1))
   > 6

4. Create a class with a single property, showing Code unable to inspect the types.

   "use strict"
   
   class Thing {
     constructor() {
       this._that = 'thing'
     }
     
     get That() {
       return this._that
     }
   }
   
   console.log(new Thing().That)

5. Rename the file to index.ts and demonstrate the errors with the undefined property.

6. Create the property as string.

   class Thing {
     _that: string

7. Build the project, and look for prompt to configure the tast runner.

8. Configure task runner and change the name of the file in args to index.ts.

9. Build the project and demonstrate the console complaining about ECMAScript 5 or higher. Show the new index.js created, with es5 code.

10. Edit the build task and remove all arguments.

11. Create tsconfig.json with "target": "es5", build & show the output and error, then set to es6 and show the error disappear.

12. Build the project to show it compiling.

13. Open index.js to the side to show it when it recompiles every time.

14. Change the console.log line so the private value is used, and build.

    console.log(new Thing()._that + 1)

15. Change the property to be private and demonstrate the error when building, but show the output, and it still running in node.

16. Create thing.ts and move the class into it, and build.

17. Demonstrate F12 to jump to the class.

18. Run node and watch it fail:

    console.log(new Thing().That + 1);
                ^
                
    ReferenceError: Thing is not defined

19. Go to thing.ts and add export class and "use strict" to export the class.

20. Go to index.ts and import the class with import {Thing} from './thing'.

21. Build and run, see node say SyntaxError: Unexpected token import

22. Explain that this is a feature not yet implemented in Node.js and set "module": "commonjs" in tsconfig.json.

23. Build and run. Output should work - show files.

24. Switch module types and explain that they can be used in browsers and with different module systems.

25. Show different combinations of target and module.

Type definitions for exsiting libraries

1. In index.ts import fs with import * as fs from 'fs' and build. Show the error.
2. Show the __dirname trick in index.js and download node.d.ts.
3. Reload TypeScript and show the error disappear.
4. Change console.log to fs.writeFileSync and run, displaying the output.
5. Add a 1 infront of the filename and build to show how forgiving TypeScript is.