专栏首页Nian糕的私人厨房Type Script 的基本概念及常用语法

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 字符串

    toString() 方法,返回一个表示该对象的字符串,可以将所有的数据都转换为字符串,但是要排除掉 null 和 undefined

    Nian糕
  • 腾讯课堂 IMWeb 七天前端求职提升营 Day 2

    本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中,所推送的面试题目及编程练习的一次汇总,期间还包括三次直播课的分享,均由腾讯导师给大家讲解,该系列博...

    Nian糕
  • CSS 样式重置

    标签具有默认样式,由浏览器所决定的,为了达到在各个主流内核的浏览器页面样式显示一致,会重置具有默认样式的标签,得到样式表,就是 reset.css / base...

    Nian糕
  • Golang下通过syscall调用win32的api

    源于golang群中再次提到windows下获取磁盘空间的方法 由于golang的api并非完全跨平台, golang本身并没有直接提供windows下的方式 ...

    李海彬
  • [Leetcode][动态规划]相关题目汇总/分析/总结

    后端技术漫谈
  • 31:字符串p型编码

    31:字符串p型编码 总时间限制: 1000ms 内存限制: 65536kB描述 给定一个完全由数字字符('0','1','2',…,'9')构成的字符串s...

    attack
  • 大数据之脚踏实地学14--Scala自定义函数

    函数,其最大的好处在于避免了代码的重复编写,可以使编程过程更加地高效。尽管在《大数据之脚踏实地学12--Scala数据类型与运算符》和《大数据之脚踏实地学13-...

    1480
  • 头条飞聊呼之欲出,击败微信难,却可能成为下一个Instagram

    12月8日,今日头条即将上线名为“飞聊”的社交应用的消息不胫而走,种种迹象表明,这不是今日头条此前就已上线的企业社交平台Lark,而是一款全新的社交应用。

    罗超频道
  • C#基础知识回顾-- 反射(1)

    反射(reflection)是一种允许用户获得类型信息的C#特性。术语“反射”源自于它的工作方式: Type对象映射它所代表的底层对象。对Type对象进行...

    hbbliyong
  • 字符串拼接,什么时候会走 StringBuilder?

    这时候,疑问就来了,为什么结果会不一致呢?利用在cmd窗口输入javap -c TestDemo.class命令,对字节码文件进行反编译,发现了问题所在?

    一个优秀的废人

扫码关注云+社区

领取腾讯云代金券