本文最后更新于：4 个月前

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript笔记

typeScript可以编译成纯JavaScript，是一种对JavaScript添加特性的语言扩展

基本语法

安装

可以直接使用npm进行安装

1 2	`npm config set registry https://registry.npmmirror.com #使用国内镜像 npm install -g typescript #安装typeScript`

之后便可以使用ts命令

1 2	`tsc app.ts #转换为JavaScript代码 node app.js #执行js文件`

基础语法

TypeScript会忽略程序中的空格、换行符和制表符，通常用它们来缩进代码
TypeScript区分大小写
和js一样分号是可选的，除非两行语句在同一行

注释和Java相同

```typescript
//单行注释
/*
多行注释
*/


+ 面向对象

**实例**

```typescript
class Site { 
   name():void { 
      console.log("Runoob") 
   } 
} 
var obj = new Site(); 
obj.name();

基础类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。`let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制`
字符串类型	string	一个字符系列，使用单引号（’）或双引号（“）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。`let name: string = “Runoob”; let years: number = 5; let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;`
布尔类型	boolean	表示逻辑值：true 和 false。`let flag: boolean = true;`
数组类型	无	声明变量为数组。`// 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array<number> = [1, 2];`
元组	无	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。`let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob`
枚举	enum	枚举类型用于定义数值集合。`enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2`
void	void	用于标识方法返回值的类型，表示该方法没有返回值。`function hello(): void { alert("Hello Runoob"); }`
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

Any类型

any类型的变量会随着值动态改变

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型
let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

Null和Undefined

null表示“什么都没有”，undefined表示以一个没有设置值的变量

let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

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 uname:string;
var uname = "Runoob";
var uname;

类型断言

手动指定一个值的类型，允许一个变量从一种类型更改为另一种类型，只是一个判断

1
2
3

var str = '1';
var str2 = str;  //str、str2 是 string 类型
console.log(str2);

类型推断

当类型没有给出时，TypeScript编译器会根据类型推断，赋予类型，下次赋值另一种类型则会报错

var num = 2;    // 类型推断为 number
console.log("num 变量的值为 "+num); 
num = "12";    // 编译错误
console.log(num);

变量作用域

全局作用域
类作用域
局部作用域

不用多说

运算符

感觉也没什么好说的，粘贴一下吧

算数运算符

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
–	自减	x=–y	4	4

关系运算符

运算符	描述	比较	返回值
==	等于	x==8	false
!=	不等于	x!=8	true
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

&&和||为短路运算符，只要前一个值得到结果则不执行后边

位运算符

运算符	描述	例子	类似于	结果	十进制
&	AND，按位与处理两个长度相同的二进制数，两个相应的二进位都为 1，该位的结果值才为 1，否则为 0。	x = 5 & 1	0101 & 0001	0001	1
\|	OR，按位或处理两个长度相同的二进制数，两个相应的二进位中只要有一个为 1，该位的结果值为 1。	x = 5 \| 1	0101 \| 0001	0101	5
~	取反，取反是一元运算符，对一个二进制数的每一位执行逻辑反操作。使数字 1 成为 0，0 成为 1。	x = ~ 5	~0101	1010	-6
^	异或，按位异或运算，对等长二进制模式按位或二进制数的每一位执行逻辑异按位或操作。操作的结果是如果某位不同则该位为 1，否则该位为 0。	x = 5 ^ 1	0101 ^ 0001	0100	4
<<	左移，把 << 左边的运算数的各二进位全部左移若干位，由 << 右边的数指定移动的位数，高位丢弃，低位补 0。	x = 5 << 1	0101 << 1	1010	10
>>	右移，把 >> 左边的运算数的各二进位全部右移若干位，>> 右边的数指定移动的位数。	x = 5 >> 1	0101 >> 1	0010	2
>>>	无符号右移，与有符号右移位类似，除了左边一律使用0 补位。	x = 2 >>> 1	0010 >>> 1	0001	1

赋值运算符

