前端知识Typescript篇 | 青训营

83 阅读6分钟

一、JavaScript 与 TypeScript 的区别


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

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

二、基础语法


TypeScript 程序由以下几个部分组成:模块,函数,变量,语句和表达式,注释。

以下是一个输出 "Hello World" 的 TypeScript 程序

 const hello : string = "Hello World!" console.log(hello)

以上代码首先通过 tsc 命令编译:

 tsc Runoob.ts

得到如下 js 代码:

 var hello = "Hello World!"; 
 console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

 $ node Runoob.js
 Hello World
tsc 常用编译参数如下表所示:
序号编译参数说明
1.--help显示帮助信息
2.--module载入扩展模块
3.--target设置 ECMA 版本
4.--declaration额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。
5.--removeComments删除文件的注释
6.--out编译多个文件并合并到一个输出的文件
7.--sourcemap生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。
8.--module noImplicitAny在表达式和声明上有隐含的 any 类型时报错
9.--watch在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。
TypeScript 是一种面向对象的编程语言。

面向对象主要有两个概念:对象和类。

  • 对象:对象是类的一个实例(对象不是找个女朋友),有状态和行为。例如,一条狗是一个对象,它的状态有:颜色、名字、品种;行为有:摇尾巴、叫、吃等。
  • :类是一个模板,它描述一类对象的行为和状态。

三、基本数据类型


  • boolean 布尔值

  • number 数字型

  • string 字符串

  • array 数组

  • tuple 元组:元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

     // 声明一个元组类型
     let arr: [string, number, boolean]
     // 初始化
     arr = ['hello', 10, false]; // 初始化时每项的数据类型必须和声明时保持一致,否则会报错,因为类型不匹配
     // 错误初始化
     arr = [10, 'hello', false]; // Error
    
  • enum 枚举

  • any 任意类型

  • void 没有任何类型(函数没有返回值)

  • Null 和 Undefined

  • never:表示的是那些永不存在的值的类型

四、TypeScript Map 对象


Map 对象保存键值对,并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

创建 Map

TypeScript 使用 Map 类型和 new 关键字来创建 Map:

 let myMap = new Map();

初始化 Map,可以以数组的格式来传入键值对:

 let myMap = new Map([
         ["key1", "value1"],
         ["key2", "value2"]
     ]); 

Map 相关的函数与属性:

  • map.clear() – 移除 Map 对象的所有键/值对 。
  • map.set() – 设置键值对,返回该 Map 对象。
  • map.get() – 返回键对应的值,如果不存在,则返回 undefined。
  • map.has() – 返回一个布尔值,用于判断 Map 中是否包含键对应的值。
  • map.delete() – 删除 Map 中的元素,删除成功返回 true,失败返回 false。
  • map.size – 返回 Map 对象键/值对的数量。
  • map.keys() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
  • map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。

五、TypeScript 元组


如果存储的元素数据类型不同,则需要使用元组。元组中允许存储不同类型的元素,元组可以作为参数传递给函数。

创建元组的语法格式如下:

 var tuple_name = [value1,value2,value3,…value n]

声明一个元组并初始化:

 var mytuple = [10,"Runoob"];

或者我们可以先声明一个空元组,然后再初始化:

 var mytuple = []; 
 mytuple[0] = 120 
 mytuple[1] = 234
访问元组

元组中元素使用索引来访问,第一个元素的索引值为 0,第二个为 1,以此类推第 n 个为 n-1,语法格式如下:

 tuple_name[index]
元组运算

可以使用以下两个函数向元组添加新元素或者删除元素:

  • push() 向元组添加元素,添加在最后面。
  • pop() 从元组中移除元素(最后一个),并返回移除的元素。

六、TypeScript 类


TypeScript 支持面向对象的所有特性,比如 类、接口等。

TypeScript 类定义方式如下:
 class class_name { 
     // 类作用域
 }

定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):

  • 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
  • 构造函数 − 类实例化时调用,可以为类的对象分配内存。
  • 方法 − 方法为对象要执行的操作。
创建类的数据成员

以下实例声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。此外我们也在类中定义了一个方法 disp()。

 class Car { 
     // 字段 
     engine:string; 
  
     // 构造函数 
     constructor(engine:string) { 
         this.engine = engine 
     }  
  
     // 方法 
     disp():void { 
         console.log("发动机为 :   "+this.engine) 
     } 
 }
创建实例化对象

我们使用 new 关键字来实例化类的对象,语法格式如下:

 var object_name = new class_name([ arguments ])

类实例化时会调用构造函数,例如:

 var obj = new Car("Engine 1")

类中的字段属性和方法可以使用 . 号来访问:

 // 访问属性
 obj.field_name 
 ​
 // 访问方法
 obj.function_name()
类的继承

TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。

类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。

TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。

语法格式如下:

 class child_class_name extends parent_class_name
继承类的方法重写

类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。

其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。

 class PrinterClass { 
    doPrint():void {
       console.log("父类的 doPrint() 方法。") 
    } 
 } 
  
 class StringPrinter extends PrinterClass { 
    doPrint():void { 
       super.doPrint() // 调用父类的函数
       console.log("子类的 doPrint()方法。")
    } 
 }

七、TypeScript 对象


对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等,如下实例:

 var object_name = { 
     key1: "value1", // 标量
     key2: "value",  
     key3: function() {
         // 函数
     }, 
     key4:["content1", "content2"] //集合
 }

以上对象包含了标量,函数,集合(数组或元组)。