TypeScript 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Hello World


  前面我们介绍了什么是TypeScript,那我们就先来看一个经典的程序Hello World。代码如下:

<script type="text/typescript">
  var hw:string="Hello World!";     //定义一个字符串变量
  document.write(<h1>"+hw+"</h1>);  //将结果显示在页面上,这句话是不是很熟悉呢。
</script>

  看到这里同学们是不是感觉很熟悉,没有错,就是这样,我们可以把javascript的代码用到TypeScript里面运行。同学们也看到上面的代码是写在script标签中,注意其中的类型是typescript。如果想在页面上直接编译看到结果,还需要引用typescript.min.js与typescript.compile.min.js。如下代码:

<html>
<head>
  <title>demo</title>
</head>
<body>
  <script type="text/typescript">
     // TypeScript代码
  </script>
  <script src="lib/typescript.min.js"></script>
  <script src="lib/typescript.compile.min.js"></script>
</body>
</html>

  同学们在使用右边的练习环境时,可以直接将typescript的代码写到标签之间。点击【提交运行】按钮就可以运行代码了。

在右面的编辑器中去试一试吧!