一、类型注解
如:number是类型注解
具体分为：
原始类型、数组类型2、联合类型|、类型别名type(交叉&)、keyof(获取key字面量)、函数类型2(void不确定函数返回值，可选参数?不确定参数)、对象类型:{}、字面量类型(类似const)、接口interface、类型推断(自动)、any类型、类型断言as(常和typeof)、泛型<>(不确定某个类型)。各个模块作用，使用场景。什么场景可以增未定义类型的值
：一般定义的类型，定义实际变量时类型不对或没写会报错。
不同抽离类型方式的区别和使用场景：
1.普通类型别名type通过变量名抽离，简化的是type部分
2.继承、交叉
鼠标放赋值后的变量有提示，先写值，可以cv
1.原始类型
: number 就是类型注解
// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;
// name后续也只能修改为number*、ts类型
js类型8：Number/String/Boolean/Null/Undefined/Symbol/Bigint/Object
简单数据类型：Number/String/Null/Boolean/Undefined
复杂数据类型：Object:Array/Function/普通对象
ts除简单类型注解外，
2.数组类型
// 两种写法
let arr:Array<number>=[1,2,3,4]
let arr2:number[]=[1,2,3,4]3.联合类型
定义num变量是number或string类型，可以在这两种类型修改
var num:number|string=1
num='jack'对象里面规定的类型不对或没写会报错
var m:{id:number,name:string}|number|number[]={id:1,name:'jack}
// 可以把对象里面类型也写死，发请求在因为类型导致请求出错之前，自己就会报错，更方便检查
let arr4:(number|string|string[])[]=[1,2,3,'4',['2']]4.类型别名
作用：简化代码
重复使用某种类型，可以抽离(外层里层都可以写成类型别名，关键字type)
type N=number
type T={
id: N;
name: string;
hobby: string[];
family: {
mather: string;
}
}[]
var list:T=[
{
id: 1,
name: 'jack',
hobby: ['游泳'],
family: {
mather: '妈妈'
}
}
]
//如果有报错，可能是类型名是关键字，换个类型名5.函数类型
?
（1）普通函数写法（分别指定）//尽量只在箭头函数抽离（同时指定）
function add(a:number,b:number):string{
return '1'
}
add(1,2)（2）箭头函数写法（分别指定）
const add2=(a:number,b:number):string=>{
return '1'
}
add2(1,2)（2.1）外层箭头函数写法（同时指定）
const add3:(a:number,b:number)=>string=(a,b)=>{
return '1'
}
add3(1,2)（2.2）箭头函数抽离
type T2=(a:number,b:number)=>string
const add4:T2=(a,b)=>{
return '1'
}
add4(1,2)
补充：普通函数和箭头函数标准写法的区别，如上图所示
（3）函数返回值不确定时：void类型
对于函数返回值不确定的，可以使用void，此时可以不return
// void
type F=(a:number,b:number)=>void
const fn:F=(a,b)=>{
// return '1'
}如果这个位置指定undefined则必须是undefined值和类型必须都是undefined
此时必须写return undefined //不写return 或return;都不符合
// =>undefined必须写return undefined区分值和类型
// 即返回值必须是undefined而不是返回类型必须是undefined
type F2=(a:number,b:number)=>undefined
const fn2:F2=(a,b)=>{
// return '1'
return undefined
}*、参数类型可传可不传时：可选参数（参数后面，除普通函数外冒号前面加？）
// 可选参数
// 对象
const obj23:{
age?:number
name:string
}={
name:'jack'
}
// 函数
type F5 = (a?: number, b?: number) => void
const add5: F5 = (a, b) => {
// return 12
}
add5()
// 普通函数和箭头函数
type L = {
id?: number,
name: string
hobby: string[],
family: {
mather: string
}
say?: () => number,
// fn:()=>number
// say():number,
fn?(): number
}[]
//
var list2: L = [
{
// id: 1,
name: 'jack',
hobby: ['游泳'],
family: {
mather: '妈妈'
},
}
]6.对象类型+8.字面量类型
// 字面量类型： var 实现const 效果
const num11=1234
var num12:1234=1234
// 对象类型+字面量类型
const obj2:{
// 字面量类型
id:2,
age:number
name:string
}={
id:2,
age:18,
name:'jack'
}*、接口interface和type类比reactive和ref
interface一般用于对象类型，type用于所有类型
interface通过继承复用，type通过交叉类型复用
interface可以重复定义相同变量名同extends作用，建议用extends，type不可以重复定义相同变量名
// interface相比type不写=
type Pperson={
id:number
name:string
}
const obj3:Pperson={
id:1,
name:'jack'
}
interface Iperson {
id:number
name:string
}
const obj4:Iperson={
id:1,
name:'jack'
}interface 继承和type交叉
interface可以重复定义相同变量名，不会覆盖会合并所有要求，但建议用extends
// interface继承和type交叉，Iperson和Tperson是interface和type定义好的类型规定，代码省略
// interface继承 关键字extends
interface Iperson2 extends Iperson{
age:number
hobby:string[]
}
//等价于上一段代码,interface可以重复定义相同变量名，不会覆盖会合并所有要求，但建议用extends
interface Iperson{
age:number
hobby:string[]
}
const obj6:Iperson2={
id:1,
name:'jack',
age:18,
hobby:['游泳']
}
// type交叉
// type不可以重复定义相同变量名
type Tperson2= Tperson &{
age:number
hobby:string[]
}
const obj5:Tperson2={
id:1,
name:'jack',
age:18,
hobby:['游泳']
}
7.类型推断
写完赋值，鼠标放上可以自动推断出类型
var num5=1239.any类型
不知道数据类型用any不建议，因为违背了typescript强语言规范
// any
var add6:any=(num1,num2)=>{
return num1+num2
}
add6(1,'2')
add6=210.类型断言 as
明确知道获取的更具体的数据类型
// 类型断言
const aLink=document.getElementById('link')
const aLink2=document.getElementById('link') as HTMLAnchorElement还有在当确定数据之后的类型，但不想附初始值时使用
常用typeof和as配合+补充keyof
// 类型断言2
const obj={
id:1,
name:'jack'
}
// =右侧返回是类型,常用typeof和as配合
type Tperson3=typeof obj
const obj7={} as Tperson3
// keyof获取到值类型的键，获取到把键变成的字面量的联合类型
type P=keyof Tperson3 // keyof +的是type生命的变量
var p1:P='name' // p只能赋值为'id'或'name'
11.泛型<>
有部分类型可以由传的类型来决定，本质是类型抽离
1.泛型类型别名
// 泛型
type Goods={
id:number,
goodsName:string
}
type Data<T>={
id:number,
hobby:string[],
res:T // 类似函数传参，可以？不带这个属性，但是传参是必须传T,除非<T=number>有初始值
}
type Data1=Data<number>
type goodsData=Data<Goods>
const d1:Data1={
id:1,
hobby:['12'],
res:1
}
const goods1:goodsData={
id:1,
hobby:['34'],
res:{
id:1,
goodsName:'12'
}
}2.泛型接口
单层
// 泛型 接口
interface Iperson4<T4> {
id:number,
name:string,
data:T4
}
type Tperson4=Iperson4<number>
const tper4:Tperson4={
id:1,
name:'2',
data:1
}3.泛型函数
一般不用箭头函数
// 函数泛型<>
function getId<T>(id:T):T{
return id
}
let id1=getId<number>(1)
// 此处可省略传T类型，因为自动类型推断了T为number
let id2=getId(2)
// T是上面声明了，Q没声明，两种情况
// 无<>，T必须定义好；函数注意参数和返回值除定义类型外的逻辑冲突
<>内从右往左分析
二、补充：
1.type除了赋值number等，还可以用类型别名定义的字面量类型
作用类似字面量
// 补充类似字面量类型，用类型别名定义的字面量类型
type Direction='up'|'down'|'left'|'right'
function add9(d:Direction){
return d
}
add9('down')2.枚举类型
关键字enum
类似对象找属性
类比interface
// 枚举类型 基础用法
enum Day {
Sunday,
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday
}
function add10(Day:Day){
return Day
}
add10(Day.Monday)
// js编译结果：
三、综合案例
总结
类型声明文件