Typescript特性小结

0 引子

这是一篇技术总结的文章,主要总结了一下Typescript在Javascript的基础上添加的一下特性。

因为工作需要用到Typescript,所以就需要学习一下。

Typescript是Javascript的超集,说白了——Typescript在Javascript的基础上进行了扩展,增加了一些特性。

以下就是一些特性的总结,由于是边学边记录,可能会有错漏。

1 字符串变量的反撇号——`

  • 用键盘左上角的反撇号——`,将字符串包裹起来,可以插入多行的字符串;
  • 用反撇号引用的字符串里面可以插入函数的调用;
  • 自动拆分字符串。这一点比较强大,不过可能不太直观,别人看起来有点麻烦。

2 参数类型声明

  • 用冒号定义变量类型:用var或者let声明变量后,用冒号间隔后可以定义变量类型。这相当于把javascript的弱类型语言变成了Typescript的强类型语言。
  • 进行类型推断,初次赋值以后不能赋其他类型的值
  • 变量类型的定义有:string, number, boolean, any,其中函数的返回类型多了一个void类型,表示没有返回值

3 函数参数

  • 函数的传入参数可以有默认值,但是要放在声明的最后。
  • 参数的后面加上问号,表示可选参数。可选参数的声明不可以放在必须参数的前面。
  • rest&spread操作符:函数传入的参数中,用表示任意数量的参数
  • 三个点的操作符可以把任意长度的数组转换成对应数量参数传递给函数

4 generator函数

在函数的执行过程中,手动执行暂停和恢复。示例如下:

function* doSomething(){............}
var func1 = doSomething();
func1.next();

每调用一次next方法,函数就执行到一个yield的代码处,从而可以手动控制函数一段一段的执行。

5 析构函数

function getStock() {
    return {
        code: “IBM”,
        price: 100
}
}
var {code, price} = getStock();

大括号中的变量可以分别获取函数返回的对象中的code和price变量的值。其中,两处变量的名称必须一致。

针对数组也可以用析构表达式:

var array1 = [1, 2, 3, 4];
var [num1, , ,num4] = array1;

取得的结果是:1 4

数组的析构表达式可以理解为,把数组转换为函数的传入参数的形式

6 箭头表达式

消除es5中的this关键字的容易错误的问题。

在es5中,this关键字指向函数运行中的所在环境的对象,不同的函数中的this指向不同。

在箭头表达式中,this仍然指向箭头表达式所在函数的对象。不容易造成使用上的错误。

7 循环

for in 循环,不可以break,会取出数组或者object中的属性

for of 循环,可以break,不会取出数组或者object中的属性

8 class、泛型

class和泛型和Java十分类似。

Typescript的Array变量中规定泛型,只能存储特定类型的数据。

9 接口

接口声明同Java,在使用上略有不同。

  • 在接口中声明了属性,可以作为参数传递给函数,但是在传入参数的时候必须和接口中定义的变量的数量和类型都一样
  • 在接口中声明了方法,用implements实现接口,实现的类中必须要实现所有的方法

10 模块

在typescript中,一个文件就是一个模块

通过export对外暴露的关键字,包括变量、函数、类

11 注解(annotation)

注解与当前代码中的业务逻辑无关,注解的作用主要用于其他的框架或者工具进行使用

12 类型定义文件(*.d.ts)

帮助开发者在Typescript中使用已有的Javascript工具包,如jQuery。使用时将类型定义文件复制到需要使用的地方的同一目录中即可。

13 小结

Tpyescript在javascript的ES5标准上进行了许多改进,其中有不少在javascript的ES6标准已经实现。

不过总体上,感觉Typescript取用了javascript和Java中一些特点进行了中和,使用起来比javascript要更方便、更直观、更健壮。

你可能感兴趣的:(Typescript特性小结)