typeScript开发

1.TypeScript简介

TypeScript特点

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

以下功能是从 ECMA 2015 反向移植而来：

• 类
• 模块
• lambda 函数的箭头语法
• 可选参数以及默认参数

JavaScript 与 TypeScript 的区别

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

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

2.TypeScript 安装

本文介绍 TypeScript 环境的安装。

我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考我们的NPM 使用介绍。

NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

使用国内镜像：

npm config set registry https://registry.npmmirror.com

安装 typescript：

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

$ tsc -v
Version 3.2.2

然后我们新建一个 app.ts 的文件，代码如下：

var message:string = "Hello World"  console.log(message)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码：

tsc app.ts

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

使用 node 命令来执行 app.js 文件：

node app.js 

3.TypeScript 基础语法

TypeScript 程序由以下几个部分组成：

• 模块
• 函数
• 变量
• 语句和表达式
• 注释

我们可以使用以下 TypeScript 程序来输出 “Hello World” ：

Runoob.ts 文件代码：

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

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

tsc Runoob.ts

得到如下 js 代码：

Runoob.js 文件代码：

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

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

$ node Runoob.js
输出： Hello World

整个流程如下：

我们可以同时编译多个 ts 文件：

tsc file1.ts file2.ts file3.ts

tsc 常用编译参数如下表所示：

空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。

空格、制表符通常用来缩进代码，使代码易于阅读和理解。

TypeScript 区分大小写

TypeScript 区分大写和小写字符。

分号是可选的

每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

以下代码都是合法的：

console.log("Runoob")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔，否则会报错，如：

console.log("Runoob");console.log("Google");

TypeScript 注释

注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。

注释可以提高程序的可读性。

注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。

编译器会忽略注释。

TypeScript 支持两种类型的注释

• 单行注释 ( // ) − 在 // 后面的文字都是注释内容。
• 多行注释 (/* */) − 这种注释可以跨越多行。

注释实例：

// 这是一个单行注释
 
/* 
 这是一个多行注释 
 这是一个多行注释 
 这是一个多行注释 
*/

---

TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。

TypeScript 是一种面向对象的编程语言。

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

• 对象：对象是类的一个实例（对象不是找个女朋友），有状态和行为。例如，一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。
• 类：类是一个模板，它描述一类对象的行为和状态。
• 方法：方法是类的操作的实现步骤。

下图中 girl、boy 为类，而具体的每个人为该类的对象：

TypeScript 面向对象编程实例：

class Site {
    name():void{
        console.log("hello world")
    }
}

var object = new Site()
object.name()

以上实例定义了一个类 Site，该类有一个方法 name()，该方法在终端上输出字符串 Runoob。

new 关键字创建类的对象，该对象调用方法 name()。

编译后生成的 JavaScript 代码如下：

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("hello world");
    };
    return Site;
}());
var object = new Site();
object.name();

3.TypeScript 基础类型

TypeScript 包含的数据类型如下表:

**注意：**TypeScript 和 JavaScript 没有整数类型。

Any 类型

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。

1.变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

Null 和 Undefined

null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是 object。

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（–strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型，示例代码如下：

// 启用 --strictNullChecks
let x: number;
x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 运行正确
x = undefined;    // 运行正确
x = null;    // 运行正确

never 类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：

let x: never;
let y: number;

// 运行错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}

4.TypeScript 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。
• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
• 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var 来声明变量。

我们可以使用以下四种方式来声明变量：

声明变量的类型及初始值：

var [变量名] : [类型] = 值;

例如：

var uname:string = "Runoob";

声明变量的类型，但没有初始值，变量值会设置为 undefined：

var [变量名] : [类型];

例如：

var uname:string;

声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值;

例如：

var uname = "Runoob";

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

例如：

var uname;

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

语法格式：

<类型>值

或:

值 as 类型

实例

var str = '1'  var str2:number = <number> <any> str   //str、str2 是 string 类型 console.log(str2)

TypeScript 是怎么确定单个断言是否足够

