保姆级TypeScript 学习笔记

前奏

参考视频: 点击跳转

简述

ts是js的超集，给js带来类型系统，还提供了接口，泛型，枚举等高级功能，弥补了js的不足。
TypeScript = Type + JavaScript (为js提供了类型系统，试问哪个前端没挨过类型错误的打呢)

//TS 有明确的类型
let price: number = 81

//JS 无明确类型
let price = 81

环境准备

安装node
安装解析ts的工具包（nodejs/浏览器不认识ts，需要把ts转换成js）

终端中运行：
npm i -g typescript

包的名字就叫typescript（小写），提供tsc命令，实现ts转换js，否则无法在node中运行。

代码执行步骤

1，终端中运行helloworld.ts文件

tsc helloworld.ts

生成helloworld.js文件

2，终端中执行

node helloworld.js

可得出打印内容

如下：

简化执行ts！！

使用ts-node包，“直接”执行，文件夹不再主动生成对应js文件

终端执行：

安装包
npm i -g ts-node

执行
ts-node 文件名

---

变量

//1,声明变量并指定类型
let price: number;
//2,给变量赋值
price = 81

声明的时候赋值也可。

类型注解

let price: number = 81

给变量的赋值的类型必须和约定的一致。（参照上面的示例）

变量命名规范

变量名：数字，字母，下划线_，美元符号$，不能以数字开头，区分大小写。

交换变量的值

//变量1
let num1: number = 11
//变量2
let num2: number = 22
//目标： num1的值为22，num2的值为11

解：

let num1:number = 11
let num2:number = 22
console.log(num1,num2,'赋值前')//11，22

let cup: number
cup = num1
num1 = num2
num2 = cup
console.log(num1,num2,'赋值后')//22，11

数据类型

1，原始类型（基本数据类型）
number/string/boolean/undefined/null
2，对象类型（复杂数据类型）

不说了，写法一样的

---

运算符

算术运算符 + - * /
赋值运算符 =
自增自减运算符 ++ –
比较运算符 返回结果为布尔类型
逻辑运算符 && || ！

---

vscode调试

1，安装插件 Debugger for Chrome
2，vscode工具栏 ——>运行——>启动调试（F5）
3，侧边栏会出现一个虫子图标，打开配置文件launch.json
配置如下：

{
  // 使用 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"]
      "program": "${file}"
    }
  ]
}

且需要在当前文件(非全局)再安装ts-node

npm i ts-node typescript

4，添加断点后，点击左上方运行和调试右侧的小三角即可开始

语句

条件语句

if else 三元运算符

循环语句

let a: string = '干饭人'
for (let i:number = 0; i<3 ;i++) {
  console.log(a)
}

小案例

//计算1+2+3+...+100总和
let sum:number = 0
for(let i:number = 1;i<=100;i++){
  sum += i
}
console.log(sum)//5050

break // continue

for循环连续不间断。
break提前结束循环，终止循环
continue让程序间断执行，跳过本次循环，继续执行下一次循环

for(let i:number = 0;i<=5;i++){
  console.log(i)
  if(i===3){
    console.log('这是第'+i+'个包子，我吃饱了')
    break
  }
}
//打印结果
0
1
2
3
这是第3个包子，我吃饱了


for(let i:number = 0;i<=5;i++){
  if(i===3){
    continue
  }
  console.log('这是第'+i+'个包子')
}
//打印结果
这是第0个包子
这是第1个包子
这是第2个包子
这是第4个包子
这是第5个包子

---

数组

存放多个数据的集合，通常是相同类型的数据

let fruits:string[] = ['apple','pear','cherry']

创建数组

//方法1（nice）
let fruits:string[] = []//字符串类型数组，其他类型类推

//方法2
let nums:number[] = new Array(1，2，3)//打印出来[1,2,3]

数组长度和索引

.length获取长度
[index]获取索引

数组取值/存值

只要能取到，随你怎么取，直接操作索引即可

数组添加元素

原数组索引存在就是修改，不存在就添加

let nums:number = []
nums[nums.length] = 6

---

函数

//唱歌
function singSong(songName:string){
	console.log(songName)
}
singSong('般若波罗蜜心经')  //般若波罗蜜心经
singSong('今早公鸡叫我起床')  //今早公鸡叫我起床

//求和
function getSum(nums:number[]){
  let sum:number = 0
  for(let i:number=0;i<nums.length;i++){
    sum += nums[i]
  }
  return sum
}
let nums1:number[]=[1,2,3]
let nums2:number[]=[4,5,6]
console.log(getSum(nums1))   //6
console.log(getSum(nums2))   //15

形参和实参（实惨）

形参声明函数时指定，放在声明函数的小括号中，指定函数可接收的数据
实参调用函数时传入的参数

