TypeScript 基础

TypeScript 变量声明

TypeScript 变量声明

注意：变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。

4种类型：
var [变量名] : [类型] = 值;

var [变量名] : [类型];

var [变量名] = 值;

var [变量名];

类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

<类型>值 或: 值 as 类型

var str = '1'

var str2:number = <number> <any> str

//str、str2 是 string 类型 console.log(str2)

类型推断

如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

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 运算符

typeof 运算符

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

负运算符

var x:number = 4

var y = -x;

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

var msg:string = "RUNOOB"+".COM"

三元运算符 (?)

var result = num > 0 ? "大于 0" : "小于 0，或等于 0"

其他于js类似

条件分支

if() else if() else() switch(){ case xx: { default {}和java一致

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

for (var val in list) { 
    //语句 
}

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

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

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

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

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

可选参数

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

默认参数

function function_name(param1[:type],param2[:type] = default_value) { 
}

剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。

剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。

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

构造函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

递归函数

递归函数即在函数内调用函数本身。

举个例子：
从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？"从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？'从前有座山，山里有座庙，庙里有个老和尚，正在给小和尚讲故事呢！故事是什么呢？……'"

Lambda 函数

Lambda 函数也称之为箭头函数。

箭头函数表达式的语法比函数表达式更短。

( [param1, param2,…param n] )=>statement;

var foo = (x:number)=>10 + x

console.log(foo(100)) //输出结果为 110

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

单个参数 () 是可选的：

无参数时可以设置空括号：

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。

每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。

function disp(string):void; 
function disp(number):void;

TypeScript Number

Number 对象是原始数值的包装对象。

Number 对象属性

下表列出了 Number 对象支持的属性：MAX_VALUE，MIN_VALUE，NaN，NEGATIVE_INFINITY，POSITIVE_INFINITY，

prototype

Number 对象的静态属性。使您有能力向对象添加属性和方法。

var emp = new employee(123,"admin")

employee.prototype.email = "admin@runoob.com"

constructor

返回对创建此对象的 Number 函数的引用。

Number 对象方法

toExponential()

把对象的值转换为指数计数法。

toFixed()

把数字转换为字符串，并对小数点指定位数。

toLocaleString()

把数字转换为字符串，使用本地数字格式顺序。

toPrecision()

把数字格式化为指定的长度。

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 对象的原始数字值。

返回一个 Number 对象的原始数字值。

var num = new Number(10); 
console.log(num.valueOf()); // 输出：10

 TypeScript String（字符串）

String 对象用于处理文本（字符串）

var txt = new String("string");
或者更简单方式：
var txt = "string";

constructor

对创建该对象的函数的引用。

var str = new String( "This is string" ); 
console.log("str.constructor is:" + str.constructor)

length

返回字符串的长度

prototype 允许您向对象添加属性和方法。

String 方法 

charAt()， charCodeAt()，concat()， indexOf()，lastIndexOf()，localeCompare()， match()，replace(),search(),slice(),split(),substr(),substring(),toLocaleLowerCase(), toLocaleUpperCase(),toLowerCase(),toString(),toUpperCase(),valueOf()

TypeScript Array(数组)

var sites:string[]; sites = ["Google","Runoob","Taobao"]

Array 对象

我们也可以使用 Array 对象创建数组。

var sites:string[] = new Array("Google","Runoob","Taobao","Facebook") 
 
for(var i = 0;i<sites.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]) 
}

多维数组

一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。

最简单的多维数组是二维数组，定义方式如下：

var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]

数组方法

concat()...

TypeScript 元组

声明一个元组并初始化：

var mytuple = [10,"Runoob"]; // 创建元组 
console.log(mytuple[0])

元组运算

• push() 向元组添加元素，添加在最后面。

• pop() 从元组中移除元素（最后一个），并返回移除的元素。

更新元组

// 更新元组元素 mytuple[0] = 121

解构元组

var a =[10,"Runoob"]

var [b,c] = a

TypeScript 联合类型

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

TypeScript Map 对象

let myMap = new Map();

初始化 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对象中每个元素的值 。

nameSiteMapping.set("Google", 1);

// 迭代 Map 中的 key

// 迭代 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);            
}