Typescript笔记

执着的烙印
102 阅读6分钟

前言

感谢pink老师。typescript的学习是前端必要的课程了。安排的太晚。也要安排起来！

一、体验

1. TypeScript的概述

1.1 JavaScript是什么？

JavaScript是一种运行在客户端中的编程语言，当应用于浏览器时，为网站提供动态交互特性， 让网页“动起来”。

运行环境： 1 浏览器 2 Node.js

1.2 TypeScript 是什么？

TypeScript 是JavaScript的超级（js有的ts都有）

TypeScript是 Type+JavaScript（为js添加了类型系统）

设计目标是 开发大型应用。

//TypeScript  代码：有明确的类型，即 ：number （数值类型）

let age: number =10

// JavaScript 代码，无明确的类型

let age =10

1.3 TypeScript 相比 js的优势

a：类型化思维方式，开发更为严谨，提前定位错误，减少bug。

b：类型系统提高了代码可读性，维护和重构更容易。

c：补充了接口，枚举等开发大型应用时js缺失的功能。

d：vue3源码为ts，是未来趋势。

e： angular 和 react都可以与ts使用。

1.4开发工具

倾向于 vscode - 使用方便，插件较多灵活。

1.5安装node.js

官网教程很清晰。 验证： 终端里 ， node -v 出现版本号即可。

1.6为什么要安ts工具包？

浏览器只认识js 不认识ts ，所以需要将ts转化为js 。然后可以在node.js/浏览器中运行。

1.7 安装解析TS工具包

安装步骤：

  1. 打开vscode终端
  2. 输入安装命令： npm i -g typescript typescript：就是用来解析TS 的工具包，提供了tsc命令，实现了TS-JS转化。

1.8 TS文件创建

  • 新建文件夹
  • 用vscode打开文件夹
  • 在vscode中新建hello.ts文件
  • 执行验证 hello.ts文件中， 输入console.log('hello, my study typeScript') 进行验证 打开终端， 将ts转为js ，转换办法是 ，在终端中输入 tsc hello.ts 回车，在文件夹中出现新文件同名的js文件 hello.js。 执行js文件， 在终端中输入 node hello.js

image.png

1.9简化执行ts步骤

简化方式： 使用ts-node包。 ‘直接’ 在node.js 中执行 TS 代码 安装： npm i -g ts-node 使用： ts-node hello.ts 说明：

  • ts-node包将ts转换为js ， 然后执行js代码
  • ts-node包提供了命令 ts-node ， 用来执行ts代码

image.png

ts-node hello.ts 终端报错

image.png 可能是版本不符合， 可以指定安装版本。将原有包卸载，安装指定版本

卸载： npm uni -g ts-node

安装： npm i -g ts-node@8.5.4

删除原本的hello.js ，再次用ts-node运行hello.ts 。依旧可以运行。 所以ts-node 很香了，一步到位。

1.10 注释和输出语句

注释

  • 注释： 对代码的解释说明，用来帮助和理解代码
  • 知晓： 注释的内容是不会执行的
  • 推荐：写代码的时候写注释，否则，自己也是不记得的。

注释方式： 单行注释 和 多行注释

----单行注释：

// 这是我的代码注释 快捷键ctrl+/

----多行注释：

/* 这是 我的 多行注释 */ 快捷键是 shift +alt +a

输出语句

作用：在终端中打印信息 node.js 会执行我们所写代码，为了能够知道代码的执行结果，就需要使用输出语句将结果打印出来，判断是否执行，以及执行结果是否正确。

console.log('TS 的 魅力')

image.png

1.11 总结

image.png 总结就是上面的， 翻上去看看吧！

二、变量

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)

image.png

2.2简化形式

声明变量的同时直接赋值

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

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

image.png

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

3.配置vscode

1.隐藏面包屑

image.png

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

image.png

清爽很多了。

2.终端移动

image.png

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

image.png

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

image.png

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

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 不能传字符串。

image.png

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

5.命名规则和规范

1.变量的命名规则

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

image.png

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

注意:

变量是区分大小写的。

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

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

image.png

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)

image.png

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)

