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先从安装开始 @[toc]

一、安装

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

二、案例切入

  1. 新建一个 app.ts 的文件,代码如下:
javascript 复制代码
var message:string = "Hello World" 
console.log(message)

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

  1. 转换为js 然后执行以下命令将 TypeScript 转换为 JavaScript 代码:
javascript 复制代码
tsc app.ts
  1. 执行编译 使用 node 命令来执行 app.js 文件:
javascript 复制代码
$ node app.js 

三、语法

1、数据类型

数据类型 描述
任意类型 any 声明为 any 的变量可以赋予任意类型的值。
数字类型 number let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制let hexLiteral: number = 0xf00d; // 十六进制
字符串类型 string let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型 boolean let flag: boolean = true;
数组类型 let arr: number[] = [1, 2];// 在元素类型后面加上[]
元组 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错
枚举 enum enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
void function hello(): void {alert("Hello Runoob");}
null 表示对象值缺失
undefined 用于初始化变量为一个未定义的值
never never 是其他类型(包括 null 和 undefined)的子类型,代表从不会出现的值

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

2、变量声明

TypeScript 变量的命名规则:

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

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

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

  1. 声明变量的类型及初始值:var [变量名] : [类型] = 值;
javascript 复制代码
var uname:string = "Runoob";
  1. 声明变量的类型,但没有初始值,变量值会设置为 undefined:var [变量名] : [类型];
javascript 复制代码
var uname:string;
  1. 声明变量并初始值,但不设置类型,该变量可以是任意类型:var [变量名] = 值;
javascript 复制代码
var uname = "Runoob";
  1. 声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined:var [变量名];
javascript 复制代码
var uname;

3、函数定义

3.1、函数定义

可选参数使用问号标识 ?

javascript 复制代码
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");  // 正确

3.2、匿名函数

javascript 复制代码
var res = function(a:number,b:number) { 
    return a*b;  
}; 
console.log(res(12,2))

3.3、匿名函数自调用

javascript 复制代码
(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

3.4、构造函数

javascript 复制代码
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

3.5、递归函数

通俗理解:从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?"从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?'从前有座山,山里有座庙,庙里有个老和尚,正在给小和尚讲故事呢!故事是什么呢?......'"

javascript 复制代码
function factorial(number) {
    if (number <= 0) {         // 停止执行
        return 1; 
    } else {     
        return (number * factorial(number - 1));     // 调用自身
    } 
}; 
console.log(factorial(6));      // 输出 720

3.6、Lambda 函数

javascript 复制代码
var foo = (x:number)=>10 + x 
console.log(foo(100))      //输出结果为 110

3.7、函数重载

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

javascript 复制代码
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");

4、Number 对象方法

4.1、toExponential()

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

javascript 复制代码
//toExponential() 
var num1 = 1225.30 
var val = num1.toExponential(); 
console.log(val) // 输出: 1.2253e+3

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()

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

javascript 复制代码
var num = new Number(177.1234); 
console.log( num.toLocaleString());  // 输出:177.1234

4.4、toPrecision()

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

javascript 复制代码
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

4.5、toString()

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

javascript 复制代码
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

4.6、valueOf()

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

javascript 复制代码
var num = new Number(10); 
console.log(num.valueOf()); // 输出:10

4.7、时间格式化

javascript 复制代码
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 (中国标准时间)

5、TypeScript String(字符串)

String 对象用于处理文本(字符串)。 ==String 对象属性==

5.1、constructor

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

javascript 复制代码
var str = new String( "This is string" ); 
console.log("str.constructor is:" + str.constructor)

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

5.2、length

返回字符串的长度。

javascript 复制代码
var uname = new String("Hello World") 
console.log("Length "+uname.length)  // 输出 11

5.3、prototype

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

javascript 复制代码
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)

==String 方法==

5.1、charAt()

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

javascript 复制代码
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

5.2、charCodeAt()

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

javascript 复制代码
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

5.3、concat()

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

javascript 复制代码
var str1 = new String( "RUNOOB" ); 
var str2 = new String( "GOOGLE" ); 
var str3 = str1.concat( str2 ); 
console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE

5.4、indexOf()

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

javascript 复制代码
var str1 = new String( "RUNOOB" ); 

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

5.5、lastIndexOf()

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

javascript 复制代码
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

5.6、localeCompare()

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

javascript 复制代码
var str1 = new String( "This is beautiful string" );
  
var index = str1.localeCompare( "This is beautiful string");  

console.log("localeCompare first :" + index );  // 0

5.7、match()

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

javascript 复制代码
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g);  // ain,ain,ain

5.8、replace()

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

javascript 复制代码
var re = /(\w+)\s(\w+)/; 
var str = "zara ali"; 
var newstr = str.replace(re, "$2, $1"); 
console.log(newstr); // ali, zara

5.9、search()

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

javascript 复制代码
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" ); 
} 

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()

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

javascript 复制代码
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

5.14、toLocaleLowerCase()

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

javascript 复制代码
var str = "Runoob Google"; 
console.log(str.toLocaleLowerCase( ));  // runoob google

5.15、toLocaleUpperCase()

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

javascript 复制代码
var str = "Runoob Google"; 
console.log(str.toLocaleUpperCase( ));  // RUNOOB GOOGLE

5.16、toLowerCase()

把字符串转换为小写。

javascript 复制代码
var str = "Runoob Google"; 
console.log(str.toLowerCase( ));  // runoob google

5.17、toString()

返回字符串。

javascript 复制代码
var str = "Runoob"; 
console.log(str.toString( )); // Runoob

