从开始学习TypeScript已经有两周时间了,部分官网的功能也已经能在重构的本地编译还原,是时候抽时间回归一下TypeScript基础。
类型和变量是每一门编程语言的核心,相信我们最开始学习编程的时候,也是从语言的类型入手,只不过学的语言多了会发现,好像大部分语言的变量和类型都差不多。但是很多时候,bug与漏洞却诞生于最基础的变量类型,比如:JS 弱类型导致代码运行中接受了非预期的输入,浮点运算中的精度丢失等等,相信每一个前端工程师都曾经遇到过这些坑。
工作中,遇到的很多具体应用场景,最终都抽象为对基本类型数据的操作,激进一些的说,类型和变量是才决定一门语言风格的关键。
let isDone: boolean = true | false
const PI: number = 3.14
let myName: string = "anonymous"
let name: string = "Li Lei";
let home: string = "Beijing";
let template: string = `His name is ${name}.
He lives in ${home}.`;
应用在Angular2中组件的 template 定义html;
let x: [string, number];
x = ['loch', 26];
x[2] = 'cgg'; // ok
x[3] = true; // error
元组特性一:已知索引的元素,只能赋予固定类型的值;
元组特性二:越界的数组元素(未定义类型),可以赋予联合类型的值;
补充:联合类型
枚举是TypeScript扩充的数据类型(相对JavaScript而言),枚举作为一个双向映射队列,可以很方便的查询键值;
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
enum Color {Red = 1, Green, Blue};
let colorName: string = Color[2];
任意类型代表了它可以拥有任意多的方法和属性,在编译阶段,移除类型检查,比如Angular2中使用引用jquery对象;
declare var $: any; // jQuery作为第三方库,需要移除类型检查
空值与any刚好相反,表示什么都没有(可以这么理解);
let x: void = undefined;
let func:() => void = () => {};
TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。
类型断言表示你已经清楚地知道程序内发生了什么,类似于转换类型,但是类型断言只是在编译阶段起作用;
let strLength: number = (str).length;
let strLength1: number = (str as string).length;
上面罗列出了TS中的基本类型,类型声明可以帮助 IDE 和维护代码的同事更好的理解和维护程序,TS是一门静态类型编程语言,在编译成JS的过程中,严格的校验着每一个变量值;
const 声明静态常量,声明的同时必须赋予初始值,赋值后,不得修改;
let 声明变量,声明过得变量不能再次被声明;
在熟悉了 JS 变量作用域后,甚至有些喜欢这些JS中才有的变量特性 =o=
var x = [];
for(var i = 0; i<10; i++){
x.push(function(){
console.log(i)
}
}
x[1]() // 10
JS中的变量为函数作用域,上面的例子中,x 中的函数共享 for 作用域中 i 的值,当 for 循环执行完毕后,i 的值为 10, 故在 for 循环之后调用函数,i 的值并没有留存函数定义时 i 的值;
喜闻乐见的闭包:
var y = [];
for(var i = 0; i<10; i++){
x[i] = (function(i){
return function(){
console.log(i);
};
})(i);
}
x[1]() // 1
另一个神奇的地方,变量提升:
function upVar(arg1){
if(arg1){
var x = 1;
}
return x;
}
upVar(true); // 1
upVar(false); // undefined
const 与 let 均为块级作用域,针对上面 var 的两个例子,下面给出 TS 解决方案:
for(let i = 0; i<10 ; i++){
setTimeout(function(){
console.log(i);
}, 200*i);
}
// perfect
// let 会为每次迭代创建一个新的作用域留存当前执行的作用域环境
function(x: number){
let x: string; // error let 与 函数参数通用一个作用域环境
}
在一个作用域环境中,一个 let 变量只能被声明一次;
for( let i = 0; i<10; i++){
for( let i = 0; i<10; i++){
// 内层的同名 let 变量会屏蔽来自上级的同名变量值,以己代之;
}
}
慎用解构,面对复杂的对象结构,很难完美解构;
let input = [1, 2];
let [first, second] = input;
交换变量值
// swap variables
[first, second] = [second, first];
剩余列表
let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]
属性重命名
let {a: newName1, b: newName2} = o;
===
let newName1 = o.a;
let newName2 = o.b;
**