TypeScript

在学习ts之前，先聊一下js，js开发起来快，但是维护起来的成本会高，不适合开发大型的项目，js中没有变量类型，例如let a = 10，10是num，但是a是没有变量类型的，它只是一个局部变量，想存什么，存什么，你在其他地方又把a赋值了一个字符串，但是到头来你想拿a去做运算，那么这个时候就会发生隐患事故了，js不报错。js中定义函数，函数的参数也是没有类型，参数做运算，这个时候就会发生错误了，js是一个动态类型，无论是webstorm 还是vscode,它的提示都不是很完善，因为编辑器不知道它的变量类型。那么js是怎么来的呢，是微软和网景两大公司大战时，网景公司为了开发出的我有你没有的商业份额，天下武功唯快不破，因此js十天左右诞生了，微软公司近几年干的好事就是开发出来了vscode免费供开发者使用，开发出ts更加灵活使用，还有放弃了IE内核转而拥抱了chorm内核
TS并不是取代js，而是在javascirpt为基础构建的语言，即是js的超集，什么是超集，就是js有的，ts也有，但是ts在js的基础上又添加了其他

学习TypeScript先从安装开始

一、安装

• 先安装nodejs：https://nodejs.org/dist/v14.15.1-x64.msi
• 更换npm源：npm config set registry https://registry.npmmirror.com
• 安装 typescript：npm install -g typescript
• 安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：$ tsc -v

二、案例切入

1. 新建一个 app.ts 的文件，代码如下：

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

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

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

tsc app.ts
1

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

$ node app.js 
1

三、语法

1、数据类型

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

2、变量声明

TypeScript 变量的命名规则：

• 变量名称可以包含数字和字母。

• 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。

• 变量名不能以数字开头。

1. 声明变量的类型及初始值：var [变量名] : [类型] = 值;

var uname:string = "Runoob";
1

2. 声明变量的类型，但没有初始值，变量值会设置为 undefined：var [变量名] : [类型];

var uname:string;
1

3. 声明变量并初始值，但不设置类型，该变量可以是任意类型：var [变量名] = 值;

var uname = "Runoob";
1

4. 声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：var [变量名];

var uname;
1

3、函数定义

3.1、函数定义

可选参数使用问号标识 ？

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
 
let result1 = buildName("Bob");  // 正确
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，参数太多了
let result3 = buildName("Bob", "Adams");  // 正确
1
2
3
4
5
6
7
8
9
10

3.2、匿名函数

var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))
1
2
3
4

3.3、匿名函数自调用

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()
1
2
3
4

3.4、构造函数

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);
1
2
3

3.5、递归函数

通俗理解：从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？“从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？‘从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？……’”

function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720
1
2
3
4
5
6
7
8

3.6、Lambda 函数

var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110
1
2

3.7、函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz");
1
2
3
4
5
6
7
8
9

4、Number 对象方法

4.1、toExponential()

把对象的值转换为指数计数法。

//toExponential() 
var num1 = 1225.30 
var val = num1.toExponential(); 
console.log(val) // 输出： 1.2253e+3
1
2
3
4

4.2、toFixed()

把数字转换为字符串，并对小数点指定位数。

var num3 = 177.234
console.log("num3.toFixed() 为 "+num3.toFixed()) // 输出：177
console.log("num3.toFixed(2) 为 "+num3.toFixed(2)) // 输出：177.23
console.log("num3.toFixed(6) 为 "+num3.toFixed(6)) // 输出：177.2340

4.3、toLocaleString()

把数字转换为字符串，使用本地数字格式顺序。

var num = new Number(177.1234); 
console.log( num.toLocaleString());  // 输出：177.1234
1
2

4.4、toPrecision()

把数字格式化为指定的长度。

var num = new Number(7.123456); 
console.log(num.toPrecision());  // 输出：7.123456 
console.log(num.toPrecision(1)); // 输出：7
console.log(num.toPrecision(2)); // 输出：7.1
1
2
3
4

4.5、toString()

把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。

var num = new Number(10); 
console.log(num.toString());  // 输出10进制：10
console.log(num.toString(2)); // 输出2进制：1010
console.log(num.toString(8)); // 输出8进制：12
1
2
3
4

4.6、valueOf()

返回一个 Number 对象的原始数字值。

var num = new Number(10); 
console.log(num.valueOf()); // 输出：10
1
2

4.7、时间格式化