//唱歌
function singSong(songName:string){//形参
	console.log(songName)
}
singSong('般若波罗蜜心经')  //般若波罗蜜心经-》实参
singSong('今早公鸡叫我起床')  //今早公鸡叫我起床-》实参

函数返回值

将函数内部计算结果返回，继续参与其他计算；如果没有返回值，默认类型为void(空)

1，指定返回值类型
2，指定返回值

函数体中，使用return关键字返回函数执行结果，返回值必须符合返回值类型的类型要求，否则会报错。

//找到数组中最大值
function getMax(arr:number[]):number{
  let numMax:number = arr[0]
  for(let i:number=0;i<arr.length-1;i++){
    if(numMax<arr[i]){
      numMax = arr[i]
    }
  }
  return numMax
}

let aArr:number[] = [9,9,3,55,67,1,1,44,68,102,103,99,35,67,12]

let aaa:number = getMax(aArr)
console.log(aaa)//103

return

返回函数内部计算结果，终止函数内部代码执行，return后面的代码不会执行。

变量作用域

变量的使用范围
局部变量
函数内部声明的变量，只能在函数内部使用
全局变量
全局能访问。。。

对象

属性 和 方法
一组相关属性和方法的集合，无序的
无序键值对的集合

let person = {
	name:'Jay Zhou',
	gender:'男',
	height:'175',
	lyric:function(){//函数用作方法时可以省略函数名称，即匿名函数
		console.log('雨下整夜，我的爱溢出就像雨水')
	}
}

一个函数是单独出现的，未与对象关联，我们称为函数；否则，称为方法

对象的类型注解

ts中对象是结构化的，即对象有什么属性或方法；使用对象前，提前设计好对象的结构

let person: {
	name:string;
	age:number;
}

||
||  对该对象值的结构进行类型约束
||  键值对中的值变成数据类型，多个键值对之间使用分号;分隔，可省略
||
\/

person = {
	name:'大锤'，
	age:'101'
}

console.log(person)//{name:'大锤', age:'101'}

//案例 1
let p1:{
	sayHi: () => void
}
p1 = {
	sayHi:function(){
		console.log('Hi!')
	}
}

//案例 2
let p2:{
	sum: (num1:number,num2:number) => number
}
p2 = {
	sum:function(num1:number,num2:number){
		return num1+num2
	}
}

接口

ts中可以用接口来作为对象的类型注解，上面那种类型注解太麻烦了，而且无法复用。

关键字：interface

interface IUser {
  name:string;
  gender:string;
  height:number;
  lyric:() => {
    a:string;
    b:string;
  }
}

let person: IUser = {
	name:'Jay Zhou',
	gender:'男',
	height:175,
	lyric:function(){//函数用作方法时可以省略函数名称，即匿名函数
		// console.log('雨下整夜，我的爱溢出就像雨水')
    // return 'yingyingying'
    return {a:'1',b:'2'}
	}
}

---

TS类型推论

TS中某些没有明确指出类型的地方，类型推论会帮助提供类型，即：某些情况下，类型注解可以省略不写。
类型推论场景：
1，声明变量并初始化时
2，决定函数返回值时

1，声明变量并初始化时


但是，先声明未赋值，后面再去赋值，不会出现类型推论。

//以下不会报错
let age
age = 18
age = ''
age = false

2，决定函数返回值时

function sum(num1:number,num2:number):number{//函数返回值类型为number
  return num1 + num2
}
sum(1,3)
||
||
||
||
||
\/
function sum(num1:number,num2:number){//函数返回值类型为boolean
  return true
}
sum(1,3)

能省略类型注解的地方就省略，提高开发效率

---

---

在浏览器中运行ts

基础方法
1,tsc ts文件名生成js文件
2,引入ts文件对应的js文件
3,修改内容后在终端中重新运行tsc ts文件名

以上方法：麻烦

简化方法
使用tsc的监视模式

tsc --watch ts文件名

进入监视模式后，修改代码后，浏览器会自动更新，不用再修改一次代码，执行一次命令。

---

---

TS类型断言

调用querySelector()通过id选择器获取DOM元素时，拿到的元素类型都是Element。
因为无法根据id来确定元素的类型，所以该方法就返回了一个宽泛的类型：元素（Element）类型。
以上导致新的问题，无法访问一些元素的特有属性，如img元素的src属性，因为Element类型只包含所有元素共有的属性和方法（如id属性）

**解决办法：**使用类型断言，手动指定更加具体的类型

关键词：as

值 as 更加具体的类型

let img = document.querySelector("#image") as HTMLImageElement
//HTMLPElement HTMLDivElement HTMLHeadingElement......

忽略里面重复声明的lint错误提示，后面它自己好了。。。

再访问img.src就不会报错了，后续可以修改src属性愉快的更换图片

console.dir

可以查看原始元素的属性

拖到最后一行