TypeScript Uncaught SyntaxError: Unexpected token ':' 在 html

在 html 中直接引入 typescript 的 .ts 文件报错：Uncaught SyntaxError: Unexpected token ':'

test.ts

// 包含 ts 语法代码
(() => {
  function sayHi (name:String) {
    return `Hello World! - ${name}`
  }
  let name = 'DZM'
  console.log(sayHi(name))
})()

// 纯 js 语法代码
(() => {
  function sayHi (name) {
    return `Hello World! - ${name}`
  }
  let name = 'DZM'
  console.log(sayHi(name))
})()

index

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 直接引入 ts 文件，浏览器是会报错的，但是得区分情况： -->
  <!-- 如果 ts 文件中只有单纯的 js 语法代码，是可以正常引入使用的，不会报错，但是存在 ts 的语法代码，就会报错！ -->
  <script src="./test.ts"></script>
</body>
</html>

由于浏览器不能直接解析 ts 语法代码，则需要将带有 ts 语法的 .ts 文件编译成 .js 文件，然后在引入这个编译成功的 .js 文件：

$ tsc test.ts
# 编译成功后会得到一个 test.js 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 引入由 .ts 文件编辑成功得到的 .js 文件 -->
  <script src="./test.js"></script>
</body>
</html>