typescript quick start

ts file -> tsc (typescript compiler) -> js file.

Try typescript

  1. install node.js
  2. node -v
  3. edit test.ts 
    var message:string = "Hello World" 
console.log(message)
  4. compile typescript file 
    tsc test.ts
  5. run the script 
    node test.js
  6. multiple files compiled at once 
    tsc file1.ts, file2.ts, file3.ts

Simple web application

  1. edit greeter.ts 
    class Student {
 fullName: string;
 constructor(public firstName: string, public middleInitial: string, public lastName: string) {
     this.fullName = firstName + " " + middleInitial + " " + lastName;
 }
}
interface Person {
 firstName: string;
 lastName: string;
}
function greeter(person: Person) {
 return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
  2. compile typescript 
    tsc greeter.ts
  3. edit greeter.html ``` <!DOCTYPE html>
TypeScript Greeter 
4. open **greeter.html** in the web browser

## Use VS Code
1. [Download and install vs code](https://code.visualstudio.com/download)
2. Right click a typescript file to show the context menu. Select **Open with code** menu item.
3. How to word wrap? **ALT+Z** or go to the menu **VIEW| Toggle Word Wrap**.
4. How to compile? **Ctrl+`** or go to the menu **VIEW|Terminal**. Type the command ```tsc .\file.ts --watch```. With **--watch** option it will auto compile when the file changed.
5. Can not find name google? If you use google map api in your code, type the commnad ```npm install --save @types/googlemaps``` to fix the problem.
6. Uncaught ReferenceError: handleLocationError is not defined google maps api? You need to use HTTPS, use a service like https://letsencrypt.org/ (It’s free, automated, and open.)

## FAQ
### add functions to windows with d ts file
1. npm install typings --global
2. Edit typings/custom/window.d.ts:

interface Window { MyNamespace: any; } declare var window: Window;


3. Install the custom typing

typings install file:typings/custom/window.d.ts –save –global

4. Use it.

window.MyNamespace = window.MyNamespace || {};

5. [reference](https://stackoverflow.com/questions/50488121/typescript-add-functions-to-window-with-d-ts-file)

### Use svg point
1. Code

let svg: SVGSVGElement = document.getElementById('svg'); let polyline: SVGPolylineElement = svg.getElementById('polyline'); let point: SVGPoint = svg.createSVGPoint(); point.x = 0; point.y = 0; polyline.points.appendItem(point); ```

  1. Reference

Reference