一 、什么是TypeScript
TypeScript 是静态编程语言 , 是 JavaScript 的超集
简而言之：JavaScript有的TypeScript都有。JavaScript写的代码在TypeScript的环境下都能跑。TypeScript中添加了类型支持。TypeScript =Type+ JavaScriptTypeScript解决了JavaScript语言本身的局限性，使用TypeScript其能够更好胜任开发大型项目
二 、JavaScript 和 TypeScript 区别
1 . 动态编程语言和静态编程语言
JavaScript 属于动态编程语言
动态编程语言 :边解析边执行的语言, 错误只能在运行阶段发现
TypeScript 属于静态编程语言
静态编程语言 :先编译(编译成js),再执行(不能直接执行, TSC工具将ts转换为js)
2 . 兼容性
TypeScript 包含 JavaScript ( JavaScript 所有语法 JavaScript 都支持 )
3 .TypeScript有类型约束
TypeScript 有类型的约束 ( type ), 有强大的代码提示 ( 高度集成 vsCode 在写代码的时候就能发现问题 )
三 、TypeScript 的前端生态
vue : vue3 源码使用 TS重写React : TS + HooksAngular : 默认支持 TS四 、TypeScript 运行环境
全局安装编译 TS 的工具包
安装全局包：npm i -g typescript
用来编译 TS 代码的包，使用内置命令tsc，实现了ts -> js的转化
注意 ：Mac 本安装全局包时，需要添加sudo获取权限：sudo npm i -g typescript
五 、如何运行 TypeScript
1 . 转换为 JS 文件再运行 (业务中推荐使用)
1.1 编译 TS 文件
终端中输入命令，tsc XXX.ts（此时，在同级目录中会出现一个同名的 JS 文件）
1.2 执行 JS 代码
在终端中输入使用 node 命令，node XXX.js浏览器中直接运行
2 . 在线运行 TypeScript
测试代码时可以在线运行 : /play
3 .ts-node直接运行 TS 文件
使用ts-node包，直接在 Node.js 中执行 TS 代码。它提供了ts-node命令，可以简化执行命令。
安装全局包:npm i -g ts-node
使用方式：终端中直接运行ts-node XXX.ts
注意：ts-node 不会生成 js 文件
ts-node命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码
六 、什么是 Type
type :直意为 类型 ( 数据类型 )
1 . TypeScript 中的 Type
在 TypeScript 定义变量需要指定 Type 用类型注解给变量定义TypeScript 中的类型TypeScript 中的type关键字七 、什么是类型注解
约定了变量的类型 , 给变量添加类型约束
语法:let 变量 : 类型 = 值
实例 :let age: number = 18
: number就是类型注解
注意 :约定变量的类型, 就只能给变量赋值该类型的值，否则，就会报错
错误实例 :let age: number = '18'错误原因 ：类型不一致, 将string类型的值赋值给了number类型的变量
八 、TypeScript 中有哪些类型
TypeScript 的类型分为 ，JavaScript 中的已有类型和TypeScript 新增的类型
1 . JavaScript 中的已有类型
原始类型 :number/string/boolean/null/undefined/symbol定义原始类型的语法:let 变量 : 类型 = 值// 数值类型let age: number = 18// 字符串类型let name: string = '张三'// 布尔类型let isDown: boolean = false// undefinedlet un: undefined = undefined// nulllet timer:null = null// symbollet uniKey:symbol = Symbol()
对象类型 :object（包括，数组、对象、函数等对象）
2 . TypeScript 新增的类型
联合类型自定义类型( 类型别名 )接口元组字面量类型枚举voidanyunkown九 、联合类型
语法 :let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
|（竖线）:在 TypeScript 中叫做联合类型，
由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
实例 :
let var: string | number = 1var = '1'
应用场景setTimeout
// | 联合类型 变量可以是两种类型之一let timer:number|null = nulltimer = setTimeout()
十 、type关键字的作用
作用 : 给已有类型取别名 和 定义一个新的类型 ( 搭配联合类型使用 )
类型别名
语法 :type 别名 = 类型实例 :type St = string // 定义let str1:St = 'abc'let str2:string = 'abc'
自定义类型
语法 :type 别名 = 类型 | 类型1 | 类型2实例 :type NewType = string | number // 定义类型let a: NewType = 1let b: NewType = '1'
十 一、数组类型
两种定义格式
语法1 :let 变量 : 类型[ ] = [ 值...]
示例 ：`let arr: number[] = [1, 3, 5]解析 :元素都是number类型的数组
语法2 :let 变量 : Array<类型> = [ 值...]
实例 :let arrStr: Array<string> = ['a', 'b', 'c']解析 :元素都是strings类型的数组
混合类型数组实例 :
let arr: (number | string) [] = []这里有个有优先级的问题，使用（）包一下let arr: Array<number | string> = []解析 :元素是number或者string类型的数组
十二 、元组类型
1 . 什么是元组
是一个特殊的数组
特点
约定了数组子元素的个数约定了每个子元素所对应的类型
语法 :let arr : [类型,类型] = [数据,数据]
实例 :let arr: [number, string] = [1, '1']
数组中只有两个元素,第一个是number类型 ,第二个是string类型
2 . 元组的实际应用
React 中useState()的返回值类型就是一个元组
十三 、对象类型
1 . 单个定对象类型
语法 :
const 对象名: {属性名1：类型1，属性名2：类型2，方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型} = { 属性名1: 值1，属性名2：值2 }
实例 :
const goodItem:{name: string, age: number, hoppy: ()=>string } = {name: '张三', age: 20, hoppy:function(){ return '敲代码' }}
2 . 类型别名实现类型复用
实例 :
定义别名
type Obj = {name: string, age: number, hoppy: ()=>string }
使用
const goodItem:Obj = {name: '张三', age: 20, hoppy:function(){ return '敲代码' }}
3 . 可选属性
const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }
十四 、接口类型
当一个对象类型需要被复用, 两种方法可以实现
type:类型别名interface:接口
1 . interface 使用
语法 :
interface 接口名 {属性1: 类型1, 属性2: 类型2,}
注意 :接口名 要I(大写I)开头
2 . 接口和类型的区别
interface（接口）和 type（类型别名）的对比：
相同点：都可以给对象指定类型
不同点:
interface（接口）:只能为对象指定类型。可以继承。type（类型别名）:不仅仅可以为对象指定类型，可以为任意类型指定别名
注意：能使用 type 就用 type
3 . 接口的继承
两个接口之间有相同的属性或者方法, 可以通过继承实现
4 . 继承的实现extends关键字
语法 :interface 接口2 extends 接口1 {属性： 类型}
继承后 , 接口2 ,会拥有 接口1 的所有属性
式例 :
// 案例 interface 继承的实现interface Istu {name: stringgender: stringgrade?: string | numberheight?: string | numberstudy:(arr:string[])=>string[]play?:()=>void}interface Istud extends Istu {work:stringhobby:[string,string,string]//元组}let study3: Istud = {name: '王五',gender: '男',work:'敲代码',study: (arr) => arr.map(it =>study3.work ),hobby:['抽烟','喝酒','烫头']}const newHobby = study3.study(study3.hobby)console.log(newHobby) // [ '敲代码','敲代码','敲代码' ]
十五 、函数类型
定义函数类型除了定义函数本身之外, 还需要定义函数参数和返回值的类型
1 . 单个定义函数类型
语法 :
普通函数function 函数名( 形参1: 类型，形参2：类型 ): 返回值类型 { }箭头函数const 函数名（ 形参1：类型，形参2：类型 ): 返回值类型 => { }
// 声明式function add(num1: number, num2: number): number {return num1 + num2}// 箭头函数const add = (num1: number, num2: number): number => {return num1 + num2}add（1,'1') // 报错
2 .type自定义类型 ( 统一定义函数类型 )
语法 :
type Fn = (参数:类型,参数2:类型)=>类型
实例 :
type Fn = (n1:number,n2:number) => number // 定义类型const add1 : Fn = (a,b)=>{return a+b }
3 . 函数的默认参数
和 js 语法一样, 函数不传参数时可取的默认值
语法 :
function 函数名(形参1：类型=默认值，形参2：类型=默认值): 返回值类型 { }const 函数名（形参1：类型=默认值，形参2：类型=默认值):返回值类型 => { }
= 参数: 等号后面的参数就是默认值
4 . 函数的可选参数
使用函数实现某个功能时，参数可以传也可以不传。
例如 ：数组的slice方法，
可以不传参数slice()可是实现浅拷贝数组也可以传递一个参数slice(1)还可以slice(1, 3)
语法 :function 函数名(形参1?：类型，形参2?：类型): 返回值类型 { }
注意 ：可选参数只能出现在参数列表的最后
5 . 可选和默认值的区别
相同点：调用函数时，可以不传对应的参数
区别 ：
设置了默认值之后，就是可选的了，不传就会使用默认值；可选的参数, 不传就没有值
注意：它们不能一起使用。优先使用默认值
十六 、void 类型
函数的返回值类型
如果一个函数没有返回值 在js中是 undefined , 在ts中需要约定void
约定 void 类型 的三种情况
函数没有返回值 （没有return 没有值）试例:const add = () => {console.log('Hello')}返回undefined试例:const add = () => undefind只有return没有值试例:const add = () => {return}十七 、字面量类型
任意的字面量都可以作为数据类型。字面量一般和联合类型一起使用，表示只能取某些个特定的值。1 . 字面量的作用
单个字面量没有什么用处，它一般和联合类型一起使用， 用来表示一组明确的可选值列表。
例如：约定Gender类型只能取girl和boy这两个字符串其中之一。
type Gender = 'girl' | 'boy'let g1: Gender = 'girl' // 正确let g2: Gender = 'boy' // 正确let g3: Gender = 'man' // 错误
2 . 应用场景redux中的actionType
// 字面量类型type ActionType = 'GET_BOOKS' | 'ADD_BOOK' | 'DELET_BOOK'const reduser= (key:ActionType): string=> {switch (key) {case 'ADD_BOOK':return '添加成功'case 'DELET_BOOK':return '删除成功'case 'GET_BOOKS':return '获取成功'default:return '失败'}}console.log(reduser('GET_BOOKS')) // 获取成功
十八 、枚举类型
什么是枚举
字面意思就是将数据一枚一枚的列举出来
关键字 enum
语法 :
定义 :enum 枚举名 {数据1 , 数据2, 数据3}使用 :let 变量 : 枚举名 = 枚举名.数据1
枚举的值
枚举的类型和其他类型不同,除了是枚举类型还是一个值
实例:
// type定义的类型是没有值的 - 不能console.logtype NewType = number | stringconsole.log(NewType) // 输出类型是没有意义的// 创建枚举enum Direction { Up, Down, Left, Right }// 枚举是有值的 - 可以console.logconsole.log(Direction.Up)
数字类型枚举
默认情况下，枚举的值是数值。默认为：从 0 开始自增的数值
当然，也可以给枚举中的成员初始化值
enum num {up , dow, left}
转换为 js
(function (num) {num[num['up']=0]='up'...})
字符串类型枚举
enum str{up='up' , dow='dpw', left='left'}
十九 、any 类型
any类型的情况
函数的参数不调类型 例如:console.log()不知道要接收的数据类型,先用any定义 例如: 发送请求时先用any定义 再换成其他类型any 隐式转换的两种情况
不给类型 , 的变量不给类型的函数参数
二十 、类型推论
在 TypeScript 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。
优点 ：由于类型推论的存在，有些情况下的类型注解可以省略不写
类型推论的应用场景:
声明变量并初始化时( 类型推论会自动识别值的类型)决定函数返回值时 ( 类型推论会根据运算自动识别类型)
示例 :
// 变量 age 的类型被自动推断为：numberlet age = 18// 函数返回值的类型被自动推断为：numberfunction add(num1: number, num2: number) {return num1 + num2}
代码地址：
/jiang-zi/TS-study
