【TypeScript】从零开始玩转TypeScript - TypeScript中的变量声明

前言

小伙伴们大家好。至此我们已经学习了TypeScript的基础知识以及TypeScript中的数据类型。其中在数据类型的分享中，我们用了大量的代码来展示每种类型是如何使用的，并且在所有的案例中基本都用到了变量的声明。相信通过这些案例的学习小伙伴们应该大概也都知道了变量声明的一些语法了，然而这只是其中的一部分。下面我们就专门拿出一篇文章来介绍一下TypeScript中的变量声明。

变量

变量的命名规则，TypeScript中变量的命名跟JavaScript中的是一样的

变量名可以包含数字、字母、下划线（_）、美元符号（$）

变量名不能包含除下划线美元符号以外的其它特殊字符

变量名不能以数字开头，可以以下划线或美元符开头

变量名不能使用TypeScript中的保留字和关键字，如： let class: string;这是不被允许的

同一个作用域下，用let/const声明的变量名不能同名，同时也不能用var再重新声明，如let a; let a;

同一个作用域下，已经用var声明了变量，也不能再用let/const重新声明

变量在使用前必须先声明，不能直接拿过一个变量就用，如：a = 3 这也是不被允许的，在编译阶段会报错

变量的声明：变量的声明很简单，与JavaScript中变量的声明一样，通过 var/let/const 来声明，但不同的是在TypeScript中声明变量可以为其指定数据类型

变量声明的语法：let变量名: 数据类型

变量声明时可以不用指定类型，默认为any类型，如let变量名，与JavaScript一样在变量赋值时动态决定变量的数据类型

如果变量在声明时没有指定数据类型，但声明的同时赋了初始值，那么这个变量的数据类型也就确定了，由初始值的数据类型所决定，一旦已经赋了初始值，它的数据类型就不能再改成其它类型了，如 let 变量名= 1，那么实际这个变量为number类型

变量声明同时可以进行赋值操作，如：let变量名: 数据类型 = xxx，否则默认值为undefined

变量声明时一旦指定了数据类型，就不能在改变成其它类型了，也不能赋为其它类型的值

变量声明可以指定多个数据类型，数据类型间用 | 分隔，如：let a:number | string

用const声明的变量一定要赋初始值，否则会报错

用const声明的变量不能重新赋值，如果是引用类型则不能指向新的地址

下面我们用代码来一一展示一下上面的规则

变量的命名规则

// 正确的变量命名
let _a;
let $b;
let a_b;
let a$b;
let Abc;
let a2b;
var count; 
var count; //用var声明的变量可以重名，但let/const不行

// 错误的变量命名
let a*b; //不能包含除 _ 和 $ 以外的特殊字符
let 2b; // 不能以数字开头
let return;  // 不能使用TypeScript中的关键字或保留字

let a;
let a; // let/const声明的变量不能重名

let b;
var b;//用let/const声明的变量，不能再用var重新声明

var c
let c // 用var声明的变量，也不能再用let/const重新声明

变量在使用前必须先声明，否则会报错。

// 变量的错误使用
a = 3;// 编译时报错：Cannot find name 'a'

// 正确的用法
let a: number; //先声明
a = 3;//再使用

变量的声明

// 变量声明的语法：let/const/var [变量名]: [数据类型]
let a: number;
var _a: string;
let isTrue: boolean;

// 变量声明时可以不用指定类型，默认为any类型，如**let变量名**，与JavaScript一样 在变量赋值时动态决定变量的数据类型
let anyVariable; // 相当于 let anyVariable: any;
anyVariable = 1;
anyVariable = 'hello'
anyVariable = true

// 如果变量在声明时没有指定数据类型，但声明的同时赋了初始值，那么这个变量的数据类型也就确定了，由初始值的数据类型所决定，一旦已经赋了初始值，它的数据类型就不能再改成其它类型了，如 let 变量名= 1，那么实际这个变量为number类型
let num = 1; 
num = 2; //正确
num = "hello" //报错

// 变量声明同时可以进行赋值操作，如：let变量名: 数据类型 = xxx，否则默认值为undefined
let hello:string = 'hello world'
console.log(hello); //hello world
let world:string;
console.log(world); // undefined

// 变量声明时一旦指定了数据类型，就不能在改变成其它类型了，也不能赋为其它类型的值
let data: string;
data: number;//报错

let count:number;
count = "3"; //报错

// 变量声明可以指定多个数据类型，数据类型间用 | 分隔，如：let a:number | string
let my_a: number | string;
my_a = 3;
my_a = 'hello'

// 用const声明的变量一定要赋初始值，否则会报错
const ok:boolean; //报错 'const' declarations must be initialized
const hello:string = "hello world";
// 用const声明的变量不能重新赋值，如果是引用类型则不能指向新的地址
const obj: object = {
    
    };
obj.name = 'Yannis' //正确
obj = {
    
    name: 'Yannis'}; //报错，不能指向新的内存地址

变量的作用域

在上面变量命名规则中我们提到了作用域的概念。声明一个变量，它是有作用范围的，也就是前面提到的作用域。变量的作用域大体可分为两种：

全局作用域：全局作用域的变量一般声明在程序结构的外部，它可以在代码的任何位置使用

局部作用域：局部作用域的变量一般声明在一个局部的结构中，比如：函数体、代码块等。局部变量也只能在声明它的局部结构（函数体/代码块）中使用。

let hello: string = "hello world";//全局变量
function sayHi(){
    
    
	let name:string = "typescript";
	console.log(name);// typescript
	console.log(hello);// hello world
}
//全局变量可以在任意位置使用
console.log(hello);// hello world

//局部变量只能在局部作用域中使用，本案例中：name只能在sayHi函数中使用
console.log(name);// 报错

总结

本文我们详细讲解了变量的一些相关知识，包括变量的命名规则，变量的声明和使用以及使用变量时的一些注意事项，并且把每种情况都用代码进行了一一展示。最后还简单提到了变量作用域。关于变量的相关知识就分享到这里了。我们下文再见。

喜欢的小伙伴们欢迎点赞留言加关注哦！

【TypeScript】从零开始玩转TypeScript - TypeScript中的变量声明

前言

变量

变量的作用域

总结

Guess you like