TypeScript从入门到放弃(一)

Web分享 2020-05-31

先点赞后关注,防止会迷路

寄语:长风破浪会有时,直挂云帆济沧海。本文已收录至https://github.com/likekk/-Blog欢迎大家star ?????? ,共同学习,共同进步。如果文章有错误的地方,欢迎大家指出。后期将在将github上规划前端学习的路线和资源分享。

前言

亲爱的读者们,大家好,我是杨戬,一个在互联网前端苟且偷生的划水程序员,本编文章开始将带你入坑TypeScript。

个人认为TypeScript的前景还是可以的(可以接受反驳),怎么说呢?现在很多的框架已经从JavaScript向TypeScript拥抱了,谷歌也在大力支持TypScript的扩展,谷歌的Angular2.x+就是基于TypeScript,而且Vue3.0也在使用TypeScript进行重构(道听途说),我也不逼逼那么多了,我们直接开始吧!

TypeScript从入门到放弃(一)

TypeScript介绍

介绍的话我就直接引用一些吧!毕竟有些东西肯定比我讲的好(拥有一颗谦卑的心),

  • TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准,TypeScript扩展了JavaScript的语法。

  • TypeScript 由微软开发的自由和开源的编程语言。

  • TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上

  • 谷歌也在大力支持TypScript的扩展,谷歌的angular2.x+就是基于TypeScript

  • 最新的Vue、React也可以集成TypeScript

  • Node.js的框架nest.js、midway中用的就是TypeScript的语法

这里我多说一句:TypeScript入门十分简单,只要你有JavaScript语言的基础,那么学习TypeScript起来成本是相对较低的,可以不用像学习一门新的语言那样费劲。

TypeScript语言特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。在其上扩展的功能有许多,我们一起来看下都扩展了哪些功能。

  • 类型批注和编译时类型检查
  • 类型推断和类型擦除
  • 接口(interface)、枚举(enum)、Mixin
  • 泛型编程(很多编程语言都有)
  • 名字空间(namespace)
  • 元组(tuple)
  • Await

当然还有一些功能是从ES6移植过来的

  • 类(Class)
  • 模块(module)
  • lambda函数的箭头语法
  • 可选参数和默认参数

简单说几点JavaScript和TypeScript的区别

  • TypeScript是JavaScript的超集,扩展了JavaScript的语法,因此现有的JavaScript代码可与TypeScript一起工作无需任何修改,TypeScript通过类型注解提供编译时的静态类型检查。
  • TypeScript可处理已有的JavaScript代码,并只对其中的TypeScript代码进行编译

TypeScript的优点VSTypescript的缺点

TypeScript的优点

  • TypeScript增加了代码的可读性和可维护性
  • TypeScript非常包容
  • TypeScript拥用活跃的社区

TypeScript的缺点

  • 有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念
  • 短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
  • 集成到构建流程需要一些工作量
  • 可能和一些库结合的不是很完美

TypeScript安装,编译

首先需要安装TypeScript,必须有Node.js的环境,关于Node.js的安装环境推荐大家这一篇博文

Node.js安装配置教程,写得非常详细。

安装完成之后,我们使用命令行看下是否安装成功。

node -v 检查node版本

TypeScript从入门到放弃(一)

node.js环境配置成功之后,我们全局安装一下TypeScript,这里有几种方法供大家使用,大家选择自己喜欢的方法就可以了。

  • 使用npm命令全局安装

npm install -g typescript

  • 使用cnpm命令安装

npm install cnpm --registry=https://registry.npm.taobao.org

cnpm install -g typescript

  • 使用yarn命令安装

npm install -g yarn 或者 cnpm install -g yarn

yarn global add typescript

安装完成之后,我们检查TypeScript是否安装成功

检查命令 tsc -v

如果出现版本信息,那么一般都是安装成功了,这里就不进行截图了

开发工具推荐使用 vscode进行开发,vscode也是微软旗下的产品,使用vscode开发TypeScript,只能用下面那张图来表达我内心的感受。

TypeScript从入门到放弃(一)

当然也还有许多优秀的开发工具,但是我还是首选vscode。

TypeScript从入门到放弃(一)

TypeScript的HelloWorld

所有的一切准备好之后,那就开始我们的开发之旅吧!

首先我们新建一个文件夹,创建好文件夹之后我们新建一个.ts为后缀名的文件,目录结构如下

TypeScript从入门到放弃(一)

然后我们在index.ts文件内编写helloworld代码

let str:string="Hello World"
console.log(str)

TypeScript 转换为 JavaScript 过程如下图:

TypeScript从入门到放弃(一)

刚开始看到这段代码的时候瞬间有JavaScript的影子,和JavaScript声明的变量的代码差不多,就是指定了类型。比较严谨。

由于浏览器是无法识别TypeScript的,所以我们需要将TypeScript进行编译成JavaScript语言,让浏览器可以识别。

tsc index.ts(直接在vscode的控制台执行)

编译之后的代码(index.js):

var str = "Hello World";
console.log(str);

此时编译成功之后该文件夹会自动生成index.js文件,而这个文件就是index.ts进行编译之后的文件。然后我们在新建index.html文件,引入编译之后的inde.js文件。文件目录如下。

TypeScript从入门到放弃(一)

之后运行index.html文件就可以看到输出结果了。

TypeScript开发工具vscode自动编译.ts文件

我们想一个这样的问题,如果每次写一段代码都需要自己编译一下,试想一下工作量有多么大,那么有没有可能可以实现一边写代码一边让它自己进行编译呢?答案是肯定的。

1、使用vscode的控制台输入tsc --init命令

tsc --init

此时目录下会生成一个tsconfig.json文件

找到outDir这是配置项,然后修改自己想要.ts文件通过编译之后在指定地方生成.js文件的目录,我这里是同级目录下js这个文件夹生成.ts编译之后的文件。

修改之后tsconfig.json文件

TypeScript从入门到放弃(一)

接下来看下整个文件的目录结构

TypeScript从入门到放弃(一)
2、配置tsconfig.json文件
  • 找到vscode的Terminal选项

  • 找到Run task选项

  • 选择typescript选项

  • tsc:watch -tsconfig.json

完成这几个步骤之后你就可以疯狂编码了。

TypeScript从入门到放弃(一)

结尾

如果觉得本篇文章对您有用的话,可以麻烦您给笔者点亮那个点赞按钮。TypeScript从入门到放弃(一)

对于杨戬这个暖男来说:真的非常有用,您的支持就是我前进的动力,我们下篇文章见。

【原创】|杨戬

原创不易,请勿白嫖。二郎神杨戬,一个在互联网前端苟且偷生的划水程序员,专注于前端开发,善于技术分享。如需转载,请联系作者或者保留原文链接,微信公众号搜索二郎神杨戬。

TypeScript从入门到放弃(一)

相关推荐