image.png

8.基本数据类型

8.1数字类型

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

//数字类型：整数

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

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

image.png

数字也可以是正数和负数

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


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

image.png

8.2字符串类型

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

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

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

image.png

  • 字符串可以是 单引号 '' 或双引号 "" ，推荐单引号
  • 字符串类型的类型注解为 ：string ， 声明变量时要添加类型注解。
let food:string = '电脑'
console.log(food)

image.png

9.布尔类型

9.1定义

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

let  isStudying:boolean =true 

let isPlayingGame:boolean =false

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

image.png

10.undefined 、null

10.1相同点

只有一个值， 值为类型本身

undefined 类型的值是： undefined

null 类型的值为：null

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

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

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

image.png

10.2不同点

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

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

null : 表示声明了变量并已赋值，值为null（能找到，但是值就是null）

总结

  • TypeScript中常用的基本数据类型有5个
  • 分别是 number/ string/boolean/undefined/null
  • 重点是 number（数字类型）/ string（字符串类型）/boolean（布尔类型）

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

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

highlight: a11y-dark

三typescript 的运算符

3.1运算符概述

运算符也成为操作符，用来实现赋值（=） 、算术运算、比较等功能的符号

常用的运算符：

  • 算术运算符
  • 赋值运算符
  • 自增和自减运算符
  • 比较运算符
  • 逻辑运算符

3.2算术运算符

算术运算符包含： 加 + 减 - 乘 * 除/

  • 加 +
  • 减 -
  • 乘 *
  • 除/

3.2.1算术运算符

1算术运算符：进行算术运算时使用的符号，用于两个数值之间的计算

// 实现2和3的算术运算
// 加
console.log( 2 + 3 ) 
// 减 
console.log( 2 - 3 ) 
// 乘
console.log( 2 * 3 ) 
// 除
console.log( 2 / 3 )

image.png

3.2.2 加号的其他作用

注意： + 号 ，不仅可以用于加法计算，还能实现字符串拼接

// 字符串拼接
console.log('这是一个字符串拼接' +  '验证')

image.png

注意：

 console.log( 2 + 3 ) 
 console.log( 2 + '3' ) 
 console.log( '2' + 3 )

image.png

规律： 由此可知， 加号两边 只要有一边是字符串 ， 就执行字符串拼接。

3.2.3 加号引发的思考

console.log(2 - '1')// 报错：算术运算符右侧必须是数字类型

注意： 除加号以外， 其他算术运算符只应该跟数字类型一起使用（number）

其他方式： 将字符串类型 转换 为数字类型。

 console.log( 4 - +'3') 
 // +'3' 表示将 '3' （string类型）  转换为  3（number 类型）
 // 所以 ， 4- +'3' , 变为 4-3 =>结果为1

记住了： 在字符串前面添加 + 号， 可以将 string 转化为 number （字符串内容为数字时才有意义）

3.3赋值运算符

赋值运算符: 将等号右边的值赋值给它左边的变量， 比如： 等号（=）

let  age:number = 18
 age = age +1 
 
 console.log( age )// 19

顺序：

  • 先执行等号右边的代码
  • 将计算结果复制给等号左边的变量

除了等号（=） ， 还包括 加等（+=） 减等（-=） 乘等（*=） 除等（/=）

age +=1

3.4自增和自减运算符

自增（++） 是运算符 +=1 的简化方式

自减（--） 是运算符 -=1 的简化方式

 let  age:number = 18

 age = age +1 
 console.log( age )

 age +=1
 console.log( age )

 age ++ 
  console.log( age )

image.png

age ++ 会让变量age的值加1

++ 或--，只能让变量的值增加或者减少1 ，不是1 也要采用其他形式。 比如2 ，age +=2

3.5比较运算符

比较运算符： 用于比较两个数据的值， 并返回其比较的结果，结果为布尔类型。

  • 大于 >
  • 大于等于 >=
  • 小于 <
  • 小于等于 <=
  • 等于 ===
  • 不等于 !==

比较运算符 常用于数字类型的比较

3.6逻辑运算符

逻辑运算符： 与 或 非

