- 在
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>
