在学习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
二、案例切入
- 新建一个 app.ts 的文件,代码如下:
javascript
var message:string = "Hello World"
console.log(message)
通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。
- 转换为
js
然后执行以下命令将 TypeScript 转换为 JavaScript 代码:
javascript
tsc app.ts
- 执行编译 使用 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 变量的命名规则:
-
变量名称可以包含数字和字母。
-
除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格。
-
变量名不能以数字开头。
- 声明变量的类型及初始值:
var [变量名] : [类型] = 值;
javascript
var uname:string = "Runoob";
- 声明变量的类型,但没有初始值,变量值会设置为 undefined:
var [变量名] : [类型];
javascript
var uname:string;
- 声明变量并初始值,但不设置类型,该变量可以是任意类型:
var [变量名] = 值;
javascript
var uname = "Runoob";
- 声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 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" />
四、常识
- TypeScript于
2012年10月
首次发布0.8版本。 - TypeScript 是
JavaScript 的超集
- TypeScript 语言的文件名后缀是
.ts
- TypeScript是一种开源的编程语言,该语言项目由
微软
进行维护和管理。 - TypeScript
可以
转译成 JavaScript - TypeScript
支持
ECMAScript 6 标准 - TypeScript 主要的三种简单数据类型是
Boolean, Number, String
- 通过启用编译器选项来禁用隐式变量类型赋值的是
noImplicitAny
- 通过启用
strictNullChecks
编译器属性来启用"未定义 undefined"和"空 null"类型 unknown
类似于 'any',但在不确定类型时更安全- 类型别名通常与什么类型一起使用
Strings
- 接口类似于类型别名,但仅适用于对象类型
- 枚举的两种类型是
String 与 Number
- 数字类型的枚举第一个默认值是什么
0
- Definitely Typed 是
最受欢迎的声明文件存储库
function ex(param1?: string){}
的类型是string | undefined
- 访问修饰符主要控制属性和方法的
类型
- 当一个类扩展另一个类,并替换其父类的成员时,它被称为
override (覆盖)