var date = new Date();
console.log(date); //2022-09-02T14:08:32.960Z
console.log(date.toLocaleString()); //2022/9/2 22:08:32
console.log(date.toLocaleDateString()); //2022/9/2
console.log(date.toLocaleTimeString()); //22:08:32
console.log(date.toDateString()); //Fri Sep 02 2022
console.log(date.toString()); //Fri Sep 02 2022 22:08:32 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7

5、TypeScript String（字符串）

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

5.1、constructor

对创建该对象的函数的引用。

var str = new String( "This is string" ); 
console.log("str.constructor is:" + str.constructor)
1
2

输出结果：str.constructor is:function String() { [native code] }

5.2、length

返回字符串的长度。

var uname = new String("Hello World") 
console.log("Length "+uname.length)  // 输出 11
1
2

5.3、prototype

允许您向对象添加属性和方法。

function employee(id:number,name:string) { 
    this.id = id 
    this.name = name 
 } 
 var emp = new employee(123,"admin") 
 employee.prototype.email="admin@runoob.com" // 添加属性 email
 console.log("员工号: "+emp.id) 
 console.log("员工姓名: "+emp.name) 
 console.log("员工邮箱: "+emp.email)
1
2
3
4
5
6
7
8
9

String 方法

5.1、charAt()

返回在指定位置的字符。。

var str = new String("RUNOOB"); 
console.log("str.charAt(0) 为:" + str.charAt(0)); // R
console.log("str.charAt(1) 为:" + str.charAt(1)); // U 
console.log("str.charAt(2) 为:" + str.charAt(2)); // N 
console.log("str.charAt(3) 为:" + str.charAt(3)); // O 
console.log("str.charAt(4) 为:" + str.charAt(4)); // O 
console.log("str.charAt(5) 为:" + str.charAt(5)); // B
1
2
3
4
5
6
7

5.2、charCodeAt()

返回在指定的位置的字符的 Unicode 编码。

var str = new String("RUNOOB"); 
console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); // 82
console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1)); // 85 
console.log("str.charCodeAt(2) 为:" + str.charCodeAt(2)); // 78 
console.log("str.charCodeAt(3) 为:" + str.charCodeAt(3)); // 79 
console.log("str.charCodeAt(4) 为:" + str.charCodeAt(4)); // 79
console.log("str.charCodeAt(5) 为:" + str.charCodeAt(5)); // 66
1
2
3
4
5
6
7

5.3、concat()

连接两个或更多字符串，并返回新的字符串。

var str1 = new String( "RUNOOB" ); 
var str2 = new String( "GOOGLE" ); 
var str3 = str1.concat( str2 ); 
console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE
1
2
3
4

5.4、indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。

var str1 = new String( "RUNOOB" ); 

var index = str1.indexOf( "OO" ); 
console.log("查找的字符串位置 :" + index ); // 3
1
2
3
4

5.5、lastIndexOf()

从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。

var str1 = new String( "This is string one and again string" ); 
var index = str1.lastIndexOf( "string" );
console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 29
    
index = str1.lastIndexOf( "one" ); 
console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 15
1
2
3
4
5
6

5.6、localeCompare()

用本地特定的顺序来比较两个字符串。

var str1 = new String( "This is beautiful string" );
  
var index = str1.localeCompare( "This is beautiful string");  

console.log("localeCompare first :" + index );  // 0
1
2
3
4
5

5.7、match()

查找找到一个或多个正则表达式的匹配。

var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g);  // ain,ain,ain
1
2

5.8、replace()

替换与正则表达式匹配的子串

var re = /(\w+)\s(\w+)/; 
var str = "zara ali"; 
var newstr = str.replace(re, "$2, $1"); 
console.log(newstr); // ali, zara
1
2
3
4

5.9、search()

检索与正则表达式相匹配的值

var re = /apples/gi; 
var str = "Apples are round, and apples are juicy.";
if (str.search(re) == -1 ) { 
   console.log("Does not contain Apples" ); 
} else { 
   console.log("Contains Apples" ); 
} 
1
2
3
4
5
6
7

5.10、slice()

提取字符串的片断，并在新的字符串中返回被提取的部分。

5.11、split()

把字符串分割为子字符串数组。

var str = “Apples are round, and apples are juicy.”;
var splitted = str.split(" ", 3);
console.log(splitted) // [ ‘Apples’, ‘are’, ‘round,’ ]

5.12、substr()

从起始索引号提取字符串中指定数目的字符。

5.13、substring()

提取字符串中两个指定的索引号之间的字符。

var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; 
console.log("(1,2): "    + str.substring(1,2));   // U
console.log("(0,10): "   + str.substring(0, 10)); // RUNOOB GOO
console.log("(5): "      + str.substring(5));     // B GOOGLE TAOBAO FACEBOOK
1
2
3
4

