index.html引用ts
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="./01_第一次的ts.js"></script>
</body>
</html>
ts文件内容
(()=>{
function sayhi(str){
return 'Hellow,'+str
}
let text = 'World'
console.log(sayhi(text))
})()
注意html中不能直接引用ts文件,需要转换为js才行。
通过一下代码进行转换生成js文件,然后引用即可
tsc xx.ts
总结:
1.ts文件中如果直接书写js语法的代码,那么在html文件中直接引入ts文件,在谷歌的浏览器中是可以直接使用的。
2.如果ts文件中有ts代码,则必须编译成js,才能在html中引用。
3.如果ts文件中的函数中的形参,如果使用了某个类型进行修饰,那么最终在编译的js文件中是没有这个类型的。
4.ts文件中的变量使用的是let进行修饰,编译的js文件中的修饰符就变成var
vscode中自动编译ts代码
生成tsconfig.json
tsc --init
修改文件中的几项
//把ts文件最终编译后放在ts目录中
"outDir": "./js", /* Redirect output structure to the directory. */
//不适用严格模式
"strict": false, /* Enable all strict type-checking options. */
第二步,找到vscode中的终端——》运行任务——》所有任务-》监视ts
这个时候可能报错误
无法加载文件 C:UsersAdministratorAppDataRoaming
pm sc.ps1,因为在此系统上禁止运行脚本
解决方案:https://blog.csdn.net/dujyong/article/details/106359483
解决完这个问题后,可能还报错:
这个报错是因为文件里面没有ts代码,所以无法报错,只要添加ts代码就可以了
然后在index文件中引用对应的js代码即可