二、变量

1 .什么是变量

变量：是用来存储数据的容器，并且是可以变化的。

2.变量的使用

2.1基本使用

变量的使用分为两步：1声明变量并指定类型 2给变量赋值

第一：声明变量并指定类型

let age: number;

解释下各部分：

let 是ts的关键字，声明变量用的
age是自己命名的变量名称，你也可以叫 ergouzi 或者 zhangsan，不过友情提示，写能代表当前变量意义的名字，免得久了你就不知道zhangsan是个啥
: number 用来指定变量age为数值类型。
注意，分号是可选的，写不写都行，写了也不费劲不是。

第二：给变量赋值

age = 10

解释下：使用等号（=）来给变量age赋值。

// 变量的基本使用

// 第一 声明变量并指定类型
 let age: number
// 第二 给变量赋值
age = 10
console.log(age)
// 变量是可以变化的
age = 11
console.log(age)

2.2简化形式

声明变量的同时直接赋值

// 简化方式：声明变量的同时就赋值

let age:number = 20 
console.log(age)

少写一个是一个，推荐这个毋庸置疑。

3.配置vscode

1.隐藏面包屑

查看 - 显示面包屑【显示导航痕迹】去掉打钩即可，这样就会只显示一个。

清爽很多了。

2.终端移动

文件太多，终端在底下不方便。移动下吧。比如右侧。

箭头的位置右击鼠标，选择将面板移至右侧，如果你想左侧，也是可以的。还可以手动调整终端大小。

为了方便开发而已，不用刻意，自己用着方便就好。

3.终端快捷键（上下键）

上键可以展示输入过的命令。选择一个自己需要的直接运行就可以。

4. 清除

cls 实现终端清除

4.类型注解

1.什么是类型注解

let age:number = 20

代码中 :number 就是类型注解，说白了就是变量的类型

2.作用

类型注解：是一种为变了添加类型约束的方式。程序员和TS的约定

// 程序员 和 TS  约定：  变量 age的类型为 number（数值类型）
let age:number = 20

重要：重要的事情说三遍

约定了什么类型，就只能给变了赋什么类型的值。
约定了什么类型，就只能给变了赋什么类型的值。
约定了什么类型，就只能给变了赋什么类型的值。

// 错误演示

age =' 我的  数值20  是能随便换成 Hello 的吗'

number的能字符串吗，肯定是不能的啊。 age是number 就只能传number 不能传字符串。

标红的下划线就能看出来。确实是报错了。鼠标放上去就能看出来是为啥了。

5.命名规则和规范

1.变量的命名规则

变量名称只能出现：数字、字母、下划线 _ 、美元符号 $ ,并且不能以数字开头。

红色波浪线的警示。 1 和 4 都是错误的命名方式不能数字开头不能有@

注意:

变量是区分大小写的。

let age:number = 20 
let Age:number = 30 
console.log(age)
console.log(Age)

可以看见以下的打印结果，是2个值。20 和30

2.命名规则和规范

规范的代码，让别人觉得专业，优雅。主要是自己看着也舒服。

推荐变量名要有意义，有意义就是有意义，许三多说的要做有意义的事。

// 规范 ，有意义，推荐
let age:number = 20 
// 不规范，无意义，不推荐
let a:number = 30

如果久了你能知道a是个啥，也不是不行。不要觉得写个a是为了为难别人。也有可能为难的是自己。

推荐使用驼峰命名（首字母小写，后面每个单词的首字母都大写）

let cityName
let yourAge
let infoDetail

太长的变量名有助于看出来是什么意思。

6.变量练习

// 最终目标实现 num1 为2  num2 为33

// 变量1
let num1: number = 33

// 变量2
let num2: number = 2

// 实现目标思路

// 1准备1个第三个变量
let temp: number
// 2 把num1 放在变量3中，则可认定为num1 为空了
temp = num1 //temp 是 33了
// 3 把num2 放入num1中 ， 则num2 为空了
num1 = num2 // num2 是 2了
// 4 把第三变量的放入num2中
num2 = temp // num 2 是33了
// 结果实现了变量1 和 变量2 互换
console.log('num1=',num1)
console.log('num2=',num2)

7.数据类型概述

typescript 中数据类型分为两大类：

1.原始类型（基本数据类型）

2. 对象类型（复杂数据类型）

常用的基本数据类型有5个：number/string/boolean/undefined/null

//变量 age 的类型是  number （数字类型）

let age:number = 20 

//变量 name 的类型是  string （字符串类型）

let hisName:string = 'zhangsan'

//变量 flag 的类型是  boolean （布尔）
let flag:boolean= true

console.log(age)
console.log(hisName)
console.log(flag)

8.基本数据类型

8.1数字类型

数字类型：包含整数型和浮点型（小数）值

//数字类型：整数

let age:number = 20 
console.log(age)
//数字类型：小数

let score:number = 20.3
console.log(score)

数字也可以是正数和负数，正数可以省略+ ，负数不能省略 - ，很容易理解的吧。


// 正数  ，  +直接省略即可
let myMoney:number =  +200
console.log(myMoney)
let hisMoney:number =  300
console.log(hisMoney)
//负数  ，  - 不能省略
let youMoney:number = -200
console.log(youMoney)

8.2字符串类型

字符串：有零个或多个字符串联而成的，用来表示文本信息。

console.log('hello TS') // 单引号
 
console.log("hello TS") // 双引号

console.log('')// 空字符串

字符串可以是单引号 '' 或双引号 "" ，推荐单引号
字符串类型的类型注解为：string ，声明变量时要添加类型注解。

let food:string = '电脑'
console.log(food)

9.布尔类型

9.1定义

布尔类型，用来表示真或假，类型注解为 boolean true 为真， false 为假

let  isStudying:boolean =true 

let isPlayingGame:boolean =false

console.log('isStudying=',isStudying,'isPlayingGame=', isPlayingGame)

10.undefined 、null

10.1相同点

只有一个值，值为类型本身 undefined 类型的值是： undefined null 类型的值为：null

// 类型注解为undefined
let u:undefined =undefined

// 类型注解为 null
let n:null = null 

console.log(u,'=====',n)

10.2不同点

undefined ： undefined 表示声明但是未赋值的变量值（找不到值）

// undefined 表示声明但是未赋值的变量值（找不到值）
let u1:undefined
console.log(u1) // 变量u1的值为  undefined

null

总结

这些类型的值，也叫做字面量，也就是从字面上能看出他是什么。

18 就是数字字面量
'测试中' 就是字符串字面量
true/false 就是布尔字面量

小笔记- typescript学习2-变量篇