5.14、toLocaleLowerCase()

根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。

var str = "Runoob Google"; 
console.log(str.toLocaleLowerCase( ));  // runoob google
1
2

5.15、toLocaleUpperCase()

据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。

var str = "Runoob Google"; 
console.log(str.toLocaleUpperCase( ));  // RUNOOB GOOGLE
1
2

5.16、toLowerCase()

把字符串转换为小写。

var str = "Runoob Google"; 
console.log(str.toLowerCase( ));  // runoob google
1
2

5.17、toString()

返回字符串。

var str = "Runoob"; 
console.log(str.toString( )); // Runoob
1
2

5.18、toUpperCase()

把字符串转换为大写。

var str = "Runoob Google"; 
console.log(str.toUpperCase( ));  // RUNOOB GOOGLE
1
2

5.19、valueOf()

返回指定字符串对象的原始值。

var str = new String("Runoob"); 
console.log(str.valueOf( ));  // Runoob
1
2

6、数组 Array

6.1、number 类型的数组

var nums:number[] = [1,2,3,4] 
console.log(nums[0]); // 1
1
2

6.2、string 类型的数组

var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); // Google
1
2
3

6.3、数组解构

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

6.4、数组迭代

var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}
//1001
//1002
//1003
//1004
1
2
3
4
5
6
7
8
9
10

6.5、多维数组

var multi:number[][] = [[1,2,3],[23,24,25]]  
console.log(multi[0][0]) //1
1
2

6.6、数组方法

1、concat()

连接两个或更多的数组，并返回结果。

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3
1
2
3
4
5

2、every()

检测数值元素的每个元素是否都符合条件。

function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false
1
2
3
4
5
6

3、filter()

检测数值元素，并返回符合条件所有元素的数组。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
          
var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed ); // 12,130,44
1
2
3
4
5
6

4、forEach()

数组每个元素都执行一次回调函数。

let num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);
}); 
编译成 JavaScript 代码：

var num = [7, 8, 9];
num.forEach(function (value) {
    console.log(value);  // 7   8   9
});
1
2
3
4
5
6
7
8
9
10

5、indexOf()

搜索数组中的元素，并返回它所在的位置。

如果搜索不到，返回值 -1，代表没有此项。

var index = [12, 5, 8, 130, 44].indexOf(8); 
console.log("index is : " + index );  // 2
1
2

6、join()

把数组的所有元素放入一个字符串。

var arr = new Array("Google","Runoob","Taobao"); 
          
var str = arr.join(); 
console.log("str : " + str );  // Google,Runoob,Taobao
          
var str = arr.join(", "); 
console.log("str : " + str );  // Google, Runoob, Taobao
          
var str = arr.join(" + "); 
console.log("str : " + str );  // Google + Runoob + Taobao
1
2
3
4
5
6
7
8
9
10

7、lastIndexOf()

返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

var index = [12, 5, 8, 130, 44].lastIndexOf(8); 
console.log("index is : " + index );  // 2
1
2

8、map()

通过指定函数处理数组的每个元素，并返回处理后的数组。

var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
console.log("roots is : " + roots );  // 1,2,3
1
2
3

9、pop()

删除数组的最后一个元素并返回删除的元素。

var numbers = [1, 4, 9]; 
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 9
          
var element = numbers.pop(); 
console.log("element is : " + element );  // 4
1
2
3
4
5
6
7

10、push()

向数组的末尾添加一个或更多元素，并返回新的长度。

var numbers = new Array(1, 4, 9); 
var length = numbers.push(10); 
console.log("new numbers is : " + numbers );  // 1,4,9,10 
length = numbers.push(20); 
console.log("new numbers is : " + numbers );  // 1,4,9,10,20
1
2
3
4
5

11、reduce()

将数组元素计算为一个值（从左到右）。

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
1
2

12、reduceRight()

将数组元素计算为一个值（从右到左）。

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); 
console.log("total is : " + total );  // 6
1
2

13、reverse()

反转数组的元素顺序。

var arr = [0, 1, 2, 3].reverse(); 
console.log("Reversed array is : " + arr );  // 3,2,1,0
1
2

14、shift()

删除并返回数组的第一个元素。

var arr = [10, 1, 2, 3].shift(); 
console.log("Shifted value is : " + arr );  // 10
1
2

15、slice()

选取数组的的一部分，并返回一个新数组。

