一文搞懂TypeScript的安装、使用、自动编译的教程

1. 初识 TypeScript

上篇文章给大家介绍过TypeScript的安装、使用、自动编译的实现  需要的朋友点击查看。

TypeScript 的介绍

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 的特点

TypeScript 主要有 3 大特点：

始于 JavaScript，归于 JavaScript
      TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。

强大的类型系统
      类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

先进的 JavaScript
      TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。

总结

TypeScript 在社区的流行度越来越高，它非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。

2. 安装 TypeScript

命令行运行如下命令，全局安装 TypeScript：

npm install -g typescript

安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：

tsc -V

3. 第一个 TypeScript 程序

编写 TS 程序

src/helloworld.ts

//str这个参数是string类型的
 function aa(str:string){
        return "你好啊" + str
    }
    let text='小可爱'
    console.log(aa(text))

src/index.html

//直接引入了ts的文件，浏览器是会报错的（如果ts文件中只有单词的js的语法，是可以正常引入及使用的）
  <script src="./helloworld.ts"></script>

手动编译代码

我们使用了 .ts 扩展名，但是这段代码仅仅是 JavaScript 而已。

在终端上，运行 TypeScript 编译器：

tsc helloworld.ts

输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。

在终端上，通过 Node.js 运行这段代码：

node helloworld.js

修改src/index.html

<script src="./helloworld.js"></script>

控制台输出：

Hello, Yee

我们再看 helloworld.js 中的代码

 function aa(str) {
        return "你好啊" + str;
    }
    var text = '小可爱';
    console.log(aa(text));

总结

  • ts的文件中直接书写js语法的代码，那么在html文件中直接引入ts文件，在谷歌的浏览器中是可以直接使用的
  • 如果ts文件中有了ts的语法代码，那么久需要把这个ts文件编译成为js文件，在html文件中引用js的文件来使用
  • ts文件中的函数中的形参，如果使用了某个类型进行修饰，那么最终在编译的js文件中是没有这个类型的
  • ts文件中的变量使用的是let进行修饰，编译的js文件中修饰就变成了var了

vscode 自动编译

1). 生成配置文件tsconfig.json

步骤：
   新建文件夹，打开终端，输入命令，会自动生成tsconfig.json配置

tsc --init

2). 打开该文件修改tsconfig.json配置

 "outDir": "./js",
    "strict": false,

3). 启动监视任务:

终端 -> 运行任务 -> 显示所有任务->监视tsconfig.json

再次修改保存，就会自动生成对应的js文件。