逻辑运算符通常用于 布尔类型 的计算， 并且结果也是布尔类型。

与（逻辑与） ，用&&符号表示， 当 && 两边的值同时为true ， 结果才为ture，否则为false

console.log(true && true)  // true 
console.log(true && false)  // 结果为false 
console.log(false && false)  // 结果为false 
console.log( 2>1 && 2>=2) // 结果为true

或（逻辑或） ，用||符号表示 ， 当||两边的值，只要有一个为true ，结果就为true， 否则为false


console.log(true || false ) // true
console.log(false || true ) // true 
console.log(false || false ) //false
console.log( 3<2 || 1<=2) // true

非（逻辑非），符号 ! ,表示取反， 即 ture-> false ，而false ->true

!true    //false
!false   // true
console.log(!false ||  false ) // true

highlight: a11y-dark theme: juejin

四、语句

4.1 条件语句

4.1.1 概述

条件语句： 根据判断条件的结果（真或假），来执行不同的代码，从而实现不同功能。

条件执行时， 首先判断条件是否满足

  • 如果条件满足，就做某件事（情况1）
  • 如果条件不满足，就做另外一件事 （情况2）

image.png

条件语句，也叫分支语句，不同的情况，就是不同的分支。

4.1.2 if语句

在typescript中， if语句就是实现条件判断的。

  • if语句的语法：
if(判断条件) {
    条件满足时，要做的事情
}

解释：

  • 判断条件： 布尔类型（true 或者 false）
  • 如果判断条件为真， 就执行要做的事情
  • 否则，如果判断条件为假， 则不执行花括号的代码
  • 补充说明： 语句，是一个完成的句子，用来使某件事发生（或实现某个功能）
let isVip:boolean= true
if(isVip) {
    console.log('你是会员，可以看完整电影')
}

打印结果：

image.png

// isVip如果是false 
let isVip:boolean= false
//if判断不会成立，则不会打印
if(isVip) {
    console.log('你是会员，可以看完整电影')
}

4.1.3 else语句

在typescript中，else语句必须配合if语句来使用

else语句： 条件不满足， 要做的事情（if语句的对立面）

else语句的语法：

if(判断条件) {
    条件满足时，要做的事情
}else {
    条件不满足，要做的事情
}

解释： 否则，如果判断条件为假， 就执行条件不满足时要做的事情


//isVip判断是否为会员， true是会员，false不是会员
let isVip:boolean= false

if(isVip) {
    console.log('你是会员，可以看完整电影')
}else  {
    console.log('你不是会员，可试看电影5分钟')
}

可以看到结果。执行的是else【判断条件为假， 执行的是else的内容】

image.png

4.1.4 if else语句 实战

demo1=============
// 判断年龄 小于18 看动画片， 大于18可以玩游戏

let age:number= 17
//判断条件， 年龄是否小于18 
// age< 18 是布尔类型
if(age < 18) {
    console.log('回家看熊出没吧')
}else  {
    console.log('玩仙剑游戏撒')
}
// 输出结果- 回家看熊出没吧

demo2====
// 判断年龄 小于18 看动画片， 大于18可以玩游戏

let age:number= 18
//判断条件， 年龄是否小于18 
// age< 18 是布尔类型
if(age < 18) {
    console.log('回家看熊出没吧')
}else  {
    console.log('玩仙剑游戏撒')
}
// 输出结果- 玩仙剑游戏撒

if else语句的使用关键点- 寻找判断条件

4.2 三元运算符简化条件语句

4.2.1 三元运算符概述

三元运算符的作用与 if... else ... 语句类似

作用： 根据判断条件的真假， 得到不同的结果。

三元运算符语法：

结果= 判断条件 ? 值1 ： 值2

解释：

  • 如果判断条件为真， 结果为 值1
  • 否则， 如果判断条件为假 ，结果为 值2
//  判断 5 大于 3 吗
//  如果大于， 得到 '大于' ，否则 得到  '小于'

let  result:string = 5>3 ? '大于' : '小于'
console.log(result) // 结果输出为 大于

注意：得到结果的类型 由 值1 和值2 的类型决定（值1 和值2 的类型相同）