var arr = [“orange”, “mango”, “banana”, “sugar”, “tea”];
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); // mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) ); // mango,banana

16、some()

检测数组元素中是否有元素符合指定条件。

function isBigEnough(element, index, array) { 
   return (element >= 10); 
          
} 
          
var retval = [2, 5, 8, 1, 4].some(isBigEnough);
console.log("Returned value is : " + retval );  // false
          
var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );  // true
1
2
3
4
5
6
7
8
9
10

17、sort()

对数组的元素进行排序。

var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar
1
2
3

18、splice()

从数组中添加或删除元素。

var arr = ["orange", "mango", "banana", "sugar", "tea"];  
var removed = arr.splice(2, 0, "water");  
console.log("After adding 1: " + arr );    // orange,mango,water,banana,sugar,tea 
console.log("removed is: " + removed); // []
          
removed = arr.splice(3, 1);  
console.log("After removing 1: " + arr );  // orange,mango,water,sugar,tea 
console.log("removed is: " + removed);  // banana
1
2
3
4
5
6
7
8

19、toString()

把数组转换为字符串，并返回结果。

var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar
1
2
3

20、unshift()

向数组的开头添加一个或更多元素，并返回新的长度。

var arr = new Array(“orange”, “mango”, “banana”, “sugar”);
var length = arr.unshift(“water”);
console.log("Returned array is : " + arr ); // water,orange,mango,banana,sugar
console.log("Length of the array is : " + length ); // 5

7、Map 对象

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

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

Map 是 ES6 中引入的一种新的数据结构，可以参考 ES6 Map 与 Set。

7.1、创建 Map

创建初始化 Map，可以以数组的格式来传入键值对：

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

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

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);//Map { 'Google' => 1, 'Taobao' => 3 }
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);//Map {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

7.2、迭代 Map

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);                  
}
// Google
// Runoob
// Taobao
 
// 迭代 Map 中的 value
for (let value of nameSiteMapping.values()) {
    console.log(value);                 
}
// 1
// 2
// 3
 
// 迭代 Map 中的 key => value
for (let entry of nameSiteMapping.entries()) {
    console.log(entry[0], entry[1]);   
}
// Google 1
// Runoob 2
// Taobao 3
 
// 使用对象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}
// Google 1
// Runoob 2
// Taobao 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

使用 es6 编译：

tsc --target es6 test.ts

8、元组

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

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

8.1、定义 访问元组

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) //10
1
2

8.2、元组运算

• push() 向元组添加元素，添加在最后面。

• pop() 从元组中移除元素（最后一个），并返回移除的元素。

var mytuple = [10,"Hello","World","typeScript"]; 
console.log("添加前元素个数："+mytuple.length)    // 返回元组的大小，4
 
mytuple.push(12)                                    // 添加到元组中
console.log("添加后元素个数："+mytuple.length) // 添加后元素个数：5
console.log("删除前元素个数："+mytuple.length)  // 删除前元素个数：5
console.log(mytuple.pop()+" 元素从元组中删除") // 删除并返回删除的元素 12
        
console.log("删除后元素个数："+mytuple.length) // 删除后元素个数：4
1
2
3
4
5
6
7
8
9

8.3、解构元组

var a =[10,“Runoob”]
var [b,c] = a
console.log( b ) // 10
console.log( c ) // Runoob

9、 联合类型

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

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

var val:string|number 
val = 12 
console.log("数字为 "+ val)  // 数字为 12
val = "Runoob" 
console.log("字符串为 " + val) // 字符串为 Runoob
1
2
3
4
5

将联合类型作为函数参数使用：

function disp(name:string|string[]) { 
        if(typeof name == "string") { 
                console.log(name) 
        } else { 
                var i; 
                for(i = 0;i<name.length;i++) { 
                console.log(name[i])
                } 
        } 
} 
disp("Runoob") // Runoob
console.log("输出数组....") // 输出数组....
disp(["Runoob","Google","Taobao","Facebook"])
//Runoob
//Google
//Taobao
//Facebook
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

10、 TypeScript 接口

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

10.1、联合类型和接口

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
    commandline:string[]|(()=>string); 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there",
    commandline:()=>{return "**Hello World**";}} 
    
} 
 
console.log("Customer 对象 ") // Customer 对象
console.log(customer.firstName) // Tom
console.log(customer.lastName) // Hanks
console.log(customer.sayHi())  //Hi there
console.log(customer.commandline())  //**Hello World**
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!",
    commandline:["Hello","World"]} 
} 
 