运算符	例子	实例	x 值
= (赋值)	x = y	x = y	x = 5
+= (先进行加运算后赋值)	x += y	x = x + y	x = 15
-= (先进行减运算后赋值)	x -= y	x = x - y	x = 5
*= (先进行乘运算后赋值)	x *= y	x = x * y	x = 50
/= (先进行除运算后赋值)	x /= y	x = x / y	x = 2

三元运算符

1	`Test ? expr1 : expr2`

类型运算符

typeof运算符，返回操作数据类型

1 2	`var num = 12 console.log(typeof num); //输出结果: number`

其他运算符

负号运算符(-)：改变操作数符号

字符串运算符：连接运算符(+)

流程控制

条件语句

其实TypeScript和Java差不了太多

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 时执行
}

switch语句

switch(expression){
    case constant-expression  :
       statement(s);
       break; /* 可选的 */
    case constant-expression  :
       statement(s);
       break; /* 可选的 */
  
    /* 您可以有任意数量的 case 语句 */
    default : /* 可选的 */
       statement(s);
}

循环

1
2
3

for ( init; condition; increment ){
    statement(s);
}

for-in循环

for (var val in list) { 
    //语句 
}
var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

val 需要为 string 或 any 类型。

for-of循环

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

forEach循环

let list = [4, 5, 6];
list.forEach((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
});

every循环

let list = [4, 5, 6];
list.every((val, idx, array) => {
    // val: 当前值
    // idx：当前index
    // array: Array
    return true; // Continues
    // Return false will quit the iteration
});

while循环

while(condition)
{
   statement(s);
}

do…while循环

do
{
   statement(s);
}while( condition );

break

循环会立即终止

continue

结束本次循环继续

函数

构造函数，调用函数

function test() {   // 函数定义
    console.log("调用函数") 
} 
test()              // 调用函数

函数返回

function function_name():return_type { 
    // 语句
    return value; 
}

return_type是返回值类型
return关键词后要跟着返回的结果
一般情况下，一个函数只有一个return语句
返回值类型需要和return_type一致

带参函数

function add(x: number, y: number): number {
    return x + y;
}
console.log(add(1,2))

可选参数

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");  // 正确

默认参数

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");

匿名函数

var msg = function() { 
    return "hello world";  
} 
console.log(msg())

函数自调用

在自调用函数后使用()即可。

(function () { 
    var x = "Hello!!";   
    console.log(x)     
 })()

构造函数，支持内置构造函数Function()来定义函数

1
2
3

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));      // 输出 720

Lambda函数

Lambda函数也称为箭头函数。

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

var foo = (x:number)=> {    
    x = 10 + x 
    console.log(x)  
} 
foo(100)

//单个参数括号可选
var display = x => { 
    console.log("输出为 "+x) 
} 
display(12)

函数重载

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");

Number

序号	属性 & 描述
1.	MAX_VALUE可表示的最大的数，MAX_VALUE 属性值接近于 1.79E+308。大于 MAX_VALUE 的值代表 “Infinity”。
2.	MIN_VALUE可表示的最小的数，即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE，MIN_VALUE 的值约为 5e-324。小于 MIN_VALUE (“underflow values”) 的值将会转换为 0。
3.	NaN非数字值（Not-A-Number）。
4.	NEGATIVE_INFINITY负无穷大，溢出时返回该值。该值小于 MIN_VALUE。
5.	POSITIVE_INFINITY正无穷大，溢出时返回该值。该值大于 MAX_VALUE。
6.	prototypeNumber 对象的静态属性。使您有能力向对象添加属性和方法。
7.	constructor返回对创建此对象的 Number 函数的引用。

NaN实例

