TypeScript第一天学习记录

2022年10月29日19点17分

1.TypeScript是什么

1.1 TypeScript是什么？

TypeScript(简称:TS)是Javascript的超集(JS有的TS都有)

TypeScript = Type+Javascript(在JS基础之上，为JS添加了类型支持)

TypeScript是微软开发的开源编程语言，可以在任何运行Javascript的地方运行

//TypeScript代码：有明确的类型，即:number(数值类型)
let age1: number=16
//Javascript代码：无明确的类型
let age2 = 16

1.2 TypeScript为什么要为JS添加类型支持？

背景：

JS的类型系统存在“先天缺陷”，JS代码中绝大部分错误都是类型错误(Uncaught TypeError)

问题：

增加了找Bug、改Bug的时间，严重影响了开发效率

从编译语言的动静来区分，TypeScript属于静态类型的编程语言，JS属于动态类型的编程语言。

静态类型：

编译期做类型检查

动态类型：

执行期做类型检查

代码编译和代码执行的顺序：

①编译

②执行

对于JS来说:

需要等到代码真正去执行的时候才能发现错误(晚)

对于TS来说：

在代码编译的时候(代码执行前)就可以发现错误(早)

并且，配合VSCode等开发工具，TS可以提前到在编写代码的同时发现代码中的错误，减少找bug，改bug的时间

1.3 TypeScript相比JS的优势

①更早(写代码的同时)发现错误,减少找Bug、改Bug的时间，提升了开发效率

②程序中任何位置的代码都有代码提示，随时随地的安全感，增强了开发体验

③强大的类型系统提升了代码的可维护性，使得重构代码更加容易

④支持最新的ECMAScript语法，优先体验最新的语法，让你走在前端技术的最前沿

⑤TS类型推断机制，不需要在代码中的每个地方都显示标注类型，让你再享受优势的同时，尽量降低了成本

除此之外，Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TypeScript已成为大中型前端项目的首先的编程语言

2.TypeScript初体验

2.1安装编译TS的工具包

问题：为什么要安装编译TS的工具包?

回答：

Node.js/浏览器，只认识JS的代码，不认识TS代码。需要先将TS代码转化为JS代码，然后才能运行

安装命令：

npm i -g typescript

typescript包：

用来编译TS代码的包，提供了 tsc命令，实现了TS->JS的转化。

验证是否安装成功:

tsc -v //插件typescript的版本

2.2编译并运行TS代码

①创建hello.ts文件(注意：TS文件的后缀名是.ts)

②.将TS编译为JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的JS文件）

③执行JS代码：在终端中输入命令，node hello.js

说明：

所有合法的JS代码都是TS代码，有JS基础只需要学习TS的类型即可

注意：

由TS编译生成的JS文件，代码中就没有类型信息了

编译后报错：

因为JS文件和TS文件重复声明变量导致报错

①关闭js文件后就不会报错了

②控制台输入tsc -- int 生成tsconfig.json配置文件也可以解决报错

2.3简化运行TS的步骤

问题描述：

每次修改代码后，都要重复执行两个命令，才能运行TS代码，太繁琐

简化方式：

使用ts-node包，”直接“在Node.js中执行TS代码

安装命令：

npm i -g ts-node(ts-node包提供了ts-node命令)

使用方式:

ts-node hello.ts

解释：

ts-node命令在内部偷偷地将TS转换成JS后再执行JS代码

19点59分

23点00分

3.TypeScript常用类型

概述:

TypeScript是JS的超集，TS提供了JS的所有功能，并且额外增加了：类型系统

①所有的JS代码都是TS代码

②JS有类型(比如 number、string等)，但是JS不会检查变量的类型是否发生变化。而TS会检查。TypeScript类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

3.1.类型注解

//示例代码
let age: number = 18
​

说明：代码中的:number就是类型注解 作用：为变量添加类型约束。比如，上述代码中，约定变量age的类型为number(数值类型)

解释：约定了什么类型，就只能给变量赋值改类型的值，否则会报错

3.2.常用基础类型

概述：可以将TS中的常用基础类型细分为两类：①JS已有的类型 ②TS新增的类型

①JS已有类型：

原始类型:number/string/boolean/null/undifined/symbol

对象类型:Object(包括了数组、对象、函数等对象)

②TS新增类型

联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any等

3.3原始类型

特点：

number/null/undifined/symbol/string/boolean

简单。这些类型完全按照JS中类型的名称来书写的

3.4数组类型

特点：

对象类型,再TS中更加细化，每个具体的对象都有自己的类型语法

数组类型的两种写法:(推荐使用number[]写法)

let numbers: number[] = [1,3,5]
let Strings: Array<string> = ['a','b','c']

联合类型：

let arr: (number | string)[] = [1,'a',2,'b']
let arr: number | string[] = [1,2]、
let arr: (number | string)[] = ['a','b']

解释：|（竖线）在TS中叫来联合类型（由两个或者多个其他类型组成的类型，表示可以是这些类型中的任意一种）

注意：①这是TS中联合类型的语法，只有一根竖线

②添加的小括号表示，首先是数组，然后这个数组中能够出现number或者string类型的元素

③不添加小括号表示，既可以是number类型，也可以是string类型，但是只能是其中一个

3.5类型别名

类型别名(自定义类型):为任意类型起别名。

使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名。简化改类型的使用

type CustomArray = (number | string)[]
let arr1: CustomArray = [1,'a',2,'g']
let arr2: CustomArray = [1,'a',2,'g']

解释:

1.使用type关键字来创建类型别名

2.类型别名(比如，此处的CustomArray)，可以是任意合法的变量名称

3.创建类型别名后，直接使用该类型别名作为变量的类型注解即可

3.6函数类型

函数的类型实际上指的是：函数参数和返回值的类型。

为函数指定类型的两种方式:

①单独指定参数、返回值的类型

function add(num1: number,num2: number): number{
 return num1+num2
}

const add = (num1: number, num2: number): number=>{
 return num1 + num2
}

②同时指定参数、返回值的类型

const add: (num1: number, num2: number)=>number =(num1,num2)=>{
 return num1+num2
}

解释：当函数作为表达式的时候，可以通过类似箭头函数形式的语法来为函数添加类型。

注意：这种形式只适用于函数表达式

如果函数没有返回值，则设置函数返回值的类型为void

function greet(name: string): void{
 console.log('safsa');
}

使用函数实现某个功能的时候，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。比如，数组的slice方法，可以slice ()也可以slice(1)还可以slice(1,3)

function mySlice(start?: number, end?: number): void{
 console.log('起始索引：',start,'结束索引: ',end);
 
}
​
​
mySlice() //起始索引： undefined 结束索引 undefined
mySlice(1) //起始索引： 1 结束索引 undefined
mySlice(1,2) //起始索引： 1 结束索引 2  

可选参数：在可传可不传的参数名称后面添加？（问好）

注意：可选参数只能出现在参数列表的 最后，也就是说可选参数后面不能再出现必选参数

2022年10月30日00点29分