console.log("Employee  对象 ") // Employee  对象
console.log(employee.firstName) // Jim
console.log(employee.lastName) // Blakes
console.log(customer.commandline())  //Hello
//World
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

10.2、接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

interface namelist { 
// 索引值是number，值是string
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]
1
2
3
4
5
6
7
8
9

interface ages { 
// inde 是string 值是number
   [index:string]:number 
} 
 
var agelist:ages; 
 // 类型正确 
agelist["runoob"] = 15  
 
// 类型错误，输出  error TS2322: Type '"google"' is not assignable to type 'number'.
// agelist[2] = "google"
1
2
3
4
5
6
7
8
9
10
11

10.3、多继承实例

interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2) // value 1: 12 value 2: 23
1
2
3
4
5
6
7
8
9
10
11

11、类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。
TypeScript 支持面向对象的所有特性，比如 类、接口等。

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

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

• 构造函数 − 类实例化时调用，可以为类的对象分配内存。

• 方法 − 方法为对象要执行的操作。

class Car { 
   // 字段
   engine:string; 
   
   // 构造函数
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   // 方法
   disp():void { 
      console.log("函数中显示发动机型号  :   "+this.engine) 
   } 
} 
 
// 创建一个对象
var obj = new Car("XXSY1")
 
// 访问字段
console.log("读取发动机型号 :  "+obj.engine)  // 读取发动机型号 :  XXSY1
 
// 访问方法
obj.disp() // 函数中显示发动机型号  :   XXSY1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

11.1、类的继承

实例
类的继承：实例中创建了 Shape 类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性：

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

11.2、多重继承

需要注意的是子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承，如下实例：

class Root { 
   str:string; 
} 
 
class Child extends Root {} 
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
 
var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str) // hello
1
2
3
4
5
6
7
8
9
10

11.3、继承类的方法重写

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

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

class PrinterClass { 
   doPrint():void {
      console.log("父类的 doPrint() 方法。") // 父类的 doPrint() 方法。
   } 
} 
 
class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() // 调用父类的函数
      console.log("子类的 doPrint()方法。") // 子类的 doPrint()方法
   } 
}
1
2
3
4
5
6
7
8
9
10
11
12

11.4、static 关键字

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

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法,num 值为 12
1
2
3
4
5
6
7
8
9
10

11.5、instanceof 运算符

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

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson);// obj 对象是 Person 类实例化来的吗？ true
1
2
3
4

11.5、访问控制修饰符

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

• public（默认） : 公有，可以在任何地方被访问。

• protected : 受保护，可以被其自身以及其子类访问。

• private : 私有，只能被其定义所在的类访问。
  例如：

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的
1
2
3
4
5
6
7
8

11.6、类和接口

类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

以下实例红 AgriLoan 类实现了 ILoan 接口：

interface ILoan { 
   interest:number 
} 
 
class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 
 
var obj = new AgriLoan(10,1) 
console.log("利润为 : "+obj.interest+"，抽成为 : "+obj.rebate ) // 利润为 : 10，抽成为 : 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

12、TypeScript 对象

Typescript 中的对象必须是特定类型的实例。
对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello(); // hello Runoob
1
2
3
4
5
6
7
8
9

12.1、鸭子类型(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})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

13、TypeScript 声明文件

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

13.1、声明文件

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

runoob.d.ts
1

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

declare module Module_Name {
}
1
2

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

/// 
1

四、常识

1. TypeScript于2012年10月首次发布0.8版本。
2. TypeScript 是 JavaScript 的超集
3. TypeScript 语言的文件名后缀是.ts
4. TypeScript是一种开源的编程语言，该语言项目由微软进行维护和管理。
5. TypeScript 可以转译成 JavaScript
6. TypeScript 支持 ECMAScript 6 标准
7. TypeScript 主要的三种简单数据类型是Boolean, Number, String
8. 通过启用编译器选项来禁用隐式变量类型赋值的是noImplicitAny
9. 通过启用strictNullChecks编译器属性来启用“未定义 undefined”和“空 null”类型
10. unknown类似于 ‘any’，但在不确定类型时更安全
11. 类型别名通常与什么类型一起使用 Strings
12. 接口类似于类型别名，但仅适用于对象类型
13. 枚举的两种类型是String 与 Number
14. 数字类型的枚举第一个默认值是什么0
15. Definitely Typed 是最受欢迎的声明文件存储库
16. function ex(param1?: string){}的类型是string | undefined
17. 访问修饰符主要控制属性和方法的类型
18. 当一个类扩展另一个类，并替换其父类的成员时，它被称为override （覆盖）