var month = 0 
if( month<=0 || 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 = "admin@runoob.com" 
 
console.log("员工号: "+emp.id) 
console.log("员工姓名: "+emp.name) 
console.log("员工邮箱: "+emp.email)

序号	方法 & 描述	实例
1.	toExponential()把对象的值转换为指数计数法。	`//toExponential() var num1 = 1225.30 var val = num1.toExponential(); console.log(val) // 输出： 1.2253e+3`
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.234000`
3.	toLocaleString()把数字转换为字符串，使用本地数字格式顺序。	`var num = new Number(177.1234); console.log( num.toLocaleString()); // 输出：177.1234`
4.	toPrecision()把数字格式化为指定的长度。	`var num = new Number(7.123456); console.log(num.toPrecision()); // 输出：7.123456 console.log(num.toPrecision(1)); // 输出：7 console.log(num.toPrecision(2)); // 输出：7.1`
5.	toString()把数字转换为字符串，使用指定的基数。数字的基数是 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。	`var num = new Number(10); console.log(num.toString()); // 输出10进制：10 console.log(num.toString(2)); // 输出2进制：1010 console.log(num.toString(8)); // 输出8进制：12`
6.	valueOf()返回一个 Number 对象的原始数字值。	`var num = new Number(10); console.log(num.valueOf()); // 输出：10`

String

1	`var txt = "string";`

String的对象属性

序号	属性 & 描述	实例
1.	constructor对创建该对象的函数的引用。	`var str = new String( "This is string" ); console.log("str.constructor is:" + str.constructor)`输出结果：`str.constructor is:function String() { [native code] }`
2.	length返回字符串的长度。	`var uname = new String("Hello World") console.log("Length "+uname.length) // 输出 11`
3.	prototype允许您向对象添加属性和方法。	`function employee(id:number,name:string) { this.id = id this.name = name } var emp = new employee(123,"admin") employee.prototype.email="admin@runoob.com" // 添加属性 email console.log("员工号: "+emp.id) console.log("员工姓名: "+emp.name) console.log("员工邮箱: "+emp.email)`

String方法

序号	方法 & 描述	实例
1.	charAt()返回在指定位置的字符。	`var str = new String("RUNOOB"); console.log("str.charAt(0) 为:" + str.charAt(0)); // R console.log("str.charAt(1) 为:" + str.charAt(1)); // U console.log("str.charAt(2) 为:" + str.charAt(2)); // N console.log("str.charAt(3) 为:" + str.charAt(3)); // O console.log("str.charAt(4) 为:" + str.charAt(4)); // O console.log("str.charAt(5) 为:" + str.charAt(5)); // B`
2.	charCodeAt()返回在指定的位置的字符的 Unicode 编码。	`var str = new String("RUNOOB"); console.log("str.charCodeAt(0) 为:" + str.charCodeAt(0)); // 82 console.log("str.charCodeAt(1) 为:" + str.charCodeAt(1)); // 85 console.log("str.charCodeAt(2) 为:" + str.charCodeAt(2)); // 78 console.log("str.charCodeAt(3) 为:" + str.charCodeAt(3)); // 79 console.log("str.charCodeAt(4) 为:" + str.charCodeAt(4)); // 79 console.log("str.charCodeAt(5) 为:" + str.charCodeAt(5)); // 66`
3.	concat()连接两个或更多字符串，并返回新的字符串。	`var str1 = new String( "RUNOOB" ); var str2 = new String( "GOOGLE" ); var str3 = str1.concat( str2 ); console.log("str1 + str2 : "+str3) // RUNOOBGOOGLE`
4.	indexOf()返回某个指定的字符串值在字符串中首次出现的位置。	`var str1 = new String( "RUNOOB" ); var index = str1.indexOf( "OO" ); console.log("查找的字符串位置 :" + index ); // 3`
5.	lastIndexOf()从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。	`var str1 = new String( "This is string one and again string" ); var index = str1.lastIndexOf( "string" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 29 index = str1.lastIndexOf( "one" ); console.log("lastIndexOf 查找到的最后字符串位置 :" + index ); // 15`
6.	localeCompare()用本地特定的顺序来比较两个字符串。	`var str1 = new String( "This is beautiful string" ); var index = str1.localeCompare( "This is beautiful string"); console.log("localeCompare first :" + index ); // 0`
7.	match()查找找到一个或多个正则表达式的匹配。	`var str="The rain in SPAIN stays mainly in the plain"; var n=str.match(/ain/g); // ain,ain,ain`
8.	replace()替换与正则表达式匹配的子串	`var re = /(\w+)\s(\w+)/; var str = "zara ali"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); // ali, zara`
9.	search()检索与正则表达式相匹配的值	`var re = /apples/gi; var str = "Apples are round, and apples are juicy."; if (str.search(re) == -1 ) { console.log("Does not contain Apples" ); } else { console.log("Contains Apples" ); }`
10.	slice()提取字符串的片断，并在新的字符串中返回被提取的部分。
11.	split()把字符串分割为子字符串数组。	`var str = "Apples are round, and apples are juicy."; var splitted = str.split(" ", 3); console.log(splitted) // [ 'Apples', 'are', 'round,' ]`
12.	substr()从起始索引号提取字符串中指定数目的字符。
13.	substring()提取字符串中两个指定的索引号之间的字符。	`var str = "RUNOOB GOOGLE TAOBAO FACEBOOK"; console.log("(1,2): " + str.substring(1,2)); // U console.log("(0,10): " + str.substring(0, 10)); // RUNOOB GOO console.log("(5): " + str.substring(5)); // B GOOGLE TAOBAO FACEBOOK`
14.	toLocaleLowerCase()根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射。	`var str = "Runoob Google"; console.log(str.toLocaleLowerCase( )); // runoob google`
15.	toLocaleUpperCase()据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射。	`var str = "Runoob Google"; console.log(str.toLocaleUpperCase( )); // RUNOOB GOOGLE`
16.	toLowerCase()把字符串转换为小写。	`var str = "Runoob Google"; console.log(str.toLowerCase( )); // runoob google`
17.	toString()返回字符串。	`var str = "Runoob"; console.log(str.toString( )); // Runoob`
18.	toUpperCase()把字符串转换为大写。	`var str = "Runoob Google"; console.log(str.toUpperCase( )); // RUNOOB GOOGLE`
19.	valueOf()返回指定字符串对象的原始值。	`var str = new String("Runoob"); console.log(str.valueOf( )); // Runoob`

Array

1	`var numlist:number[] = [2,4,6,8]`

Array对象的构造函数：

表示数组大小的数值
初始化的数组列表，元素使用逗号分隔值

var arr_names:number[] = new Array(4)  
var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
for(var i = 0;i<sites.length;i++) { 
        console.log(sites[i]) 
}
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[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])

