从零开始学Typescript-第一个TS程序

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:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本

解决方案:https://blog.csdn.net/dujyong/article/details/106359483
解决完这个问题后,可能还报错:

这个报错是因为文件里面没有ts代码,所以无法报错,只要添加ts代码就可以了

然后在index文件中引用对应的js代码即可

posted @ 2021-03-12 18:39  LY-CS  阅读(378)  评论(0编辑  收藏  举报