TypeScript笔记

TypeScript笔记

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

基本语法

安装

可以直接使用npm进行安装

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

之后便可以使用ts命令

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

基础语法

  • TypeScript会忽略程序中的空格、换行符和制表符,通常用它们来缩进代码

  • TypeScript区分大小写

  • js一样分号是可选的,除非两行语句在同一行

  • 注释和Java相同

    • //单行注释
      /*
      多行注释
      */
      
  • 面向对象

实例

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
voidvoid用于标识方法返回值的类型,表示该方法没有返回值。function hello(): void { alert("Hello Runoob"); }
nullnull表示对象值缺失。
undefinedundefined用于初始化变量为一个未定义的值
nevernevernever 是其它类型(包括 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;

类型断言

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

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+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模(余数)x=y%215
++自增x=++y66
自减x=–y44

关系运算符

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

逻辑运算符

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

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

位运算符

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

赋值运算符

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

三元运算符

Test ? expr1 : expr2

类型运算符

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

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

其他运算符

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

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

流程控制

条件语句

其实TypeScript和Java差不了太多

if(boolean_expression 1) {
    # 在布尔表达式 boolean_expression 1true 执行
} else if( boolean_expression 2) {
    # 在布尔表达式 boolean_expression 2true 执行
} else if( boolean_expression 3) {
    # 在布尔表达式 boolean_expression 3true 执行
} else {
    # 布尔表达式的条件都为 false 时执行
}

switch语句

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

循环

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()来定义函数

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

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

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

元组

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})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值