方法

序号	方法 & 描述	实例
1.	concat()连接两个或更多的数组，并返回结果。	`var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; var alphaNumeric = alpha.concat(numeric); console.log("alphaNumeric : " + alphaNumeric ); // a,b,c,1,2,3`
2.	every()检测数值元素的每个元素是否都符合条件。	`function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isBigEnough); console.log("Test Value : " + passed ); // false`
3.	filter()检测数值元素，并返回符合条件所有元素的数组。	`function isBigEnough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].filter(isBigEnough); console.log("Test Value : " + passed ); // 12,130,44`
4.	forEach()数组每个元素都执行一次回调函数。	`let num = [7, 8, 9]; num.forEach(function (value) { console.log(value); });` 编译成 JavaScript 代码：`var num = [7, 8, 9]; num.forEach(function (value) { console.log(value); // 7 8 9 });`
5.	indexOf()搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。	`var index = [12, 5, 8, 130, 44].indexOf(8); console.log("index is : " + index ); // 2`
6.	join()把数组的所有元素放入一个字符串。	`var arr = new Array("Google","Runoob","Taobao"); var str = arr.join(); console.log("str : " + str ); // Google,Runoob,Taobao var str = arr.join(", "); console.log("str : " + str ); // Google, Runoob, Taobao var str = arr.join(" + "); console.log("str : " + str ); // Google + Runoob + Taobao`
7.	lastIndexOf()返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。	`var index = [12, 5, 8, 130, 44].lastIndexOf(8); console.log("index is : " + index ); // 2`
8.	map()通过指定函数处理数组的每个元素，并返回处理后的数组。	`var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); console.log("roots is : " + roots ); // 1,2,3`
9.	pop()删除数组的最后一个元素并返回删除的元素。	`var numbers = [1, 4, 9]; var element = numbers.pop(); console.log("element is : " + element ); // 9 var element = numbers.pop(); console.log("element is : " + element ); // 4`
10.	push()向数组的末尾添加一个或更多元素，并返回新的长度。	`var numbers = new Array(1, 4, 9); var length = numbers.push(10); console.log("new numbers is : " + numbers ); // 1,4,9,10 length = numbers.push(20); console.log("new numbers is : " + numbers ); // 1,4,9,10,20`
11.	reduce()将数组元素计算为一个值（从左到右）。	`var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6`
12.	reduceRight()将数组元素计算为一个值（从右到左）。	`var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; }); console.log("total is : " + total ); // 6`
13.	reverse()反转数组的元素顺序。	`var arr = [0, 1, 2, 3].reverse(); console.log("Reversed array is : " + arr ); // 3,2,1,0`
14.	shift()删除并返回数组的第一个元素。	`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()检测数组元素中是否有元素符合指定条件。	`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()对数组的元素进行排序。	`var arr = new Array("orange", "mango", "banana", "sugar"); var sorted = arr.sort(); console.log("Returned string is : " + sorted ); // banana,mango,orange,sugar`
18.	splice()从数组中添加或删除元素。	`var arr = ["orange", "mango", "banana", "sugar", "tea"]; var removed = arr.splice(2, 0, "water"); console.log("After adding 1: " + arr ); // orange,mango,water,banana,sugar,tea console.log("removed is: " + removed); removed = arr.splice(3, 1); console.log("After removing 1: " + arr ); // orange,mango,water,sugar,tea console.log("removed is: " + removed); // banana`
19.	toString()把数组转换为字符串，并返回结果。	`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`

