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分
标签：TypeScript,number,第一天,记录,代码,TS,JS,类型 From： https://www.cnblogs.com/xjh954/p/16840313.html