5.18、toUpperCase()

把字符串转换为大写。

javascript 复制代码
var str = "Runoob Google"; 
console.log(str.toUpperCase( ));  // RUNOOB GOOGLE

5.19、valueOf()

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

javascript 复制代码
var str = new String("Runoob"); 
console.log(str.valueOf( ));  // Runoob

6、数组 Array

6.1、number 类型的数组

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

6.2、string 类型的数组

c 复制代码
var sites:string[]; 
sites = ["Google","Runoob","Taobao"] 
console.log(sites[0]); // Google

6.3、数组解构

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

6.4、数组迭代

c 复制代码
var j:any; 
var nums:number[] = [1001,1002,1003,1004] 
 
for(j in nums) { 
    console.log(nums[j]) 
}
//1001
//1002
//1003
//1004

6.5、多维数组

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

6.6、数组方法

1、concat()

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

c 复制代码
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

2、every()

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

c 复制代码
function isBigEnough(element, index, array) { 
        return (element >= 10); 
} 
        
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
console.log("Test Value : " + passed ); // false

3、filter()

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

c 复制代码
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

4、forEach()

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

c 复制代码
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
});

5、indexOf()

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

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

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

6、join()

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

c 复制代码
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

7、lastIndexOf()

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

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

8、map()

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

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

9、pop()

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

c 复制代码
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

10、push()

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

c 复制代码
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

11、reduce()

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

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

12、reduceRight()

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

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

13、reverse()

反转数组的元素顺序。

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

14、shift()

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

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

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()

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

c 复制代码
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

17、sort()

对数组的元素进行排序。

c 复制代码
var arr = new Array("orange", "mango", "banana", "sugar"); 
var sorted = arr.sort(); 
console.log("Returned string is : " + sorted );  // banana,mango,orange,sugar

18、splice()

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

c 复制代码
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

19、toString()

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

c 复制代码
var arr = new Array("orange", "mango", "banana", "sugar");         
var str = arr.toString(); 
console.log("Returned string is : " + str );  // orange,mango,banana,sugar

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,可以以数组的格式来传入键值对:

c 复制代码
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对象中每个元素的值 。
c 复制代码
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 {}

7.2、迭代 Map

TypeScript使用 for...of 来实现迭代:

c 复制代码
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

使用 es6 编译:

tsc --target es6 test.ts

8、元组

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

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

8.1、定义 访问元组

c 复制代码
var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) //10

8.2、元组运算

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

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

c 复制代码
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

8.3、解构元组

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

9、 联合类型

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

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

c 复制代码
var val:string|number 
val = 12 
console.log("数字为 "+ val)  // 数字为 12
val = "Runoob" 
console.log("字符串为 " + val) // 字符串为 Runoob

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

c 复制代码
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

10、 TypeScript 接口

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

10.1、联合类型和接口

c 复制代码
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

10.2、接口和数组

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

c 复制代码
interface namelist { 
// 索引值是number,值是string
   [index:number]:string 
} 
 
// 类型一致,正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]
c 复制代码
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"

10.3、多继承实例

c 复制代码
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

11、类

TypeScript 是面向对象的 JavaScript。

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

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

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

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

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

c 复制代码
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

11.1、类的继承

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

c 复制代码
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()

11.2、多重继承

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

c 复制代码
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

11.3、继承类的方法重写

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

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

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

11.4、static 关键字

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

c 复制代码
class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法,num 值为 12

11.5、instanceof 运算符

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

c 复制代码
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log("obj 对象是 Person 类实例化来的吗? " + isPerson);// obj 对象是 Person 类实例化来的吗? true

11.5、访问控制修饰符

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

  • public(默认) : 公有,可以在任何地方被访问。

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

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

c 复制代码
class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误, str2 是私有的

11.6、类和接口

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

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

c 复制代码
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

12、TypeScript 对象

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

c 复制代码
var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello(); // hello Runoob

12.1、鸭子类型(Duck Typing)

鸭子类型(英语:duck typing)是动态类型的一种风格,是多态(polymorphism)的一种形式。 在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由"当前方法和属性的集合"决定。

可以这样表述: "当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子,那么这只鸟就可以被称为鸭子。"

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

c 复制代码
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})

13、TypeScript 声明文件

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

13.1、声明文件

声明文件以 .d.ts 为后缀,例如:

c 复制代码
runoob.d.ts

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

c 复制代码
declare module Module_Name {
}

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

c 复制代码
/// <reference path = " runoob.d.ts" />

四、常识

  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 (覆盖)
相关推荐
MiyueFE19 小时前
🚀🚀五个前端开发者都应该了解的TS技巧
前端·typescript
ttod_qzstudio20 小时前
基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考
typescript·命令模式
张志鹏PHP全栈21 小时前
TypeScript 第十天,TypeScript面向对象之Class(二)
前端·typescript
慧一居士1 天前
ESLint 完整功能介绍和完整使用示例演示
前端·javascript·typescript
enzeberg2 天前
TypeScript 工具类型(Utility Types)
typescript
難釋懷2 天前
TypeScript类
前端·typescript
杰哥焯逊2 天前
基于TS封装的高德地图JS APi2.0实用工具(包含插件类型,基础类型)...持续更新
前端·javascript·typescript
工业甲酰苯胺3 天前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
土豆骑士4 天前
简单理解Typescript 装饰器
前端·typescript
ttod_qzstudio4 天前
彻底移除 HTML 元素:element.remove() 的本质与最佳实践
前端·javascript·typescript·html