Map对象

创建对象

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

map.clear() – 移除 Map 对象的所有键/值对。
map.set() – 设置键值对，返回该 Map 对象。
map.get() – 返回键对应的值，如果不存在，则返回 undefined。
map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
map.size – 返回 Map 对象键/值对的数量。
map.keys() - 返回一个 Iterator 对象，包含了 Map 对象中每个元素的键。
map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值。

let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
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);            
}

元组

1
2
3

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

联合类型

通过管道(|)将变量设置多种类型，赋值根据设置的类型进行赋值

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

也可以将联合类型作为函数参数使用

联合类型数组

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**数字数组**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  
 
arr = ["Runoob","Google","Taobao"] 
console.log("**字符串数组**")  
 
for(i = 0;i<arr.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)

需要注意接口不能转换为 JavaScript。它只是 TypeScript 的一部分。

联合类型和接口

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

输出结果为：

Hello
Hello
World
**Hello World**

接口和数组

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

接口继承

单继承

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)

类

创建类成员

class Car { 
    // 字段 
    engine:string; 
 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
 
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}

var obj = new Car("Engine 1")

类的继承

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

也可以进行方法重写

static关键字

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：私有，智能被其定义所在的类访问

类实现接口

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 )

对象

对象可以是包含一组键值对的实例

var object_name = { 
    key1: "value1", // 标量
    key2: "value",  
    key3: function() {
        // 函数
    }, 
    key4:["content1", "content2"] //集合
}

# 在对象中添加方法
object_name.sayHello = function(){ return "hello";}

将对象作为参数传递函数

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)

鸭子类型

在使用鸭子类型的语言中，这样的一个函数可以接受一个任意类型的对象，并调用它的”走”和”叫”方法。如果这些需要被调用的方法不存在，那么将引发一个运行时错误。任何拥有这样的正确的”走”和”叫”方法的对象都可被函数接受的这种行为引出了以上表述，这种决定类型的方式因此得名。

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

学习笔记

学习笔记点滴记录

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载先请联系作者且注明出处！

问题解决：快速利用js完成后端接口上一篇

大数据级别资源搜索引擎-elasticSearch 下一篇

TypeScript基本入门