当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。这是为了在进行类型断言时提供额外的安全性，完全毫无根据的断言是危险的，如果你想这么做，你可以使用 any。

它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，同时，它也是一种为编译器提供关于如何分析代码的方法。

编译后，以上代码会生成如下 JavaScript 代码

var str = '1';
var str2 = str;  //str、str2 是 string 类型
console.log(str2);

类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

var num = 2; // 类型推断为 number console.log("num 变量的值为 " num); num = “12”; // 编译错误 console.log(num);

• 第一行代码声明了变量 num 并=设置初始值为 2。 注意变量声明没有指定类型。因此，程序使用类型推断来确定变量的数据类型，第一次赋值为 2，num 设置为 number 类型。

• 第三行代码，当我们再次为变量设置字符串类型的值时，这时编译会错误。因为变量已经设置为了 number 类型。

  error TS2322: Type '"12"' is not assignable to type 'number'.
  

变量作用域

变量作用域指定了变量定义的位置。

程序中变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
• 类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

以下实例说明了三种作用域的使用：

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: " global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: " obj.num_val)

5.TypeScript 运算符

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。

以上实例中 7、5 和 12 是操作数。

运算符 用于加值。

运算符 = 用于赋值。

TypeScript 主要包含以下几种运算：

• 算术运算符
• 逻辑运算符
• 关系运算符
• 按位运算符
• 赋值运算符
• 三元/条件运算符
• 字符串运算符
• 类型运算符

算术运算符

假定 y=5，下面的表格解释了这些算术运算符的操作：

关系运算符

关系运算符用于计算结果是否为 true 或者 false。

x=5，下面的表格解释了关系运算符的操作：

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

短路运算符(&& 与 ||)

&& 与 || 运算符可用于组合表达式。 && 运算符只有在左右两个表达式都为 true 时才返回 true。

位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

赋值运算符

赋值运算符用于给变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

三元运算符 (?)

三元运算有 3 个操作数，并且需要判断布尔表达式的值。该运算符的主要是决定哪个值应该赋值给变量。

Test ? expr1 : expr2
// 例如：
var number = 1==1 ?"true":"false"
console.log(number) 

• Test − 指定的条件语句
• expr1 − 如果条件语句 Test 返回 true 则返回该值
• expr2 − 如果条件语句 Test 返回 false 则返回该值

typeof 运算符

typeof 是一元运算符，返回操作数的数据类型

instanceof

instanceof 运算符用于判断对象是否为指定的类型，后面章节我们会具体介绍它。

字符串运算符: 连接运算符 ( )

用于拼接两个字符串

6.TypeScript 条件语句

条件语句用于基于不同的条件来执行不同的动作。

TypeScript 条件语句是通过一条或多条语句的执行结果（True 或 False）来决定执行的代码块。

可以通过下图来简单了解条件语句的执行过程:

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 TypeScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

switch 语句必须遵循下面的规则：

• switch 语句中的 expression 是一个常量表达式，必须是一个整型或枚举类型。
• 在一个 switch 中可以有任意数量的 case 语句。每个 case 后跟一个要比较的值和一个冒号。
• case 的 constant-expression 必须与 switch 中的变量具有相同的数据类型，且必须是一个常量或字面量。
• 当被测试的变量等于 case 中的常量时，case 后跟的语句将被执行，直到遇到 break 语句为止。
• 当遇到 break 语句时，switch 终止，控制流将跳转到 switch 语句后的下一行。
• 不是每一个 case 都需要包含 break。如果 case 语句不包含 break，控制流将会 继续 后续的 case，直到遇到 break 为止。
• 一个 switch 语句可以有一个可选的 default case，出现在 switch 的结尾。default case 可用于在上面所有 case 都不为真时执行一个任务。default case 中的 break 语句不是必需的。

例如：

var grade:string = "A"; 
switch(grade) { 
    case "A": { 
        console.log("优"); 
        break; 
    } 
    case "B": { 
        console.log("良"); 
        break; 
    } 
    case "C": {
        console.log("及格"); 
        break;    
    } 
    case "D": { 
        console.log("不及格"); 
        break; 
    }  
    default: { 
        console.log("非法输入"); 
        break;              
    } 
}

