TypeScript基础-类型与变量

从开始学习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 = () => {};

null & undefined

TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。

类型断言

类型断言表示你已经清楚地知道程序内发生了什么,类似于转换类型,但是类型断言只是在编译阶段起作用;

let strLength: number = (str).length;
let strLength1: number = (str as string).length;

上面罗列出了TS中的基本类型,类型声明可以帮助 IDE 和维护代码的同事更好的理解和维护程序,TS是一门静态类型编程语言,在编译成JS的过程中,严格的校验着每一个变量值;


变量声明

const 和 let

const 声明静态常量,声明的同时必须赋予初始值,赋值后,不得修改;

let 声明变量,声明过得变量不能再次被声明;

var 作用域问题

在熟悉了 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

TS 变量

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;

**

前行的路上,感谢您的鼓励!!

**
TypeScript基础-类型与变量_第1张图片 TypeScript基础-类型与变量_第2张图片

你可能感兴趣的:(TypeScript,基础知识,学习笔记,ES6,typescript,编程语言,语言)