Make sure your tsconfig looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "compilerOptions": { "target": "es6", "lib": [ "dom", "es6", "dom.iterable", "scripthost" ], "module": "commonjs", "noImplicitReturns": true, "outDir": "./dist", "sourceMap": true, "typeRoots": [ "node_modules/@types" ], "removeComments": false }, "compileOnSave": true, "skipLibCheck": true, "exclude": [ "node_modules" ], "include": [ "**/*.ts", "**/*.tsx" ] } |
In order to include comments, remember to put “removeComments”: false
Now we can code up our app.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
let appId = 'abc'; console.log('--- app readying ---'); const button = document.querySelector('button')!; function add(n1: number, n2: number) { if (n1 + n2 > 0) { return n1 + n2; } return null; } function clickHandler(message: string) { // let userName = 'Max'; console.log('Clicked! ' + message); } // a comment if (button) { button.addEventListener('click', clickHandler.bind(null, "You're welcome!")); } console.log('-- ready to run -- √√√'); |
We included “dom” in our “lib” array in our tsconfig.json file. Thus, we can use document object. We declare a button handler and an add function. We
In the terminal:
tsc
to create app.js. This app.js is created inside a dist folder as indicated by outDir in our tsconfig.json.
Thus, in our index.html, we are able to use it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Understanding TypeScript</title> <script src="dist/app.js" defer></script> </head> <body> <button>Click Me</button> </body> </html> |
After that start the server:
npm start
Then start the debugger
Run through the initialization breakpoints.
Test the button handler breakpoint.