7.TypeScript 循环

有的时候，我们可能需要多次执行同一块代码。一般情况下，语句是按顺序执行的：函数中的第一个语句先执行，接着是第二个语句，依此类推。

编程语言提供了更为复杂执行路径的多种控制结构。

循环语句允许我们多次执行一个语句或语句组，下面是大多数编程语言中循环语句的流程图：

for 循环

TypeScript for 循环用于多次执行一个语句序列，简化管理循环变量的代码。

语法格式如下所示：

for ( init; condition; increment ){

  statement(s);

}

下面是 for 循环的控制流程解析：

• init 会首先被执行，且只会执行一次。这一步允许您声明并初始化任何循环控制变量。您也可以不在这里写任何语句，只要有一个分号出现即可。
• 接下来，会判断 condition。如果为 true，则执行循环主体。如果为 false，则不执行循环主体，且控制流会跳转到紧接着 for 循环的下一条语句。
• 在执行完 for 循环主体后，控制流会跳回上面的 increment 语句。该语句允许您更新循环控制变量。该语句可以留空，只要在条件后有一个分号出现即可。
• 条件再次被判断。如果为 true，则执行循环，这个过程会不断重复（循环主体，然后增加步值，再然后重新判断条件）。在条件变为 false 时，for 循环终止。
• 在这里，statement(s) 可以是一个单独的语句，也可以是几个语句组成的代码块。
• condition 可以是任意的表达式，当条件为 true 时执行循环，当条件为 false 时，退出循环。

for…in 循环

for…in 语句用于一组值的集合或列表进行迭代输出。 val 需要为 string 或 any 类型。

例如：

// for i
var counter:number = 10
for(var i = 0;i<counter;i  ){
    console.info("第 " i " 次循环")
}
// for in item是下标
var array : any = ["admin","root","tom"]
for( var item in array){
console.log(array[item])
}

8.TypeScript 函数

函数是一组一起执行一个任务的语句。

您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的，但在逻辑上，划分通常是根据每个函数执行一个特定的任务来进行的。

函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。

函数定义

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

语法格式如下所示：

function init(){
    console.log("init function")
}
init()

函数返回值

有时，我们会希望函数将执行的结果返回到调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

语法格式如下所示：

function function_name():return_type { 
    // 语句
    return value; 
}

• return_type 是返回值的类型。
• return 关键词后跟着要返回的结果。
• 一般情况下，一个函数只有一个 return 语句。
• 返回值的类型需要与函数定义的返回类型(return_type)一致。

例如：

function add():number{
    return 5 5;
}

console.log(add())

带参数函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以向函数发送多个参数，每个参数使用逗号 , 分隔：

语法格式如下所示：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

• param1、param2 为参数名。
• datatype 为参数类型。

/**
 * 
 * @param username 用户名
 * @param password  密码
 * @param status  状态
 * @returns  成功返回success
 */
function login(username:string,password:string,status:number):string{

    if(username==="admin" && password==="123" && status===1){
        return "success"
    }else{
        return "failed"
    }
}
console.log(login("admin","123",1))

可选参数和默认参数

可选参数

在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。

/**
 * 
 * @param username 用户名
 * @param password  密码
 * @param status  状态
 * @param userType 用户类型 可选参数
 * @returns  成功返回success
 */
function login(username:string,password:string,status:number,userType ?:string):string{

    if(username==="admin" && password==="123" && status===1){
        return "success"
    }else{
        return "failed"
    }
}
console.log(login("admin","123",1))

默认参数

我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为：

function function_name(param1[:type],param2[:type] = default_value) { 
}

注意：参数不能同时设置为可选和默认。

/**
 * 
 * @param a 必须传递的参数
 * @param b 可以不用传递参数，默认值为5
 * @returns 返回a b
 */
