这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

0 前面的话

这两天都会一直写TS的内容，除了青训营的课程之外，我还参考了以下信息，如有需要请点击前往：
课程：
juejin.cn/course/byte…
资料：
www.runoob.com/typescript/…

1 正文

TypeScript 变量声明

声明变量的类型及初始值：

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

声明变量的类型，但没有初始值，变量值会设置为 undefined：

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

声明变量并初始值，但不设置类型，该变量可以是任意类型：

var [变量名] = 值;

声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

var [变量名];

位运算符

位操作是程序设计中对位模式按位或二进制数的一元和二元操作。

for...in 循环

for...in 语句用于一组值的集合或列表进行迭代输出。

语法格式如下所示：

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

val 需要为 string 或 any 类型。

for…of 、forEach、every 和 some 循环

此外，TypeScript 还支持 for…of 、forEach、every 和 some 循环。

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

TypeScript for...of 循环

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

forEach、every 和 some 是 JavaScript 的循环语法，TypeScript 作为 JavaScript 的语法超集，当然默认也是支持的。

因为 forEach 在 iteration 中是无法返回的，所以可以使用 every 和 some 来取代 forEach。

TypeScript forEach 循环

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

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

带参数函数

语法格式如下所示：

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

可选参数和默认参数

可选参数

在 TypeScript 函数里，如果定义了参数，则必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识？。将 lastName 设置为可选参数：

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

可选参数必须跟在必需参数后面。如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。如果都是可选参数就没关系。

默认参数

也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为：

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

注意：参数不能同时设置为可选和默认。

以下实例函数的参数 rate 设置了默认值为 0.50，调用该函数时如果未传入参数则使用该默认值：

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

函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。

function addNumbers(...nums:number[]) { 
    var i; 
    var sum:number = 0; 
    for(i = 0;i<nums.length;i++) { 
        sum = sum + nums[i]; 
    } 
    console.log("和为：",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

匿名函数

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明，除了没有函数名外，其他的与标准函数一样。

可以将匿名函数赋值给一个变量，这种表达式就成为函数表达式。

语法格式如下：

var res = function( [arguments] ) { ... }

匿名函数自调用在函数后使用 () 即可：

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

Lambda 函数

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

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

( [param1, param2,…param n] )=> {
 
    // 代码块
}

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

字节青训营前端青训营笔记「12」 | 青训营笔记