企业网站开发报告,上传网站程序,外贸网络推广哪个好,正邦设计创始人菜鸟教程
TypeScript基础类型
数字类型 number
双精度 64 位浮点值。它可以用来表示整数和分数。
let binaryLiteral: number 0b1010; // 二进制
let octalLiteral: number 0o744; // 八进制
let decLiteral: number 6; // 十进制
let hexLiteral: number 0xf00d…菜鸟教程
TypeScript基础类型
数字类型 number
双精度 64 位浮点值。它可以用来表示整数和分数。
let binaryLiteral: number 0b1010; // 二进制
let octalLiteral: number 0o744; // 八进制
let decLiteral: number 6; // 十进制
let hexLiteral: number 0xf00d; // 十六进制字符串类型
一个字符系列使用单引号或双引号来表示字符串类型。反引号来定义多行文本和内嵌表达式。
let name: string Runoob;
let years: number 5;
let words: string 您好今年是 ${ name } 发布 ${ years 1} 周年;布尔类型
表示逻辑值true 和 false。
let flag: boolean true;数组类型
声明变量为数组。
// 在元素类型后面加上[]
let arr: number[] [1, 2];// 或者使用数组泛型
let arr: Arraynumber [1, 2];元组、
元组类型用来表示已知元素数量和类型的数组各元素的类型不必相同对应位置的类型需要相同。
let x: [string, number];
x [Runoob, 1]; // 运行正常
x [1, Runoob]; // 报错
console.log(x[0]); // 输出 Runoob枚举
枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c: Color Color.Blue;
console.log(c); // 输出 2void
用于标识方法返回值的类型表示该方法没有返回值。
function hello(): void {alert(Hello Runoob);
}null
表示对象值缺失。
undefined
用于初始化变量为一个未定义的值
never
never 是其它类型包括 null 和 undefined的子类型代表从不会出现的值。
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) {} }
TypeScript变量声明
var uname:string Runoob;
var score1:number 50;
var score2:number 42.50
var sum score1 score2
console.log(名字: uname)
console.log(第一个科目成绩: score1)
console.log(第二个科目成绩: score2)
console.log(总成绩: sum)变量作用域
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)TypeScript运算符
算术运算符 逻辑运算符 关系运算符 按位运算符 赋值运算符 三元/条件运算符 字符串运算符 类型运算符
TypeScript条件语句
if 语句 - 只有当指定条件为 true 时使用该语句来执行代码 if…else 语句 - 当条件为 true 时执行代码当条件为 false 时执行其他代码 if…else if…else 语句- 使用该语句来选择多个代码块之一来执行 switch 语句 - 使用该语句来选择多个代码块之一来执行
TypeScript循环
for循环
var num:number 5;
var i:number;
var factorial 1; for(i num;i1;i--) {factorial * i;
}
console.log(factorial)for…in循环
var j:any;
var n:any a b c for(j in n) {console.log(n[j])
}for…of、forEach、every和some循环
let someArray [1, string, false];for (let entry of someArray) {console.log(entry); // 1, string, false
}let list [4, 5, 6];
list.forEach((val, idx, array) {// val: 当前值// idx当前index// array: Array
});while循环
var num:number 5;
var factorial:number 1; while(num 1) { factorial factorial * num; num--;
}
console.log(5 的阶乘为factorial);do…while循环
var n:number 10;
do { console.log(n); n--;
} while(n0);
break语句
var i:number 1
while(i10) { if (i % 5 0) { console.log (在 1~10 之间第一个被 5 整除的数为 : i) break // 找到一个后退出循环} i
} // 输出 5 然后程序执行结束continue语句
var num:number 0
var count:number 0;for(num0;num20;num) {if (num % 20) {continue}count
}
console.log (0 ~20 之间的奇数个数为: count) //输出10个偶数无限循环
for(;;) { console.log(这段代码会不停的执行)
}
while(true) { // 语句
} TypeScript函数
function () { // 函数定义console.log(调用函数)
}// 函数定义
function greet():string { // 返回一个字符串return Hello World
} function caller() { var msg greet() // 调用 greet() 函数 console.log(msg)
} // 调用函数
caller()function add(x: number, y: number): number {return x y;
}
console.log(add(1,2))可选参数和默认参数
function calculate_discount(price:number,rate:number 0.50) { var discount price * rate; console.log(计算结果: ,discount);
}
calculate_discount(1000)
calculate_discount(1000,0.30)剩余参数
function buildName(firstName: string, ...restOfName: string[]) {return firstName restOfName.join( );
}let employeeName buildName(Joseph, Samuel, Lucas, MacKinzie);function addNumbers(...nums:number[]) { var i; var sum:number 0; for(i 0;inums.length;i) { sum sum nums[i]; } console.log(和为,sum) } addNumbers(1,2,3) addNumbers(10,10,10,10,10)匿名函数自调用
(function () { var x Hello!!; console.log(x) })()构造函数
var myFunction new Function(a, b, return a * b);
var x myFunction(4, 3);
console.log(x);递归函数
function factorial(number) {if (number 0) { // 停止执行return 1; } else { return (number * factorial(number - 1)); // 调用自身}
};
console.log(factorial(6)); // 输出 720Lambda函数
function factorial(number) {if (number 0) { // 停止执行return 1; } else { return (number * factorial(number - 1)); // 调用自身}
};
console.log(factorial(6)); // 输出 720var func (x) { if(typeof xnumber) { console.log(x 是一个数字) } else if(typeof xstring) { console.log(x 是一个字符串) }
}
func(12)
func(Tom)var display x { console.log(输出为 x)
}
display(12)var disp () { console.log(Function invoked);
}
disp();函数重载
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);TypeScript Number
Number对象属性
MAX_VALUE 可表示的最大的数MAX_VALUE 属性值接近于 1.79E308。大于 MAX_VALUE 的值代表 “Infinity”。 MIN_VALUE 可表示的最小的数即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUEMIN_VALUE 的值约为 5e-324。小于 MIN_VALUE (“underflow values”) 的值将会转换为 0。 NaN 非数字值Not-A-Number。 NEGATIVE_INFINITY 负无穷大溢出时返回该值。该值小于 MIN_VALUE。 POSITIVE_INFINITY 正无穷大溢出时返回该值。该值大于 MAX_VALUE。 prototype Number 对象的静态属性。使您有能力向对象添加属性和方法。 constructor 返回对创建此对象的 Number 函数的引用。
console.log(TypeScript Number 属性: );
console.log(最大值为: Number.MAX_VALUE);
console.log(最小值为: Number.MIN_VALUE);
console.log(负无穷大: Number.NEGATIVE_INFINITY);
console.log(正无穷大: Number.POSITIVE_INFINITY);NaN实例
var month 0
if( month0 || month 12) { month Number.NaN console.log(月份是 month)
} else { console.log(输入月份数值正确。)
}prototype 实例
function employee(id:number,name:string) { this.id id this.name name
} var emp new employee(123,admin)
employee.prototype.email adminrunoob.com console.log(员工号: emp.id)
console.log(员工姓名: emp.name)
console.log(员工邮箱: emp.email)Number对象方法
toExponential()把对象的值转换为指数计数法
//toExponential()
var num1 1225.30
var val num1.toExponential();
console.log(val) // 输出 1.2253e3
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.234000
toLocaleString() 把数字转换为字符串使用本地数字格式顺序。
var num new Number(177.1234);
console.log( num.toLocaleString()); // 输出177.1234
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
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
valueOf()返回一个 Number 对象的原始数字值。
var num new Number(10);
console.log(num.valueOf()); // 输出10
TypeScript String字符串
var txt new String(string);
或者更简单方式
var txt string;
constructor对创建该对象的函数的引用。
var str new String( This is string );
console.log(str.constructor is: str.constructor)
输出结果str.constructor is:function String() { [native code] }length 返回字符串的长度。
var uname new String(Hello World)
console.log(Length uname.length) // 输出 11prototype 允许您向对象添加属性和方法。
String方法
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)); // BcharCodeAt() 返回在指定的位置的字符的 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)); // 66concat() 连接两个或更多字符串并返回新的字符串。
var str1 new String( RUNOOB );
var str2 new String( GOOGLE );
var str3 str1.concat( str2 );
console.log(str1 str2 : str3) // RUNOOBGOOGLEindexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
var str1 new String( RUNOOB ); var index str1.indexOf( OO );
console.log(查找的字符串位置 : index ); // 3lastIndexOf() 从后向前搜索字符串并从起始位置0开始计算返回字符串最后出现的位置。
var str1 new String( This is string one and again string );
var index str1.lastIndexOf( string );
console.log(lastIndexOf 查找到的最后字符串位置 : index ); // 29index str1.lastIndexOf( one );
console.log(lastIndexOf 查找到的最后字符串位置 : index ); // 15localeCompare() 用本地特定的顺序来比较两个字符串。
var str1 new String( This is beautiful string );var index str1.localeCompare( This is beautiful string); console.log(localeCompare first : index ); // 0match()
查找找到一个或多个正则表达式的匹配。
var strThe rain in SPAIN stays mainly in the plain;
var nstr.match(/ain/g); // ain,ain,ainreplace() 替换与正则表达式匹配的子串
var re /(\w)\s(\w)/;
var str zara ali;
var newstr str.replace(re, $2, $1);
console.log(newstr); // ali, zarasearch() 检索与正则表达式相匹配的值
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 );
} slice() 提取字符串的片断并在新的字符串中返回被提取的部分。 split() 把字符串分割为子字符串数组。
var str Apples are round, and apples are juicy.;
var splitted str.split( , 3);
console.log(splitted) // [ Apples, are, round, ]substr() 从起始索引号提取字符串中指定数目的字符。 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 FACEBOOKtoLocaleLowerCase() 根据主机的语言环境把字符串转换为小写只有几种语言如土耳其语具有地方特有的大小写映射。
var str Runoob Google;
console.log(str.toLocaleLowerCase( )); // runoob googletoLocaleUpperCase() 据主机的语言环境把字符串转换为大写只有几种语言如土耳其语具有地方特有的大小写映射。
var str Runoob Google;
console.log(str.toLocaleUpperCase( )); // RUNOOB GOOGLEtoLowerCase() 把字符串转换为小写。
var str Runoob Google;
console.log(str.toLowerCase( )); // runoob googletoString() 返回字符串。
var str Runoob;
console.log(str.toString( )); // RunoobtoUpperCase() 把字符串转换为大写。
var str Runoob Google;
console.log(str.toUpperCase( )); // RUNOOB GOOGLEvalueOf() 返回指定字符串对象的原始值。
var str new String(Runoob);
console.log(str.valueOf( )); // RunoobTypeScript Array数组
var sites:string[];
sites [Google,Runoob,Taobao]var sites:string[];
sites [Google,Runoob,Taobao]
console.log(sites[0]);
console.log(sites[1]);var nums:number[] [1,2,3,4]
console.log(nums[0]);
console.log(nums[1]);
console.log(nums[2]);
console.log(nums[3]);Array对象
var arr_names:number[] new Array(4)
for(var i 0; iarr_names.length; i) { arr_names[i] i * 2 console.log(arr_names[i])
}var sites:string[] new Array(Google,Runoob,Taobao,Facebook)
for(var i 0;isites.length;i) { console.log(sites[i])
}数组结构
var arr:number[] [12,13]
var[x,y] arr // 将数组的两个元素赋值给变量 x 和 y
console.log(x)
console.log(y)数组迭代
var j:any;
var nums:number[] [1001,1002,1003,1004] for(j in nums) { console.log(nums[j])
}多维数组
var multi:number[][] [[1,2,3],[23,24,25]]
console.log(multi[0][0])
console.log(multi[0][1])
console.log(multi[0][2])
console.log(multi[1][0])
console.log(multi[1][1])
console.log(multi[1][2])数组在函数中的使用
作为参数传递给函数
var sites:string[] new Array(Google,Runoob,Taobao,Facebook) function disp(arr_sites:string[]) {for(var i 0;iarr_sites.length;i) { console.log(arr_sites[i]) }
}
disp(sites);作为函数的返回值
function disp():string[] { return new Array(Google, Runoob, Taobao, Facebook);
} var sites:string[] disp()
for(var i in sites) { console.log(sites[i])
}数组方法
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 every() 检测数值元素的每个元素是否都符合条件。
function isBigEnough(element, index, array) { return (element 10);
} var passed [12, 5, 8, 130, 44].every(isBigEnough);
console.log(Test Value : passed ); // falsefilter() 检测数值元素并返回符合条件所有元素的数组。
function isBigEnough(element, index, array) { return (element 10);
} var passed [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(Test Value : passed ); // 12,130,44forEach() 数组每个元素都执行一次回调函数。
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
});indexOf() 搜索数组中的元素并返回它所在的位置。
如果搜索不到返回值 -1代表没有此项。
var index [12, 5, 8, 130, 44].indexOf(8);
console.log(index is : index ); // 2join() 把数组的所有元素放入一个字符串。
var arr new Array(Google,Runoob,Taobao); var str arr.join();
console.log(str : str ); // Google,Runoob,Taobaovar str arr.join(, );
console.log(str : str ); // Google, Runoob, Taobaovar str arr.join( );
console.log(str : str ); // Google Runoob TaobaolastIndexOf() 返回一个指定的字符串值最后出现的位置在一个字符串中的指定位置从后向前搜索。
var index [12, 5, 8, 130, 44].lastIndexOf(8);
console.log(index is : index ); // 2map() 通过指定函数处理数组的每个元素并返回处理后的数组。
var numbers [1, 4, 9];
var roots numbers.map(Math.sqrt);
console.log(roots is : roots ); // 1,2,3pop() 删除数组的最后一个元素并返回删除的元素。
var numbers [1, 4, 9]; var element numbers.pop();
console.log(element is : element ); // 9var element numbers.pop();
console.log(element is : element ); // 4push() 向数组的末尾添加一个或更多元素并返回新的长度。
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,20reduce() 将数组元素计算为一个值从左到右。
var total [0, 1, 2, 3].reduce(function(a, b){ return a b; });
console.log(total is : total ); // 6reduceRight() 将数组元素计算为一个值从右到左。
var total [0, 1, 2, 3].reduceRight(function(a, b){ return a b; });
console.log(total is : total ); // 6reverse() 反转数组的元素顺序。
var arr [0, 1, 2, 3].reverse();
console.log(Reversed array is : arr ); // 3,2,1,0shift() 删除并返回数组的第一个元素。
var arr [10, 1, 2, 3].shift();
console.log(Shifted value is : arr ); // 10slice() 选取数组的的一部分并返回一个新数组。
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,bananasome() 检测数组元素中是否有元素符合指定条件。
function isBigEnough(element, index, array) { return (element 10); } var retval [2, 5, 8, 1, 4].some(isBigEnough);
console.log(Returned value is : retval ); // falsevar retval [12, 5, 8, 1, 4].some(isBigEnough);
console.log(Returned value is : retval ); // truesort() 对数组的元素进行排序。
var arr new Array(orange, mango, banana, sugar);
var sorted arr.sort();
console.log(Returned string is : sorted ); // banana,mango,orange,sugarsplice() 从数组中添加或删除元素。
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); // bananatoString() 把数组转换为字符串并返回结果。
var arr new Array(orange, mango, banana, sugar);
var str arr.toString();
console.log(Returned string is : str ); // orange,mango,banana,sugarunshift() 向数组的开头添加一个或更多元素并返回新的长度。
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 ); // 5Typescript Map对象
创建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 myMap new Map();
let myMap new Map([[key1, value1],[key2, value2]]); 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 对象的所有键/值对
nameSiteMapping.clear(); // 清除 Map
console.log(nameSiteMapping);迭代Map
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);
}TypeScript 元组
如果存储的元素数据类型不同则需要使用元组。元组中允许存储不同类型的元素元组可以作为参数传递给函数。
var mytuple [10,Runoob];
var mytuple [];
mytuple[0] 120
mytuple[1] 234访问元组
var mytuple [10,Runoob]; // 创建元组
console.log(mytuple[0])
console.log(mytuple[1])元祖运算
push() 向元组添加元素添加在最后面。 pop() 从元组中移除元素最后一个并返回移除的元素。
var mytuple [10,Hello,World,typeScript];
console.log(添加前元素个数mytuple.length) // 返回元组的大小mytuple.push(12) // 添加到元组中
console.log(添加后元素个数mytuple.length)
console.log(删除前元素个数mytuple.length)
console.log(mytuple.pop() 元素从元组中删除) // 删除并返回删除的元素console.log(删除后元素个数mytuple.length)更新元组
var mytuple [10, Runoob, Taobao, Google]; // 创建一个元组
console.log(元组的第一个元素为 mytuple[0]) // 更新元组元素
mytuple[0] 121
console.log(元组中的第一个元素更新为 mytuple[0])解构元组
var mytuple [10, Runoob, Taobao, Google]; // 创建一个元组
console.log(元组的第一个元素为 mytuple[0]) // 更新元组元素
mytuple[0] 121
console.log(元组中的第一个元素更新为 mytuple[0])TypeScript联合类型
var val:string|number
val 12
console.log(数字为 val)
val Runoob
console.log(字符串为 val)function disp(name:string|string[]) { if(typeof name string) { console.log(name) } else { var i; for(i 0;iname.length;i) { console.log(name[i])} }
}
disp(Runoob)
console.log(输出数组....)
disp([Runoob,Google,Taobao,Facebook])联合类型数组
var arr:number[]|string[];
var i:number;
arr [1,2,4]
console.log(**数字数组**) for(i 0;iarr.length;i) { console.log(arr[i])
} arr [Runoob,Google,Taobao]
console.log(**字符串数组**) for(i 0;iarr.length;i) { console.log(arr[i])
}TypeScript接口
interface IPerson { firstName:string, lastName:string, sayHi: ()string
} var customer:IPerson { firstName:Tom,lastName:Hanks, sayHi: ():string {return Hi there}
} console.log(Customer 对象 )
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi()) var employee:IPerson { firstName:Jim,lastName:Blakes, sayHi: ():string {return Hello!!!}
} console.log(Employee 对象 )
console.log(employee.firstName)
console.log(employee.lastName)联合类型和接口
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());接口和数组
interface namelist { [index:number]:string
} // 类型一致正确
var list2:namelist [Google,Runoob,Taobao]
// 错误元素 1 不是 string 类型
// var list2:namelist [Runoob,1,Taobao]interface ages { [index:string]:number
} var agelist:ages; // 类型正确
agelist[runoob] 15 // 类型错误输出 error TS2322: Type google is not assignable to type number.
// agelist[2] google接口继承
单继承实例
interface Person { age:number
} interface Musician extends Person { instrument:string
} var drummer Musician{};
drummer.age 27
drummer.instrument Drums
console.log(年龄: drummer.age)
console.log(喜欢的乐器: drummer.instrument)多继承实例
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)TypeScript类
字段 − 字段是类里面声明的变量。字段表示对象的有关数据。 构造函数 − 类实例化时调用可以为类的对象分配内存。 方法 − 方法为对象要执行的操作。
class Person {
}创建类的数据成员
class Car { // 字段 engine:string; // 构造函数 constructor(engine:string) { this.engine engine } // 方法 disp():void { console.log(发动机为 : this.engine) }
}创建实例化对象
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) // 访问方法
obj.disp()类的继承
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()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)继承类的方法重写
class PrinterClass { doPrint():void {console.log(父类的 doPrint() 方法。) }
} class StringPrinter extends PrinterClass { doPrint():void { super.doPrint() // 调用父类的函数console.log(子类的 doPrint()方法。)}
}static关键字
class StaticMem { static num:number; static disp():void { console.log(num 值为 StaticMem.num) }
} StaticMem.num 12 // 初始化静态变量
StaticMem.disp() // 调用静态方法instanceof运算符
class Person{ }
var obj new Person()
var isPerson obj instanceof Person;
console.log(obj 对象是 Person 类实例化来的吗 isPerson);访问控制修饰符
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 是私有的类和接口
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 )TypeScript对象
var object_name { key1: value1, // 标量key2: value, key3: function() {// 函数}, key4:[content1, content2] //集合
}var sites { site1:Runoob, site2:Google
};
// 访问对象的值
console.log(sites.site1)
console.log(sites.site2)TypeScript类型模板
var sites {site1: Runoob,site2: Google,sayHello: function () { } // 类型模板
};
sites.sayHello function () {console.log(hello sites.site1);
};
sites.sayHello();此外对象也可以作为一个参数传递给函数如下实例
var sites { site1:Runoob, site2:Google,
};
var invokesites function(obj: { site1:string, site2 :string }) { console.log(site1 :obj.site1) console.log(site2 :obj.site2)
}
invokesites(sites)鸭子类型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})TypeScript 泛型
泛型的优势包括 代码重用 可以编写与特定类型无关的通用代码提高代码的复用性。 类型安全 在编译时进行类型检查避免在运行时出现类型错误。 抽象性 允许编写更抽象和通用的代码适应不同的数据类型和数据结构。
泛型标识符
T: 代表 Type是最常见的泛型类型参数名。
function identityT(arg: T): T {return arg;
}K, V: 用于表示键Key和值Value的泛型类型参数。
interface KeyValuePairK, V {key: K;value: V;
}E: 用于表示数组元素的泛型类型参数。
function printArrayE(arr: E[]): void {arr.forEach(item console.log(item));
}R: 用于表示函数返回值的泛型类型参数。
function getResultR(value: R): R {return value;
}U, V: 通常用于表示第二、第三个泛型类型参数。
function combineU, V(first: U, second: V): string {return ${first} ${second};
}泛型函数Generic Functions
function identityT(arg: T): T {return arg;
}// 使用泛型函数
let result identitystring(Hello);
console.log(result); // 输出: Hellolet numberResult identitynumber(42);
console.log(numberResult); // 输出: 42泛型接口Generic Interfaces
// 基本语法
interface PairT, U {first: T;second: U;
}// 使用泛型接口
let pair: Pairstring, number { first: hello, second: 42 };
console.log(pair); // 输出: { first: hello, second: 42 }泛型类Generic Classes
// 基本语法
class BoxT {private value: T;constructor(value: T) {this.value value;}getValue(): T {return this.value;}
}// 使用泛型类
let stringBox new Boxstring(TypeScript);
console.log(stringBox.getValue()); // 输出: TypeScript泛型约束Generic Constraints
// 基本语法
interface Lengthwise {length: number;
}function logLengthT extends Lengthwise(arg: T): void {console.log(arg.length);
}// 正确的使用
logLength(hello); // 输出: 5// 错误的使用因为数字没有 length 属性
logLength(42); // 错误泛型与默认值
// 基本语法
function defaultValueT string(arg: T): T {return arg;
}// 使用带默认值的泛型函数
let result1 defaultValue(hello); // 推断为 string 类型
let result2 defaultValue(42); // 推断为 number 类型TypeScript命名空间
以下实例演示了命名空间的使用定义在不同文件中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());嵌套命名空间
Invoice.ts 文件代码
namespace Runoob { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } }
}InvoiceTest.ts 文件代码
/// reference path Invoice.ts /
var invoice new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));TypeScript模块
IShape.ts 文件代码
/// reference path IShape.ts /
export interface IShape { draw();
}Circle.ts 文件代码
import shape require(./IShape);
export class Circle implements shape.IShape { public draw() { console.log(Cirlce is drawn (external module)); }
}Triangle.ts 文件代码
import shape require(./IShape);
export class Triangle implements shape.IShape { public draw() { console.log(Triangle is drawn (external module)); }
}TestShape.ts 文件代码
import shape require(./IShape);
import circle require(./Circle);
import triangle require(./Triangle); function drawAllShapes(shapeToDraw: shape.IShape) {shapeToDraw.draw();
} drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());TypeScript声明文件
TypeScript测验