function add(a:number,b:number =5):number{
return a b;
}
console.log(add(5,10))

剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

function init(...array:any){
    for(var i =0;i<array.length;i  ){
        console.log(array[i])
    }
}

init("admin","root","tom")

匿名函数

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。

语法格式如下：

var res = function( [arguments] ) { ... }
// 例如
var service = function(){
    console.log("service")
}
service()

自调用函数

匿名函数自调用在函数后使用 () 即可：

/**
 * 自调用函数，无需手动调用，自己会调用自己
 */
(function(){
console.log("init")
})()

构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数：

语法格式如下：

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

例如：

var myFunction = new Function("a","b","return a b")
console.log(myFunction(5,10))

Lambda 函数

Lambda 函数也称之为箭头函数。

箭头函数表达式的语法比函数表达式更短。

函数只有一行语句：

var foo = (a:number,b:number)=>a b
console.log(foo(10,20))

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

参数类型不同：

9.TypeScript Number

TypeScript 与 JavaScript 类似，支持 Number 对象。

Number 对象是原始数值的包装对象。

语法

var num = new Number(value);

注意： 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。

Number 对象属性

下表列出了 Number 对象支持的属性：

Number 对象方法

Number对象 支持以下方法：

10.TypeScript String（字符串）

String 对象用于处理文本（字符串）。

语法

var txt = new String("string");
或者更简单方式：
var txt = "string";

String 对象属性

下表列出了 String 对象支持的属性：

String 方法

下表列出了 String 对象支持的方法：

11.TypeScript Array(数组)

数组对象是使用单独的变量名来存储一系列的值。

数组非常常用。

TypeScript 声明数组的语法格式如下所示：

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或者直接在声明时初始化：

var array_name[:data type] = [val1,val2…valn]

如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。

实例

创建一个 number 类型的数组：

var numlist:number[] = [2,4,6,8]

Array 对象

我们也可以使用 Array 对象创建数组。

Array 对象的构造函数接受以下两种值：

• 表示数组大小的数值。
• 初始化的数组列表，元素使用逗号分隔值。

实例

指定数组初始化大小：

TypeScript

var arr_names:number[] = new Array(4)   
for(var i = 0; i<arr_names.length; i  ) {      
    arr_names[i] = i * 2         
    console.log(arr_names[i]) 
}

数组解构

我们也可以把数组元素赋值给变量，如下所示：

TypeScript

// 将数组的两个元素赋值给变量 x 和 y console.log(x)  console.log(y)
var arr:number[] = [12,13] 
var[x,y] = arr

数组方法

下表列出了一些常用的数组方法：

12.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对象中每个元素的值

迭代 Map

Map 对象中的元素是按顺序插入的，我们可以迭代 Map 对象，每一次迭代返回 [key, value] 数组。

TypeScript使用 for…of 来实现迭代：

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 迭代 Map 中的 key
for (let key of nameSiteMapping.keys()) {
    console.log(key);                  
}
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

13.TypeScript 元组

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

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

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

实例

声明一个元组并初始化：

var mytuple = [10,"Runoob"];

访问元组

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

tuple_name[index]

元组运算

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

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

更新元组

元组是可变的，这意味着我们可以对元组进行更新操作： tuple_name[index] = newValue

解构元组

我们也可以把元组元素赋值给变量，如下所示：

TypeScript

var array:any = [1,"admin"]
var[count,username] = array;
console.log(count,username)

14.TypeScript 联合类型

**联合类型（Union Types）**可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。

创建联合类型的语法格式如下：

var val: Type1|Type2|Type3 

例如

var objet :string|number|Date = "admin"
console.log(objet)
objet = new Date()
console.log(objet)

联合类型数组

我们也可以将数组声明为联合类型：

var array:string[] | number[] | Object[] = new Array("admin","root")
console.log(array)

15.TypeScript 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

TypeScript 接口定义如下：

interface interface_name { 
}

例子：

// 定义抽象接口
interface LoginService{
    username:string, 
    password:string, 
    isLogin: (username:any,password:string)=>any 
}

