Type Script 的基本概念及常用语法

Unsplash

TypeScript 是一种由微软开发的自由和开源的编程语言,它作为 JavaScript 的一个超集,扩展了JavaScript 的语法,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程,使得这一门脚本语言有了编译的概念

ECMA Script 5 是由 JavaScript 所实现的,而 TypeScript 则是遵循 ECMA Script 6,ES6 的很多新特性及语法都能直接在 TypeScript 中实现,因为 ES6 就是由 TypeScript 所实现的,而我们所熟悉的 Angular 2 也是使用 TypeScript 开发的

1. TypeScript 开发环境

目前大多数浏览器仅支持 ES5,还没有完全支持 ES6,所以我们需要把 TypeScript 代码编辑成 ES5 的 JavaScript 代码,在这里给大家提供两种的编译方式,一种是使用 Online Complier,链接戳 >>>TypeScript Playground

而另一种方式就是使用本地 Complier,通过 Node.js 包管理器 npm 安装 TypeScript 的 npm 包,然后我们就可以在编辑器中编译 TypeScript 文件了,尽管有很多的 IDE 都能写 TS,但最好的开发工具还是微软开发的 VS Code,快捷键 Control + ` 打开终端,键入以下命令即可完成安装

TypeScript 安装过程

2. 字符串新特性

TypeScript 支持与 JavaScript 几乎相同的数据类型,而在 TypeScript 中,字符串增加了多行字符串、模板字符串、自动拆分字符串的新特性

在 JavaScript 中,字符串换行将会报错,而 TypeScript 引入了多行字符串的新特性,所以在字符串中换行,将不会引起报错,但需要注意的是,字符串需要使用反引号 ` ,而不是使用 "'

多行字符串

运行结果

模板字符串可以定义多行文本以及内嵌表达式,同样的,模板字符串也需要使用反引号 `,并以 ${ expr } 这种形式嵌入表达式

模板字符串

运行结果

多行字符串和模板字符串的结合

多行字符串和模板字符串

运行结果

自动拆分字符串,当你使用字符串模板调用方法的时候,其字符串模板表达式里的值会赋给自动调用方法的参数

自动拆分字符串

运行结果

3. 参数新特性

我们接下来介绍 TypeScript 中的五种类型声明,分别是字符串 String、数字 Number、布尔值 Boolean、多种类型 Any、没有类型 Void,只需在参数名称后面用冒号来指定参数的类型即可

参数类型

还有一种自定义类型,我们可通过 class 模板来定义我们所需要的类型

自定义类型

我们刚刚是通过在变量声明的时候指定了默认的参数,同样的,我们在调用方法传参时,也能同样使用等号来指定参数的默认值,不过需要注意的是,声明默认值的参数要放在最后

默认参数

运行结果

在方法的参数声明后面用问号来标明此参数为可选参数,如 function niangao(a: string, b?: number, c: string = "Niangao") {} 那么在该方法中,参数 b 就是可选的,在调用的时候就可以不传 b 参数,在使用可选参数时,需要注意可选参数没传的情况,还需要注意的是,在参数的顺序中,必选参数不可以在可选参数的后面,也就是说,可选参数要么放在最后,要么后面接可选参数,或有带默认值的参数

可选参数

运行结果

4. 函数新特性

Rest and Spread 操作符 ...:用来声明任意数量的方法参数

Rest and Spread 操作符

运行结果

Rest and Spread 操作符还有一个反过来的用法,虽然在 Complier 中有会报错提示,但却是能够成功运行的

Rest and Spread 操作符反过来的用法

第一次调用,由于方法定义的 3 个参数,而 args 长度为 2,所以调用后方法中第 3 个为 undefine,第二次调用,由于方法只有 3 个参数,args1 长度为 4,所以最后一个参数被忽略了

运行结果

Generator 函数:控制函数的执行过程,手工暂停和恢复代码执行,通过使用 yield 关键字,来实现函数暂停,通过 .next() 的方法来使函数恢复执行

Generator 函数

运行结果

Destructuring 析构表达式:通过表达式将对象或数组拆解成任意数量的变量

Destructuring 析构表达式 对象_1

Destructuring 析构表达式 对象_2

运行结果

需要注意的是,对象的析构表达式是用 {}括出来,而数组则是使用 [] 括起来的

Destructuring 析构表达式 数组_1

运行结果

Destructuring 析构表达式 数组_2

运行结果

Destructuring 析构表达式 数组_3

Destructuring 析构表达式 数组_4

运行结果

5. 箭头表达式

箭头表达式是用来声明匿名函数,消除传统匿名函数的 this 指针问题

箭头表达式_1

箭头表达式_2

箭头表达式_3

箭头表达式_4

运行结果

箭头表达式_5

运行结果

6. for of 循环

在 JavaScript 中,我们使用的循环一般是 forEach 以及 for in,我们依旧是先通过代码来看看这两种循环的特点

forEach 循环

运行结果

forEach 循环将数组中的所有元素都打印了出来,但没有打印数组描述,接下来我们看下 for in 循环

for in 循环

运行结果

这里只是输出数组的索引(即键名),若是想要打印出数组元素及描述内容,我们可以通过打印 myArray[n] 这种方式来输出

运行结果

TypeScript 中引入了一种新的循环方式—— for of 循环,直接上代码

for of 循环_1

运行结果

可以看到,同样是 console.log(n);,for in 遍历的是数组的所引,而 for of 遍历的是数组元素值,除此之外,for of 还能根据某个条件终止循环,其余两者均不能终止

for of 循环_2

运行结果

此外,for of 循环还能循环字符串

for of 循环_3

运行结果

参考资料 TypeScript入门——JoJozhai

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拭心的安卓进阶之路

JavaScript 的闭包用于什么场景

本文翻译自 MDN ( Mozilla Developer Network ): 原文地址:MDN 译文地址:shixinzhang 的博客 词法作用域 考虑如...

2218
来自专栏C语言及其他语言

【编程经验】宏定义

预处理命令可以改变程序设计环境,提高编程效率,它们并不是 C 语言本身的组成部分,不能直接对它们进行编译,必须在对程序进行编译之前,先对程序中这些特殊的命令进行...

3336
来自专栏重庆的技术分享区

关于eslint使用规则,和各种报错对应规则。

ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子...

1K7
来自专栏Astropeak

为什么不需要为Python对象添加 getter 和 setter

1242
来自专栏猿人谷

PHP常用库函数介绍+常见疑难问题解答

      最近在苦学PHP,虽然PHP在整体功能上不如Java强大,但相比PHP而言Java算是较重量级的,所以在小中型系统的开发上,使用PHP的趋势不可挡,...

2118
来自专栏deepcc

javascript 数据类型

2898
来自专栏web

javascript -- 变量

881
来自专栏生信宝典

18式优雅你的Python

文章授权转载自 Python与算法之美,粗体文字为生信宝典的修改和补充。文后有生信宝典原创的系列Python学习教程(Python2和Python3)。

1572
来自专栏对角另一面

读 Zepto 源码之集合元素查找

这篇依然是跟 dom 相关的方法,侧重点是跟集合元素查找相关的方法。 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zept...

2260
来自专栏重庆的技术分享区

关于eslint使用规则,和各种报错对应规则

4745

扫码关注云+社区