Typescript教程_typescript在线运行

Typescript教程_typescript在线运行前言由于最近在使用vue3写项目,使用vue3的前提就是要学习TypeScript,TypeScript算是JavaScript的升级版,TypeScript包含JavaScript和自己的一些特性

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

由于最近在使用vue3写项目,使用vue3的前提就是要学习TypeScript,TypeScript算是JavaScript的升级版,TypeScript包含JavaScript和自己的一些特性
 

介绍

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。2012年10月,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript
TypeScript的作者是安德斯·海尔斯伯格,C#的首席架构师。它是开源和跨平台的编程语言。

  • TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以运行在TypeScript环境中。
  • TypeScript是为大型应用的开发而设计,并且可以编译为JavaScript。
  • TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持**,它由 Microsoft 开发,代码开源于 GitHub 上
  • TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持,它由 Microsoft 开发,代码开源于 GitHub (opens new window)上
     

安装

安装TypeScript的命令很简单

npm install -g typescript

安装完成后,检查安装是否成功,命令如下:

tsc -V 

 

编译

当我们编写好TypeScript代码后,是无法在浏览器上运行展示的,我们浏览器上最后呈现的都是JavaScript代码,所以我们需要将TypeScript代码编译成JavaScript代码
 

先创建一个01_typescript.ts文件,编写如下代码:

function sayHi(str:string) {
    return "您好呀" + str
}
let text = "james"
console.log(sayHi(text))

接下来进行手动编译,需要将01_typescript.ts文件编译成01_typescript.js文件,只需要在当前目录下执行如下命令:

tsc 01_typescript.ts

输出结果为一个01_typescript.js文件,它包含了和输入文件中相同的 JavsScript 代码。
接着,在命令行上,通过node.js运行这段代码

node 01_typescript.js

控制台输出

您好呀james

下一章将介绍如何在WebStorm中进行自动编译

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166049.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • jpa(一)—-spring-data-jpa 复杂查询,包括多表关联,分页,排序等「建议收藏」

    jpa(一)—-spring-data-jpa 复杂查询,包括多表关联,分页,排序等「建议收藏」转载:由于此转载文章的出处也是转载的,所以原作者不详本篇进行Spring-data-jpa的介绍,几乎涵盖该框架的所有方面,在日常的开发当中,基本上能满足所有需求。这里不讲解JPA和Spring-data-jpa单独使用,所有的内容都是在和Spring整合的环境中实现。如果需要了解该框架的入门,百度一下,很多入门的介绍。在这篇文章的接下来一篇,会有一个系列来讲解mybatis,这个系列从myb…

    2022年4月28日
    184
  • Doris Compaction机制总结

    Doris Compaction机制总结1 参考文档 Doris 最佳实践 Compaction 调优 1 Doris 最佳实践 Compaction 调优 2 Doris 全面解析 DorisCompact 机制解析按顺序读完这三篇文章 就能对 Doris 的 compaction 机制很熟悉了 2 总结 2 1 读写方式 2 1 1 写入 Doris 数据写入模型使用了 LSM Tree 随机写变为顺序写 面向写优化 数据追加的方式写入磁盘 2 1 2 读取读逻辑上 需要通过 Merge on Read 方式 2 2 3 compaction 目的

    2025年7月9日
    2
  • 实验:ospf与BFD联动实验(EVE模拟器-Cisco)「建议收藏」

    实验:ospf与BFD联动实验(EVE模拟器-Cisco)「建议收藏」一、实验拓扑二、实验要求请完成以下需求:1、设备互联地址如拓扑所示;2、R1与R2、R2与R4、R1与R4之间运行OSPF,互联地址建邻,协议号123;3、配置bfd与ospf联动,并观察其bfd配置之后有何效果。三、实验配置过程1、配置AR1、2、3的IP地址AR1:hostnameAR1//修改名称interfaceGigabitEthernet0/0//进入接口ipaddress20.0.0.1255.255.255.0//配置IPAR2:hostname

    2022年5月3日
    60
  • 《学习笔记10》——JavaScript三目运算符的使用[通俗易懂]

    《学习笔记10》——JavaScript三目运算符的使用[通俗易懂]三目运算符是多种语言中,都有的一种语法,这里着重讲解JavaScript里的用法。1.判断基本语法:expression?sentence1:sentence2当expression的值为true时,执行sentence1,否则执行sentence2,请看如下代码:3>0?2:1等价于:if(3>0){return2}else{return1}意思是,当3>0成立时,返回2,否则返回1

    2022年6月22日
    34
  • android开发之GPS定位详解

    一、LocationManagerLocationMangager,位置管理器。要想操作定位相关设备,必须先定义个LocationManager。我们可以通过如下代码创建LocationManger对象。LocationManger locationManager=(LocationManager)this.getSystemService(Context.LOCATION_SERVICE

    2022年3月10日
    42
  • hi3516DV300_hi3531

    hi3516DV300_hi3531一.方案架构二.应用场景三.特点四.SDK包内容

    2022年9月24日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号