1 html

1 defer 属性
将 script 标签写在 head 标签内，需要使用 defer 属性，延迟执行，否则会无法获取到对应 dom
或者不写defer ，将 script 标签写在 body 标签内
2 浏览器支持 .js 文件，而不支持 .ts 文件，因此 src 中

  1. <head>
  2.   // defer 属性
  3.   <script src='using-ts.js' defer></script>
  4. </head>
  5. <body>
  6.   <input type='number' id='num1' placeholder='Number1'/>
  7.   <input type='number' id='num2' placeholder='Number2'/>
  8.   <button>Add!</button>
  9. </body>

2 js

  1. const button = ducument.querySelector('button')
  2. const input1 = document.getElementById('num1')
  3. const input2 = document.getElementById('num2')
  5. function add(num1, num2) {
  6.   if(typeof num1 === number && typeof num2 === number) {
  7.     return num1 + num2
  8.   } else {
  9.     return +num1 + +num2
  10.   }
  11. }    
  13. button.addEventListener('click', function() {
  14.   console.log(add(input1.value, input2.value))
  15. })
  17. ---------------------------------------------------
  19. function add(num1, num2) {
  20.   if(typeof num1 !== 'number' || typeof num2 !== 'number') {
  21.     throw new Error('Incorrect input!')
  22.   }
  23.   return num1 + num2
  24. }
  26. const number1 = '5';
  27. const number2 = 2.8
  29. const result = add(number1, number2)
  30. console.log(result)

3 ts

1 ! 表示不为空值
2 as HTMLInputElement ts 类型

  1. const button = document.querySelector('button')
  2. const input1 = document.getElementById('num1')! as HTMLInputElement
  3. const input2 = document.getElementById('num2')! as HTMLInputElement
  5. function add(num1: number, num2: number) {
  6.   return num1 + num2
  7. }
  9. button.addEventListener('click', function() {
  10.   console.log(add(+input1.value, +input2.value))
  11. })