/**
 * 对接口实例化
 */
var userServiceImpl :LoginService = {
        username:null,
        password:null,
        isLogin:(username,password):any=>{
            return username == password
        }
}

// 利用实例化对象调用方法
console.log(userServiceImpl.isLogin("admin","admin"))

联合类型和接口

以下实例演示了如何在接口中使用联合类型：

interface RunOptions { 
    program:string; 
    // 可以是多种类型
    commandline:string[]|string|(()=>string);  
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。

Typescript 允许接口继承多个接口。

继承使用关键字 extends。

单接口继承语法格式：

Child_interface_name extends super_interface_name

多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

例如

// 定义抽象接口
interface LoginService{
    username:string, 
    password:string, 
    isLogin: (username:any,password:string)=>any 
}
 
// 定义抽象接口  继承 LoginService
interface userService extends LoginService{
    token:string, 
    userId:string, 
    isLogin: (token:any,userId:string)=>any 
}

接口属性的的可选性

interface SquareConfig {
  color: string;
  // 表示可选属性
  width?: number;
}

function createSquare(config: SquareConfig): SquareConfig {
  let newSquare = { color: "white", area: 100 };
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({ color: "black" });
console.log(mySquare)

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用readonly来指定只读属性:

你可以通过赋值一个对象字面量来构造一个Point。 赋值后，id和name再也不能被改变了。

interface Point {
  // 只能读取不能重新赋值
  readonly id: string;
  readonly name: string;
}

function createPoint(point: Point): Point {
  return point;
}
let result: Point = createPoint({ id: '101', name: 'admin' });
console.log(result)

16.TypeScript 类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

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

TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
• 构造函数 − 类实例化时调用，可以为类的对象分配内存。 构造函数只能有一个，子类可以重写父类构造
• 方法 − 方法为对象要执行的操作。

class User{
    // 成员属性
    username:string
    password:string

    // 构造方法
    constructor(username:string,password:string){
        this.username = username
        this.password = password
    }

    // 成员函数
    login(username:string,password:string):string{
            if(this.username == username && this.password == password){
                return "success";
            }else{
                return "failed";
            }
    }
}

// 创建对象实例 并且调用方法 获取到返回值
var result = new User("admin","123").login("admin","123")
console.log(result)

类的继承

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

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

TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。

语法格式如下：

class User{
    // 成员属性
    username:string
    password:string

    // 构造方法
    constructor(username:string,password:string){
        this.username = username
        this.password = password
    }

    // 成员函数
    login(username:string,password:string):string{
            if(this.username == username && this.password == password){
                return "success";
            }else{
                return "failed";
            }
    }
}
class UserSon extends User{
    // 成员函数
    login(username:string,password:string):string{
        if(this.username == username ){
            return "success";
        }else{
            return "failed";
        }
}
}

// 创建对象实例 并且调用方法 获取到返回值
var result = new UserSon("admin","123").login("admin","456")
console.log(result)

static 关键字

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class User{
    // 成员属性
    username:string
    password:string

    // 构造方法
    constructor(username:string,password:string){
        this.username = username
        this.password = password
    }

    // 成员函数
    login(username:string,password:string):string{
            if(this.username == username && this.password == password){
                return "success";
            }else{
                return "failed";
            }
    }
}
class UserSon extends User{
    // 成员函数
    login(username:string,password:string):string{
        if(this.username == username ){
            return "success";
        }else{
            return "failed";
        }   
}
// 定义静态方法，直接类名.方法名调用
static hello():void{
        console.log("hello")
}
}

// 创建对象实例 并且调用方法 获取到返回值
var result = new UserSon("admin","123").login("admin","456")
console.log(result)
UserSon.hello()

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型，如果是返回 true，否则返回 false。

class User{
    // 成员属性
    username:string
    password:string

    // 构造方法
    constructor(username:string,password:string){
        this.username = username
        this.password = password
    }

    // 成员函数
    login(username:string,password:string):string{
            if(this.username == username && this.password == password){
                return "success";
            }else{
                return "failed";
            }
    }
}
class UserSon extends User{
    // 成员函数
    login(username:string,password:string):string{
        if(this.username == username ){
            return "success";
        }else{
            return "failed";
        }   
}
static hello():void{
        console.log("hello")
}
}
// 检测 userSon 是不是 User类型
var userSon =new UserSon("admin","root");
console.log(userSon instanceof User)

访问控制修饰符

TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。
• protected : 受保护，可以被其自身以及其子类访问。
• private : 私有，只能被其定义所在的类访问。

17TypeScript 对象

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

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

TypeScript 类型模板

假如我们在 JavaScript 定义了一个对象：

var sites = {   
    		site1:"Runoob",    site2:"Google" 
    };

这时如果我们想在对象中添加方法，可以做以下修改：

sites.sayHello = function(){ return "hello";}

鸭子类型(Duck Typing)

鸭子类型（英语：duck typing）是动态类型的一种风格，是多态(polymorphism)的一种形式。

在这种风格中，一个对象有效的语义，不是由继承自特定的类或实现特定的接口，而是由"当前方法和属性的集合"决定。

可以这样表述：

“当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。”

在鸭子类型中，关注点在于对象的行为，能作什么；而不是关注对象所属的类型。例如，在不使用鸭子类型的语言中，我们可以编写一个函数，它接受一个类型为"鸭子"的对象，并调用它的"走"和"叫"方法。在使用鸭子类型的语言中，这样的一个函数可以接受一个任意类型的对象，并调用它的"走"和"叫"方法。如果这些需要被调用的方法不存在，那么将引发一个运行时错误。任何拥有这样的正确的"走"和"叫"方法的对象都可被函数接受的这种行为引出了以上表述，这种决定类型的方式因此得名。

interface IPoint { 
    x:number 
    y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
    var x = p1.x   p2.x 
    var y = p1.y   p2.y 
    return {x:x,y:y} 
} 
 
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  
 
// 错误 
var newPoint2 = addPoints({x:1},{x:4,y:3})

18.TypeScript 命名空间

命名空间一个最明确的目的就是解决重名问题。

假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。

TypeScript 中命名空间使用 namespace 来定义，语法格式如下：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}

以上定义了一个命名空间 SomeNameSpaceName，如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口，则需要在类和接口添加 export 关键字。

要在另外一个命名空间调用语法格式为：

SomeNameSpaceName.SomeClassName;

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// <reference path = "SomeFileName.ts" />

以下实例演示了命名空间的使用，定义在不同文件中：

IShape.ts 文件代码：

namespace Drawing {    
    export interface IShape {         
        draw();     
    } }

Circle.ts 文件代码：

/// <reference path = "IShape.ts" /> 
namespace Drawing {    
    export class Circle implements IShape { 
        public draw() {   
            console.log("Circle is drawn");     
        }     
    } }

Triangle.ts 文件代码：

/// <reference path = "IShape.ts" />  
namespace Drawing {     
    export class Triangle implements IShape {   
        public draw() {             
            console.log("Triangle is drawn");   
        } 
    } 
}

TestShape.ts 文件代码：

/// <reference path = "IShape.ts" />  
/// <reference path = "Circle.ts" /> 
/// <reference path = "Triangle.ts" />   

function drawAllShapes(shape:Drawing.IShape) {    
    shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());

19.TypeScript 模块

TypeScript 模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

此外还有有 SystemJs 和 Webpack。

模块导出使用关键字 export 关键字，语法格式如下：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");

20.TypeScript 声明文件

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：

jQuery('#foo');

// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：

declare var jQuery: (selector: string) => any;

jQuery('#foo');

声明文件

声明文件以 .d.ts 为后缀，例如：

runoob.d.ts

声明文件或模块的语法格式如下：

declare module Module_Name {
}

TypeScript 引入声明文件语法格式：

/// <reference path = " runoob.d.ts" />

这篇好文章是转载于：学新通技术网