4.2.2 三元运算符的练习

let age :number= 18
let result:string = age < 18 ? '回家看熊出没吧' : '玩仙剑游戏撒'
console.log(result) // 输出结果是  玩仙剑游戏撒

let age :number= 16
let result:string = age < 18 ? '回家看熊出没吧' : '玩仙剑游戏撒'
console.log(result) // 输出结果是  回家看熊出没吧

一定程度上， 三元比if else 语句要简洁的多。

4.3 循环语句

4.3.1 概述

重复做某件事，所以是循环做

在typescript中，要实现重复做某件事情，就需要用到循环语句，来减少重复劳动提升效率。

4.3.2 for循环

在typescript中，for 循环就是实现重复做某件事的循环语句

for循环是TS基础知识的重点

for 循环的组成

  1. 初始化语句： 声明 计数器变量 用来记录循环次数 （执行一次）
  2. 判断条件： 判断 循环次数 是否达到目标次数
  3. 计数器更新 ： 完成一次循环让 计数器数量加1
  4. 循环体 ： 循环的代码， 也就是要重复做的事情。

1648009233(1).png

for循环的基本使用

语法：

for(初始化语句; 判断条件 ; 计数器更新){
  循环体
}

for ( let i:number=1 ; i<=3 ; i++) {
 console.log('测试for循环的使用')
}

for循环的执行过程

意义：for循环的语法比较复杂，搞明白代码的执行顺序，才能真正理解并掌握for循环。

image.png

  1. 初始化语句：只会执行一次。
  2. 重复执行的部分：判断条件、循环的代码、计数器更新（绿色框框）

for循环代码：

for (let i:number =1 ; i<= 3 ; i++) {
    console.log('-------------测试一下吧')
}

打印结果：

image.png

执行过程记录：

  1. 初始化计数器（i=1） ----只执行一次
  2. 第1次：判断条件（1<=3）；循环代码（打印）； 计数器++ （i变为2）
  3. 第2次：判断条件（2<=3）；循环代码（打印）； 计数器++ （i变为3）
  4. 第3次：判断条件（3<=3）；循环代码（打印）； 计数器++ （i变为4）
  5. 第4次：判断条件（4<=3）条件不满足。结束循环。

4.4 断点调试

借助断点调试，观察代码的执行过程。

断点： 程序暂停的位置（调试时，程序运行到此处，就会暂停）。

这个，慢慢研究吧。

4.4.1vscode-断点调试配置

第一步：准备要调试的ts文件

新建 a.ts 文件，作为要调试的ts文件

console.log('1 准备开始执行 for 循环')
 
for (let i: number = 1; i <= 3; i++) {
  console.log('...一锅装不下')
}
 
console.log('2 for 循环执行结束')

第二步：添加调试配置

  1. 打开调试窗口：点击左侧活动栏倒数第二个按钮(Debug)
  2. 生成默认配置：点击DEBUG后面的下拉框，选择添加配置
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "调试TS代码",
      // ts-node 命令： “直接”运行ts代码。
      // 作用：调试时加载ts-node包（在调试时“直接”运行ts代码）
      "runtimeArgs": ["-r", "ts-node/register"],
      // 此处的 a.ts 表示要调试的 TS 文件（ 可修改为其他要调试的ts文件 ）
      "args": ["${workspaceFolder}/a.ts"]
    }
  ]
}

第三步：安装调试用到的包**

在当前目录中，打开终端窗口 在终端中输入以下命令：

# 注意：原来通过 -g（全局）安装的包，在调试时不生效，需要在当前目录中单独安装
# 调试TS代码，依赖这两个包
npm i ts-node typescript

调试技巧

  1. 查看 console.log 输出(调试控制台)
  2. 监视变量的值(1.鼠标移入;2.添加到左侧监视窗口)

注意：如果运行时报错。或者debug下一步置灰不能点击，有可能是少了重要的一步。

在命令行环境下键入tsc -init 进行初始化

你会发现根目录下多了 tsconfig.json 的文件，记录了编译成JS的选项。

avatar
文章
阅读
粉丝