【TypeScript】-常用类型

一、TypeScript

（一）是什么

TypeScript是js类型的超集，它可以编译成纯js，主要提供了类型系统和对js新标准的支持

（二）TS特性

1. 始于js 归于js
   从语法和语义开始，ts可以编译成纯净简洁的js代码
2. 强大的工具构建大型应用程序
   静态检查，代码重构
3. 先进的js
   提供最新的和不断发展的js特性

（三）TS的优缺点

1、优点

1.静态检查
2.可读性和可维护性
3.兼容js
4.更好的开发工具支持

2、缺点

1.开发成本高
2.增大项目的体积

（四）ts与js的区别

（五）常用类型

1、number、string、boolean、null、undefined、symbol

let age1:number=18
let str:string='aaa'
let nu:null=null
let un:undefined=undefined
let bool:boolean=false
let sym:symbol = Symbol()
console.log(age1,str,nu,un,bool,sym)
// 18 aaa null undefined false Symbol()
//类型注解都是小写  :number

2、数组

1. let arr : 类型 （常用）
2. let arr : Array <类型>

let arr:number[]=[1,2]
let arr1:string[]=['1','2']

let arr2:Array<string>=['1','2']
let arr3:Array<number>=[1,2,3]

3、元组

let arr : [类型1，类型2，…]

let arr4:[number,string]=[1,'2']
let arr5:[number,string,number,boolean]=[1,'2',3,false]

4、联合类型

| 连接 可以写成多个类型

let age2:(number|string)
age2="20"
//20

let age3:(number|string|boolean) = 18
age3=false
console.log(age3)
//false

5、类型别名

可以给类型起别名 之后需要用这个变量 直接起别名就行
定义：type 自定义名字 首字母大写 = 类型
使用：let 变量 ：自定义名字

type Arr=(number|string|boolean|null)
let arr7:Arr=[1,6,null,'m',true,false]
[
  1,     5,    'm',
  null,  true, '11',
  false
]

6、函数类型

1.函数的参数和函数的返回值添加类型
2.函数没有返回值 类型是 void

function fn(n:number|string):number{
    console.log(n)
    //2
    //3
    return Number(n)
}
fn(2)
fn(3)




var fn1=function():void{
    //当函数没有返回值，那么他的返回值就是：void
}

7、对象类型

1.type 可以声明任何类型
2.interface 声明对象类型

let obj:{name:string,age:number}={
    name:'zs',
    age:18
}

type Person={
    name:String,
    age:number|string
    add:(n:number)=>void  //函数类型的定义
}

let p:Person={
    name:'ls',
    age:'18',
    add:(n:number):void=>{
        console.log(n)
        //456
        console.log(111) 
        //111   
    }
}
p.name='js'
p.add(456)
console.log(p)
//{ name: 'js', age: '18', add: [Function: add] }

extends继承

interface Person2 extends Person1{
    height:number
}
let p2:Person2={
    name:'222',
    color:'111',
    height:1
}

8、类型断言

使用类型断言 来知道更具体的类型
两种写法：
1.参数as类型
2.<类型>参数

function getLength(n:(number|string|number[])):number{
    return(n as string).length
    return(<string>n).length
}

console.log(getLength("1"))
//1 返回长度
getLength(1)
//undefined  数字没有length
getLength([1,2,3])
//3

9、枚举 关键字：enum

enum Sta{
    "可约"=0,
    "已满"=1,
    "休息"=2
}
let data1={
    code:0,
    data:{
        states:1    
    }
}
console.log(data1.data.states)
//1
console.log(Sta[data1.data.states])
//已满
//需要和后端对接好 数字对应的状态  后端返回的数据 会自动渲染

10、任意类型 any