以上就是一文搞懂TypeScript的安装、使用、自动编译的教程的详细内容，更多关于TypeScript安装使用自动编译的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 为什么TypeScript的Enum会出现问题

    为什么TypeScript的Enum会出现问题

    目录 发生了什么呢? 什么时候用 控制枚举的数字 Bit值 控制索引 非数字枚举 结论 TypeScript引入了很多静态编译语言的特性,比如class(现在是JavaScript的一部分了),interface, generics和union types等. 但是今天有一个类型需要着重讨论下,这就是enum. 对于很多的静态语言来说,枚举是一个很非常常见的语言特性.比如,c,c#,java和swift.枚举就是你在代码里可以用的一组常量. 我们用TypeScript来新建一个enum来代表一周

  • TypeScript 中如何限制对象键名的取值范围

    TypeScript 中如何限制对象键名的取值范围

    当我们使用 TypeScript 时,我们想利用它提供的类型系统限制代码的方方面面,对象的键值,也不例外. 譬如我们有个对象存储每个年级的人名,类型大概长这样: type Students = Record<string, string[]>; 理所当然地,数据就是长这样: const students: Students = { Freshman: ["David", "John"], sophomore: [], Junior: ["Lil

  • 详解TypeScript映射类型和更好的字面量类型推断

    概述 TypeScript 2.1 引入了映射类型,这是对类型系统的一个强大的补充.本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型.根据咱们指定的规则转换现有类型的每个属性.转换后的属性组成新的类型. 使用映射类型,可以捕获类型系统中类似Object.freeze()等方法的效果.冻结对象后,就不能再添加.更改或删除其中的属性.来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } inte

  • Typescript中的as、问号与感叹号详解

    1.as关键字表示断言 在Typescript中,表示断言有两种方式.一种是扩号表示法: let someValue: any = "this is a string"; let strLength: number = (someValue).length; 另一种使用as关键字: let someValue: any = "this is a string"; let strLength: number = (someValue as string).length

  • 深入理解typescript中的infer关键字的使用

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型. 例如:用infer推断函数的返回值类型 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type fn = () => number type

  • 教你使用webpack打包编译TypeScript代码

    TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac

  • 一文搞懂TypeScript的安装、使用、自动编译的教程

    一文搞懂TypeScript的安装、使用、自动编译的教程

    1. 初识 TypeScript 上篇文章给大家介绍过TypeScript的安装.使用.自动编译的实现  需要的朋友点击查看. TypeScript 的介绍 TypeScript 是一种由微软开发的开源.跨平台的编程语言.它是 JavaScript 的超集,最终会被编译为 JavaScript 代码. 2012 年 10 月,微软发布了首个公开版本的 TypeScript,2013 年 6 月 19 日,在经历了一个预览版之后微软正式发布了正式版 TypeScript TypeScript 的作

  • 一文搞懂如何部署启动多个tomcat并移植项目

    一文搞懂如何部署启动多个tomcat并移植项目

    目录 部署tomcat 一.下载解压 二.修改配置文件 移植项目 一.打包原项目 二.复制到tomcat 三.访问试试 有时候我们在编写web项目时,有好几个项目需要同时运行,但直接放置war包总会出各种问题,比如说同一个Tomcat 同一个端口 部署多个项目,或者同一个Tomcat 多个端口 部署多个项目,经过几番测试决定分享给大家,jdk的安装就不多讲了,配好环境变量就可以,下面给大家介绍详细操作流程: 部署tomcat 一.下载解压 官网下载tomcat,并解压 二.修改配置文件 打开co

  • 一文搞懂Go语言操作Redis的方法

    目录 前言 安装依赖包 连接redis redis连接池 总结 前言 Redis是一个开源的内存数据库,在项目开发中redis的使用也比较频繁,本文介绍了Go语言中go-redis库的基本使用.感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助. 安装依赖包 Go语言中使用第三方库go-redis go-redis支持连接哨兵及集群模式的Redis. 使用以下命令下载并安装: go get -u github.com/go-redis/redis/v8 连接redis 新建go文件,在项目中引入

  • 一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()

    一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()

    目录 前言 什么是Concurrent React? 设置项目 实现 useTransition() isPending 是做什么的? 前言 React 18 引入了一个关键的新概念,称为“Concurrent”. 并发涉及同时执行多个状态更新,这可以说是 React 18 中最重要的特性.除了并发之外,React 18 还引入了两个新的钩子,称为 useTransition() 和 useDeferredValue() 钩子. 它们都有助于降低状态更新的优先级,但问题是,何时应该使用它们? 什

  • 一文搞懂阿里云服务器部署Redis并整合Spring Boot

    一文搞懂阿里云服务器部署Redis并整合Spring Boot

    目录 一.什么是Redis 二.Redis的优缺点 三.阿里云服务器部署安装Redis ️在Linux服务器新建文件夹存放Redis 测试连接 四.关闭防火墙,配置Redis访问端口 配置Redis 关闭防火墙 阿里云控制台添加6379接口访问 五.Spring Boot 整合 Redis ️项目结构 核心源码 ️测试结果 总结 一.什么是Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链

  • 一文搞懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 •一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值. •Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是. •Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算. •Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突.

  • 一文搞懂hashCode()和equals()方法的原理

    Java中的超类java.lang.Object 有两个非常重要的方法: public boolean equals(Object obj) public int hashCode() 这两个方法最开发者来说是十分重要的,必须清楚的理解,但实际上,甚至很多经验丰富的Java开发者有时候也没有真正搞清楚这两个方法的使用和原理.当我们自定义了对象,并且想要将自定义的对象加到Map中时,我们就必须对自定义的对象重写这两个方法,才能正确使用Map.我们接下来将用这篇文章指出在使用hashcode和equ

  • 一文搞懂c# await,async执行流

    昨天有朋友在公众号发消息说看不懂await,async执行流,其实看不懂太正常了,因为你没经过社会的毒打,没吃过牢饭就不知道自由有多重要,没生过病就不知道健康有多重要,没用过ContinueWith就不知道await,async有多重要,下面我举两个案例佐证一下? 一:案例一 [嵌套下的异步] 写了这么多年的程序,相信大家都知道连接数据库少不了这几个对象,DbConnection,DbCommand,DbDataReader等等..先来看看ContinueWith在连接数据库时嵌套过深的尴尬.

  • 一文搞懂C++ 动态内存

    了解动态内存在 C++ 中是如何工作的是成为一名合格的 C++ 程序员必不可少的.C++ 程序中的内存分为两个部分: 栈:在函数内部声明的所有变量都将占用栈内存. 堆:这是程序中未使用的内存,在程序运行时可用于动态分配内存. 很多时候,您无法提前预知需要多少内存来存储某个定义变量中的特定信息,所需内存的大小需要在运行时才能确定. 在 C++ 中,您可以使用特殊的运算符为给定类型的变量在运行时分配堆内的内存,这会返回所分配的空间地址.这种运算符即new 运算符. 如果您不再需要动态分配的内存空间,

  • 一文搞懂MySQL预编译

    1.预编译的好处 大家平时都使用过JDBC中的PreparedStatement接口,它有预编译功能.什么是预编译功能呢?它有什么好处呢? 当客户发送一条SQL语句给服务器后,服务器总是需要校验SQL语句的语法格式是否正确,然后把SQL语句编译成可执行的函数,最后才是执行SQL语句.其中校验语法,和编译所花的时间可能比执行SQL语句花的时间还要多. 如果我们需要执行多次insert语句,但只是每次插入的值不同,MySQL服务器也是需要每次都去校验SQL语句的语法格式,以及编译,这就浪费了太多的时

随机推荐