引入
Typescript 官网地址: https://www.typescriptlang.org/zh/
近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。
案例 Typescript中尽量不使用var声明变量
// 如果使用var声明变量i，则从声明之处开始直到永远
// 如果使用let声明变量i，i只会在for循环中有效
function doSomething(){
for(let i=0;i<10;i++){
console.log(i);
}
console.log(i); // 如果用let声明i，则此句有错。
}
// 调用函数
doSomething()
执行：
先将ts文件编译成一个js文件，然后再用node执行
tsc demo1.ts
node demo1.js
一、基本概念
TypeScript 是JavaScript 的一个超集，支持 ECMAScript 6 标准（ES6 教程）。
TypeScript 由微软开发的自由和开源的编程语言
TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。
二、TypeScript 入门案例
1、创建一个纯Typescript、Vue项目
npm init vue@latest ts-demos
2、安装 TypeScript
如果创建项目的时候没有同意使用TypeScript，可以自己安装
cd ts-demos
npm config set registry https://registry.npmmirror.com
npm install -g typescript
tsc -v
3、src下新建一个demo1.ts
// 定义一个string类型的变量msg，并为其赋值
var msg:string = "Hello World"
// 输出变量值
console.log(msg)
4、执行以下命令将 TypeScript 转换为 JavaScript 代码
tsc demo1.ts
5、使用 node 命令来执行 demo1.ts 文件：
node demo1.js
三、TypeScript 保留关键字
break as catch switch case if throw else var number string get module type instanceof typeof public private enum export finally for while void null super this new in return true false any extends static let package implements interface function do try yield const continue
四、TypeScript 基础类型
1、任意类型 any
声明为 any 的变量可以赋予任意类型的值。
let x: any = 1; // 数字类型
x = 'Hello everyone！'; // 字符串类型
x = false; // 布尔类型
2、数字类型 number
双精度 64 位浮点值，表示整数、分数、小数、正数、负数等所有数字类型。
// 定义一个string类型的变量msg，并为其赋值
var msg:string = "Hello World"
// 输出变量值
console.log(msg)
// 数字类型
let b: number = 0b110; // 二进制
let o: number = 0o13; // 八进制
let d: number = 33; // 十进制
let h: number = 0x00a; // 十六进制
console.log(b)
console.log(o)
console.log(d)
console.log(h)
3、字符串类型 string
一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式，可以创建字符串模板。
let userName: string = "Dudu";
let years: number = 6;
let words: string = `今天是 ${ userName } ${ years + 1}岁生日`;
console.log(words)
4、布尔类型 boolean
表示逻辑值：true 和 false。
let flag: boolean = true;
console.log(flag)
如果不指明类型，就指任意类型，如：
function add(a, b){
return a + b;
}
console.log(add(3, 5))
console.log(add("3", "5"))
有时候，如果没定义类型，会发生上面的问题，不容易找到错误的地方，所以必须指明数据类型，程序改造如下：
function add(a:number, b:number){
return a + b;
}
console.log(add(3, 5))
这时，参数只接受数字类型了。
5、数组类型
（1）声明变量为数组。
// 声明数组在元素类型后面加上[]
let arrScores: number[] = [99, 86, 73, 66, 88];
console.log(arrScores)
// 使用数组泛型
let arrNames: Array<string> = ["Kate", "Marry", "John", "Dudu"];
console.log(arrNames)
// 不使用类型声明数组
let list1 = [1, 2, 3, 4, 5]
// 数组元素类型可不同
let list2 = [1, "hello"]
// 声明数组可以使用任何数据类型
let list3: any[] = [1, "hi", true]
（2）数组迭代
我们可以使用 for 语句来循环输出数组的各个元素：
let i:any;
let sites:string[] = ["gengdan.cn","baidu.com","sohu.com","sina.com"]
for(i in sites) {
console.log(sites[i])
}
运行结果：
gengdan.cn
baidu.com
sohu.com
sina.com
（3）二维数组
二维数组的遍历
var multi:number[][] = [[1,2,3],[23,24,25]]
for(var i = 0;i < multi.length;i++) {
for(var j=0;j < multi[i].length;j++) {
console.log(multi[i][j])
}
}
运行结果：
1
2
3
23
24
25
生成二维数组并输出
var arr:string[][] = [];
for (var i = 0; i < 3; i++) {
arr[i] = [];
for (var j = 0; j < 4; j++) {
arr[i][j] = String.fromCharCode(i+65) +j;
}
}
console.log(arr);
运行结果：
[
[ ‘A0’, ‘A1’, ‘A2’, ‘A3’ ],
[ ‘B0’, ‘B1’, ‘B2’, ‘B3’ ],
[ ‘C0’, ‘C1’, ‘C2’, ‘C3’ ]
]
定义 “学生 “类型，其属性包括学生的学号、姓名和入学年份，并使用Student类型定义二维数组，作为函数返回值类型
type Student = {
sno: string;
sname: string;
year: number;
};
function getStudentMatrix(): Student[][] {
const stuMatrix: Student[][] = [
[
{ sno: '220101', sname: '小明', year: 2022 },
{ sno: '230102', sname: '小丽', year: 2023 }
],[
{ sno: '220223', sname: '小红', year: 2022 },
{ sno: '220325', sname: '小福', year: 2022 }
]
];
return stuMatrix;
}
console.log(getStudentMatrix());
运行结果：
[
[
{ sno: ‘220101’, sname: ‘小明’, year: 2022 },
{ sno: ‘230102’, sname: ‘小丽’, year: 2023 }
],
[
{ sno: ‘220223’, sname: ‘小红’, year: 2022 },
{ sno: ‘220325’, sname: ‘小福’, year: 2022 }
]
]
（4）数组方法
- concat()：连接两个或更多的数组，并返回结果。
var arr1 = ["a", "b", "c"];
var arr2 = ["1", "2", "3"];
var arr3 = arr1.concat(arr2);
console.log("arr3 : " + arr3 ); // arr3 : a,b,c,1,2,3
- every()：检测数值元素的每个元素是否都符合条件。
function isBigEnough(element:number, index:number, array:number[]) {
return (element >= 60);
}
var scrores = [52, 66, 80, 73, 92]
var passed:boolean = scrores.every(isBigEnough);
console.log("是否全部及格: " + passed ); // false
- filter()：检测数值元素，并返回符合条件所有元素的数组。
function isBigEnough(element:number, index:number, array:number[]) {
return (element >= 60);
}
var scrores = [52, 66, 80, 73, 92]
var passedScores = scrores.filter(isBigEnough);
console.log("及格成绩为: " + passedScores ); // 66, 80, 73, 92
- forEach()：数组每个元素都执行一次回调函数。
let nameList = ["小明", "小红", "小丽"];
nameList.forEach(function (value) {
console.log("欢迎您" + value);
});
- indexOf()：搜索数组中的元素，并返回它所在的位置。
var index = ["春", "夏", "秋", "冬"].indexOf("秋");
console.log("index is : " + index ); // 2
- join()：把数组的所有元素放入一个字符串。
var arr = new Array("小明","小红","小丽");
var str = arr.join();
console.log("str : " + str ); // str : 小明,小红,小丽
var str = arr.join(", ");
console.log("str : " + str ); // str : 小明, 小红, 小丽
var str = arr.join(" + ");
console.log("str : " + str ); // str : 小明 + 小红 + 小丽
- lastIndexOf()：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
var index = [11, 22, 55, 44, 33].lastIndexOf(44);
console.log("index is : " + index ); // index is : 3
- map()：通过指定函数处理数组的每个元素，并返回处理后的数组。
var numbers = [1, 9, 25];
var roots = numbers.map(Math.sqrt);
console.log("roots is : " + roots ); // roots is : 1,3,5
- pop()：删除数组的最后一个元素并返回删除的元素。
var numbers = [1, 9, 25];
var element = numbers.pop();
console.log("element is : " + element ); // element is : 25
var element = numbers.pop();
console.log("element is : " + element ); // element is : 9
- push()：向数组的末尾添加一个或更多元素，并返回新的长度。
var arr1 = new Array(11, 22, 33);
var length = arr1.push(44);
console.log("new array is : " + arr1 ); // new array is : 11,22,33,44
length = arr1.push(55);
console.log("new array is : " + arr1 ); // new array is : 11,22,33,44,55
- reduce()：将数组元素计算为一个值（从左到右）。
var total = [1, 3, 5, 6].reduce(function(a, b){ return a + b; });
console.log("total is : " + total ); // total is : 15
- reduceRight()：将数组元素计算为一个值（从右到左）。
var total = [1, 3, 5, 6].reduceRight(function(a, b){ return a - b; });
console.log("total is : " + total ); // total is : -3
- reverse()：反转数组的元素顺序。
var arr = [0, 1, 2, 3].reverse();
console.log("Reversed array is : " + arr ); // Reversed array is : 3,2,1,0
- shift()：删除并返回数组的第一个元素。
var arr = [11, 22, 33, 44].shift();
console.log("Shifted value is : " + arr ); // Shifted value is : 11
- slice()：选取数组的的一部分，并返回一个新数组。
var arr:string[] = ["red", "green", "blue", "pink", "purple", "orange"];
console.log("arr.slice( 2, 5) : " + arr.slice( 2, 5) ); // arr.slice( 2, 5) : blue,pink,purple
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) ); // arr.slice( 1, 3) : green,blue
- some()：检测数组元素中是否有元素符合指定条件。
function isBigEnough(element:number, index:number, array:number[]) {
return (element >= 60);
}
var retval = [80, 95, 88, 61, 75].some(isBigEnough);
console.log("Returned value is : " + retval ); // true
var retval = [55, 32, 5, 32, 44].some(isBigEnough);
console.log("Returned value is : " + retval ); // false
- sort()：对数组的元素进行排序。
var arrNames = new Array("Kate", "Julia", "Marry", "John");
var sorted = arrNames.sort();
console.log("Returned string is : " + sorted ); // Returned string is : John,Julia,Kate,Marry
- splice()：从数组中添加或删除元素。
var arr = ["red", "green", "blue", "pink", "purple", "orange"];
var removed = arr.splice(2, 0, "black");
// 添加后: red,green,black,blue,pink,purple,orange
console.log("添加后的数组: " + arr );
console.log("删除了: " + removed);
removed = arr.splice(3, 1);
// 删除后的数组: red,green,black,pink,purple,orange
console.log("删除后的数组: " + arr );
console.log("删除了: " + removed); // 删除了: blue
- toString()：把数组转换为字符串，并返回结果。
var arr = new Array("red", "green", "blue", "pink", "purple", "orange");
var str = arr.toString();
// 结果为: red,green,blue,pink,purple,orange
console.log("结果为: " + str );
- unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
var arr = new Array("red", "green", "blue", "pink", "purple", "orange");
var length = arr.unshift("white");
// 数组为: white,red,green,blue,pink,purple,orange
console.log("数组为: " + arr );
// 数组长度为: 7
console.log("数组长度为: " + length );
6、元组
元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
let x: [string, number, number];
x = ['Kate', 100, 32.5]; // 运行正常
let y = [1, 'John'];
console.log(x[0]); // 输出Kate
console.log(y[1]); // 输出John
7、枚举 enum
枚举类型用于定义数值集合。
enum Color {Red, Green, Blue};
let c1: Color = Color.Blue;
let c2: Color = Color.Red;
console.log(c1); // 输出 2
console.log(c2); // 输出 0
8、void
用于标识方法返回值的类型，表示该方法没有返回值。
function speak(): void {
console.log("Hello ts!!!");
}
speak()
9、null
表示对象值缺失
10、undefined
用于初始化变量为一个未定义的值
11、never
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：
五、TypeScript 变量声明
1、TypeScript 变量的命名规则：
变量名称可以包含数字和字母。
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头。
2、声明变量的类型及初始值
var [变量名] : [类型] = 值;
var uname:string = "Dudu";
声明变量的类型，但没有初始值，变量值会设置为 undefined：
var [变量名] : [类型];
var uname:string;
声明变量并初始值，但不设置类型，该变量可以是任意类型：
var [变量名] = 值;
明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：
var [变量名];
var uname;
3、类型断言（Type Assertion）
类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。
语法格式：
<类型>值
或：
值 as 类型
例：
var str1 = 'Hello' //str1是 string 类型
//将str1赋值给数字类型str2，str2也是string类型
var str2: number = <number><any>str1
console.log(str2)
编译后：
var str1 = 'Hello'; //str1是 string 类型
var str2 = str1; //将str1赋值给数字类型str2，str2也是string类型
console.log(str2);
4、类型推断
当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。
5、变量作用域
变量作用域指定了变量定义的位置，程序中变量的可用性由变量作用域决定。
TypeScript 有以下几种作用域：
（1）全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
（2）类作用域 − 这个变量也可以称为字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
（3）局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。
六、TypeScript 运算符
TypeScript 主要包含以下几种运算：
1、算术运算符
（1）+ 加法
（2）- 减法
（3）* 乘法
（4）/ 除法
（5）% 取模（余数）
（6）++ 自增
（7）– 自减
2、逻辑运算符
（1）&& and，与
需同时满足&&连接的所有条件
（2）|| or，或
只需满足 || 连接的条件之一
（3）! not，非
需与！后列出条件相反
3、关系运算符
（1）== 等于
（2）!= 不等于
（3）> 大于
（4）< 小于
（5）>= 大于或等于
（6）<= 小于或等于
4、按位运算符
（1）& AND
按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。
（2）l OR
按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。
（3）~ 取反
取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。
（4）^ 异或
按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。
（5）<< 左移
把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。
（6）>> 右移
把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。
（7）>>> 无符号右移
与有符号右移位类似，除了左边一律使用0 补位。
5、赋值运算符
（1）= 赋值
（2）+= 先进行加运算后赋值
（3）-= 先进行减运算后赋值
（4）*= 先进行乘运算后赋值
（5）/= 先进行除运算后赋值
6、三元/条件运算符
条件表达式 ? expr1 : expr2
7、字符串运算符
连接运算符 (+)，运算符可以拼接两个字符串
8、类型运算符
typeof 运算符是一元运算符，返回操作数的数据类型
七、TypeScript 条件语句
在 TypeScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
1、if 语句
语法格式如下所示：
if(boolean_expression){
# 在布尔表达式 boolean_expression 为 true 执行
}
2、if…else 语句
语法格式如下所示：
if(boolean_expression){
# 在布尔表达式 boolean_expression 为 true 执行
}else{
# 在布尔表达式 boolean_expression 为 false 执行
}
3、if…else if…else 语句
语法格式如下所示：
if(boolean_expression 1) {
# 在布尔表达式 boolean_expression 1 为 true 执行
} else if( boolean_expression 2) {
# 在布尔表达式 boolean_expression 2 为 true 执行
} else if( boolean_expression 3) {
# 在布尔表达式 boolean_expression 3 为 true 执行
} else {
# 布尔表达式的条件都为 false 时执行
}
4、switch…case 语句
switch 语句的语法：
switch(expression){
case constant-expression :
statement(s);
break;
case constant-expression :
statement(s);
break
// 可以有任意数量的 case 语句
default :
statement(s);
}
5、 猜数字游戏案例
var n = 5
var guess: number = Math.floor(Math.random() * 10 + 1)
if (guess > n) {
console.log("您猜大了！")
}else if(guess < n){
console.log("您猜小了！")
}else{
console.log("您猜对了！")
}
console.log("n:", n)
console.log("guess:", guess)
6、switch语句案例
let score:number = 40;
switch (score/10) {
case 10:
case 9: {
console.log("优");
break;
}
case 8: {
console.log("良");
break;
}
case 7: {
console.log("中等");
break;
}
case 6: {
console.log("及格");
break;
}
default: {
console.log("不及格");
break;
}
}
八、TypeScript 循环
1、for 循环
TypeScript for 循环用于多次执行一个语句序列，简化管理循环变量的代码。
（1）语法格式如下所示
for ( init; condition; increment ){
statement(s);
}
（2）for循环案例（求阶乘）
// 求n的阶乘
var n: number = 5;
var i: number;
var f = 1;
for (i = n; i >= 1; i--) {
f *= i;
}
console.log(f)
2、for…in 循环
for…in 语句用于一组值的集合或列表进行迭代输出。
（1）语法格式如下所示
for (var val in list) {
//语句
}
（2）实例
var i:any;
var names:any = ["John", "Dudu", "Kate"]
for(i in names) {
console.log("你好", names[i])
}
var letter:any = "Hello"
for(i in letter){
console.log(letter[i])
}
3、for…of 循环
可以遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。
let arr = [33, "dudu", true, 3.33];
for (let a of arr) {
console.log(a);
}
4、forEach 循环
let arr = [33, "dudu", true, 3.33];
arr.forEach((val, index, arr) => {
// val: 当前值
// idx：当前index
// arr: Array
console.log(index, val)
});
5、every 循环
let arr = [33, "dudu", true, 3.33];
arr.every((val, index, array) => {
// val: 当前值
// index：当前index
// array: Array
console.log(index, val, array)
return true; // Continues
// 如果Return false 则直接退出，请尝试一下
});
6、while 循环
（1）语法格式如下所示：
while(condition)
{
statement(s);
}
（2）while循环案例（求阶乘）
var n: number = 5;
var f: number = 1;
var m = n;
while (n >= 1) {
f = f * n;
n--;
}
console.log(m + " 的阶乘为：" + f);
7、do…while 循环
（1）语法格式如下所示：
do
{
statement(s);
}while( condition );
（2）do…while循环案例（求阶乘）
var n: number = 5;
var f: number = 1;
var m = n;
do {
f = f * n;
n--;
}while (n >= 1);
console.log(m + " 的阶乘为：" + f);
8、break 语句
break 语句有以下两种用法：
当 break 语句出现在一个循环内时，循环会立即终止，且程序流将继续执行紧接着循环的下一条语句。
它可用于终止 switch 语句中的一个 case。
如果您使用的是嵌套循环（即一个循环内嵌套另一个循环），break 语句会停止执行最内层的循环，然后开始执行该块之后的下一行代码。
（1）语法格式如下所示
break;
（2）案例
// 找出在 1~100 之间最后一个被 3 整除的数为：
var i: number = 100
while (i >= 0) {
if (i % 3 == 0) {
console.log(i)
break
}
i--
}
9、continue 语句
continue 语句有点像 break 语句。但它不是强制终止，continue 会跳过当前循环中的代码，强迫开始下一次循环。
对于 for 循环，continue 语句执行后自增语句仍然会执行。对于 while 和 do…while 循环，continue 语句重新执行条件判断语句。
（1）语法格式如下所示
continue;
（2）案例
// 输出 1~10 之间不能被 3 整除的整数
var i: number = 10
for (i = 1; i <= 10; i++) {
if (i % 3 == 0){
continue;
}
console.log(i)
}
10、无限循环
（1）for 创建无限循环语法格式
for(;;) {
// 语句
}
（2）while 创建无限循环语法格式
while(true) {
// 语句
}
九、TypeScript 函数
1、函数的使用方法
（1）声明语法格式如下所示：
function function_name()
{
// 执行代码
}
（2）调用语法格式如下所示：
function_name()
（3）案例
function printStar() {
console.log("**********")
}
printStar()
2、函数返回值
（1）语法格式如下所示：
function function_name():return_type {
// 语句
return value;
}
（2）案例
function getStar():string {
return "**********"
}
function printStar(){
console.log(getStar())
}
printStar()
3、带参数函数
（1）语法格式如下所示：
function func_name( param1 [:datatype], param2 [:datatype]) {
}
（2）案例
function add(x: number, y: number): number {
return x + y;
}
console.log(add(3,6))
（3）可选参数
function getName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let name1 = getName("Dudu");
console.log(name1)
let name2 = getName("Dudu", "Lv");
console.log(name2)
（4）默认参数
语法格式为：
function function_name(param1[:type],param2[:type] = default_value) {
}
案例：
function serverInfo(ip:string,port:number = 80) {
console.log("ip: ",ip, ",port:", port);
}
serverInfo("192.168.3.20") // 没有赋值，取默认值
serverInfo("192.168.3.20", 8088)
（5）剩余参数
剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。
TypeScript
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
案例
function sum(a: number, ...b: number[]) {
let s: number = a
for (var i = 0; i < b.length; i++) {
s = s + b[i]
}
return s
}
console.log(sum(3))
console.log(sum(3, 2))
console.log(sum(1, 2, 3, 4))
4、匿名函数
语法格式如下：
var res = function( [arguments] ) { ... }
案例：
var msg = function() {
return "hello";
}
var sum = function(a:number, b:number){
return a + b
}
console.log(msg())
console.log(sum(3, 6))
5、构造函数
（1）语法格式如下：
var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)
（2）案例
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);
6、递归函数
使用递归求 n!
function f(n: number): number {
if (n == 1) {
return 1;
} else {
return (n * f(n - 1));
}
};
console.log(f(5)); // 输出120
7、Lambda 函数
（1）函数只有一行语句：
( [param1, parma2,…param n] )=>statement;
（2）案例：
var sum = (x: number, y: number) => x + y
console.log(sum(100, 200)) //输出结果为 300
8、函数重载
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。
function display(s1:string):void;
function display(n1:number,s1:string):void;
function display(x:any,y?:any):void {
console.log(x);
console.log(y);
}
display("hello")
display(1,"world");
输出结果为：
十、Array(数组)
1、TypeScript 声明数组的语法格式如下所示
var array_name[:datatype]; //声明
array_name = [val1,val2,valn..] //初始化
2、案例
var webSites: string[]
webSites = ["Baidu", "JingDong", "Taobao"]
for (var i = 0; i < webSites.length; i++) {
console.log(webSites[i])
}
3、使用 Array 对象创建数组
var arr: number[] = new Array(4)
for (var i = 0; i < arr.length; i++) {
arr[i] = i * 2 + 1
console.log(arr[i])
}
4、迭代数组
var arr: number[] = new Array(4)
for (var j in arr) {
console.log(arr[j])
}
5、多维数组
最简单的多维数组是二维数组，定义方式如下：
var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
var multi: number[][] = [[11, 22, 33], [44, 55, 66]]
// 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])
// for (var i in multi) {
// for (var j in multi[i]) {
// console.log(multi[i][j])
// }
// }
for (var i = 0; i < multi.length; i++) {
for (var j = 0; j < multi[i].length; j++) {
console.log(multi[i][j])
}
}
6、数组相关方法
var s1 = ["a", "b", "c"];
var s2 = ["1", "2"];
// concat()连接两个或更多的数组，并返回结果
var s3 = s1.concat(s2);
console.log("连接后 : " + s3); // a,b,c,1,2
// every()检测数值元素的每个元素是否都符合条件
function isBigEnough(element, index, array) {
return (element >= 10); // 检测是否每个元素均大于10
}
var passed = [22, 33, 3, 6, 55].every(isBigEnough);
console.log("是否全部元素都大于10: " + passed); // false
// filter()检测数值元素，并返回符合条件所有元素的数组
var arr = [22, 33, 3, 6, 55].filter(isBigEnough);
console.log("大于10的元素为：: " + arr); // 22,33,55
// forEach()数组每个元素都执行一次回调函数
let num = [7, 8, 9];
num.forEach(function (value) {
console.log(value + 1); // 8 9 10
});
// indexOf()搜索数组中的元素，并返回它所在的位置
// 如果搜索不到，返回值 -1，代表没有此项
var i = [22, 33, 3, 6, 55].indexOf(3);
var j = [22, 33, 3, 6, 55].indexOf(333);
console.log("index is : " + i); // 2
console.log("index is : " + j); // -1
// join()把数组的所有元素放入一个字符串
var arr1 = new Array("Dudu", "Kate", "John");
var str1 = arr1.join();
console.log("str1 : " + str1); // str1 : Dudu,Kate,John
var str1 = arr1.join(':');
console.log("str1 : " + str1); // str1 : Dudu:Kate:John
// lastIndexOf()返回一个指定的字符串值最后出现的位置，
// 在一个字符串中的指定位置从后向前搜索
var index = [22, 3, 3, 6, 55].lastIndexOf(3);
console.log("index is : " + index); // 2
// map()通过指定函数处理数组的每个元素，并返回处理后的数组
var numbers = [4, 9, 16];
var roots = numbers.map(Math.sqrt);
console.log("roots is : " + roots); // roots is : 2,3,4
// pop()删除数组的最后一个元素并返回删除的元素
var numbers = [1, 2, 3, 3, 4, 5, 6];
var element = numbers.pop();
console.log("删除的元素为: " + element); // 6
var element = numbers.pop();
console.log("删除的元素为: : " + element); // 5
// push()向数组的末尾添加一个或更多元素，并返回新的长度
var numbers = new Array(1, 2, 3);
var length = numbers.push(66);
console.log("数组变成: " + numbers); // 数组变成: 1,2,3,66
length = numbers.push(88);
console.log("数组变成: " + numbers); // 数组变成: 1,2,3,66,88
// reduce()将数组元素计算为一个值（从左到右）
var total = [1, 2, 3, 4].reduce(function (a, b) { return a * b; });
console.log("数组元素的乘积为: " + total); // 数组元素的乘积为: 24
// reduceRight()将数组元素计算为一个值（从右到左）
var total = [1, 2, 3, 4].reduceRight(function (a, b) { return a - b; });
console.log("数组元素的差为: " + total); // -2
// reverse()反转数组的元素顺序
var arr = [1, 2, 3, 4].reverse();
console.log("反转数组元素为: " + arr); // 反转数组元素为: 4,3,2,1
// shift()删除并返回数组的第一个元素
var arr2 = [1, 2, 3, 4].shift();
console.log("删除并返回数组的第一个元素是: " + arr2); // 删除并返回数组的第一个元素是: 1
// slice()选取数组的的一部分，并返回一个新数组
var arr3 = ["a", "b", "c", "d", "e"];
console.log("arr3.slice( 1, 2) : " + arr3.slice(1, 2)); // b
console.log("arr3.slice( 1, 3) : " + arr3.slice(1, 3)); // b,c
// some()检测数组元素中是否有元素符合指定条件
function isEven(element, index, array) {
return (element % 2 == 0); // 判断是否是偶数
}
var r = [1, 2, 3, 4, 5].some(isEven);
console.log("是否包含偶数: " + r); // true
r = [1, 3, 5, 7, 9].some(isEven);
console.log("是否包含偶数: " + r); // false
// sort()对数组的元素进行排序
var arr3 = new Array("a", "c", "d", "b");
var sorted = arr3.sort();
console.log("正序: " + sorted); // 正序: a,b,c,d
sorted = sorted.reverse()
console.log("逆序: " + sorted); // 逆序: d,c,b,a
// splice()从数组中添加或删除元素
var arr4 = ["a", "b", "c", "d", "f"];
var removed = arr4.splice(2, 0, "flower");
console.log("第2个位置添加1个元素后:" + arr4); // 第2个位置添加1个元素后:a,b,flower,c,d,f
console.log("删除的元素为： " + removed); // 删除的元素为：
removed = arr4.splice(3, 1);
console.log("删除第3个位置1元素后: " + arr4 ); // 删除第3个位置1元素后: a,b,flower,d,f
console.log("删除的元素为: " + removed); // 删除的元素为: c
// toString()把数组转换为字符串，并返回结果
var arr5 = new Array("hello", "a", "b", "c");
var str5 = arr5.toString();
console.log("字符串是: " + str5 ); // 字符串是: hello,a,b,c
// unshift()向数组的开头添加一个或更多元素，并返回新的长度
var arr6 = new Array("hello", "a", "b", "c");
var length = arr6.unshift("flower");
console.log("数组: " + arr6 ); // 数组: flower,hello,a,b,c
console.log("数组长度: " + length ); // 5
十一、对象Object
const person = {
name: "Julia",
age: 18
}
console.log(person.name)
十二、接口
// 接口Interface
interface Point {
x: number,
y: number
}
let drawPoint = (point: Point) => {
console.log("点的坐标：", point.x, point.y)
}
let getDistances = (a: Point, b: Point) => {
return Math.sqrt((Math.pow(a.x-b.x, 2)+Math.pow(a.y-b.y, 2)));
}
let a = { x: 103, y: 33 }
let b = { x: 90, y: 100 }
drawPoint(a)
drawPoint(b)
console.log("两点间的距离：", getDistances(a, b))
输出结果：
点的坐标： 103 33
点的坐标： 90 100
两点间的距离： 68.24954212300622
十三、Class
interface IPoint {
x: number;
y: number;
drawPoint: () => void;
getDistances: (p: IPoint) => number;
}
class Point implements IPoint {
x: number;
y: number;
// 构造函数，参数名后加?表示可选参数
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
drawPoint = () => {
console.log("x:", this.x, "y:", this.y);
}
// 当前点到点p之间的距离
getDistances = (p: IPoint) => {
return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
}
}
// 构造一个类Point的对象point
const point = new Point(1, 2)
point.drawPoint()
const p = new Point(3, 4)
console.log(point.getDistances(p))
运行结果：
x: 1 y: 2
8
上面的类还可以简写，成员变量在构造函数中直接定义：
number;
drawPoint: () => void;
getDistances: (p: IPoint) => number;
}
class Point implements IPoint {
// x: number;
// y: number;
// 构造函数，参数名后加?表示可选参数
constructor(public x: number, public y: number) {
this.x = x;
this.y = y;
}
drawPoint = () => {
console.log("x:", this.x, "y:", this.y);
}
// 当前点到点p之间的距离
getDistances = (p: IPoint) => {
return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
}
}
十四、访问修饰符
public, private, protected
public 公共的，接口中定义的属性和方法都是公共的，没有写访问修饰符默认是public的。
private 私有的，只在类的内部可以访问
protected 受保护的。
案例：定义私有变量（方法太复杂，直接使用下个案例的懒人包）
interface IPoint {
drawPoint: () => void;
getDistances: (p: IPoint) => number;
getX: () => number;
getY: () => number;
setX: (x: number) => void;
setY: (y: number) => void;
}
class Point implements IPoint {
// x: number;
// y: number;
// 构造函数，参数名后加?表示可选参数
constructor(private x: number, private y: number) {
this.x = x;
this.y = y;
}
drawPoint = () => {
console.log("x:", this.x, "y:", this.y);
}
// 当前点到点p之间的距离
getDistances = (p: IPoint) => {
return Math.pow(p.getX() - this.getX(), 2) + Math.pow(p.getY() - this.getY(), 2)
}
setX = (value: number) => {
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.x = value;
}
getX = (): number => {
return this.x;
}
setY = (value: number) => {
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.y = value;
}
getY = (): number => {
return this.y;
}
}
// 构造一个类Point的对象point
const point = new Point(1, 2)
point.drawPoint()
案例：定义私有变量（懒人包)
interface IPoint {
drawPoint: () => void;
getDistances: (p: IPoint) => number;
// getX: () => number;
// getY: () => number;
// setX: (x: number) => void;
// setY: (y: number) => void;
X:number;
Y:number;
}
class Point implements IPoint {
// x: number;
// y: number;
// 构造函数，参数名后加?表示可选参数
constructor(private x: number, private y: number) {
}
drawPoint = () => {
console.log("x:", this.x, "y:", this.y);
}
// 当前点到点p之间的距离
getDistances = (p: IPoint) => {
return Math.pow(p.X - this.X, 2) + Math.pow(p.Y - this.Y, 2)
}
set X(value: number) {
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.x = value;
}
get X(): number {
return this.x;
}
set Y(value: number){
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.y = value;
}
get Y(): number {
return this.y;
}
}
// 构造一个类Point的对象point
const point = new Point(1, 2)
point.X = 3
point.Y = 4
point.drawPoint()
运行结果：
x: 3 y: 4
遇到的问题及解决办法
问题：Accessors are only available when targeting ECMAScript 5 and higher.
解决：
tsc demo.ts -t es5
十五、Moudle模块
1、新建一个point.ts（一个文件可以理解成一个moudle）
注意：在类名称前加export，才可以在其他模块中使用
interface IPoint {
drawPoint: () => void;
getDistances: (p: IPoint) => number;
X:number;
Y:number;
}
// 在类名称前加export，才可以在其他模块中使用
export class Point implements IPoint {
// 构造函数，参数名后加?表示可选参数
constructor(private x: number, private y: number) {
}
drawPoint = () => {
console.log("x:", this.x, "y:", this.y);
}
// 当前点到点p之间的距离
getDistances = (p: IPoint) => {
return Math.pow(p.X - this.X, 2) + Math.pow(p.Y - this.Y, 2)
}
set X(value: number) {
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.x = value;
}
get X(): number {
return this.x;
}
set Y(value: number){
if (value < 0) {
throw new Error("value must be greater than 0")
}
this.y = value;
}
get Y(): number {
return this.y;
}
}
2、在其他模块中使用point.ts中的类
// 引入point文件，import必须放到文件最开始
import { Point } from './point'
// 构造一个类Point的对象point
const point = new Point(1, 2)
point.X = 3
point.Y = 4
point.drawPoint()
3、运行
tsc point.ts -t es5
tsc demo1.ts -t es5
node demo1
运行结果：
x: 3 y: 4
十六、Generics泛型
<类型> 类型加上尖括号就是泛型
1、泛型案例
let list1: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let list2: Array<string> = ["a", "b", "c", "d", "e"]
// 函数的返回值和参数均是泛型，输入什么类型，返回值是什么类型
let lastInArray = <T>(arr:Array<T>) =>{
return arr[arr.length - 1]
}
const n = lastInArray(list1)
console.log(n)
const c = lastInArray(list2)
console.log(c)
运行结果：
10
e
2、泛型案例
// 定义一个函数makeTuple
let makeTuple = <T, Y>(x:T, y:Y) =>[x, y]
const v1 = makeTuple(1, "one")
const v2 = makeTuple<boolean, number>(true, 1)
console.log(v1)
console.log(v2)
运行结果：
[ 1, 'one' ]
[ true, 1 ]
扫一扫
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
