Typescript

寻觅人
2,144 阅读4分钟

使用了挺久的Typerscript，但是没系统的学习过，今天学习了一下Typerscript顺便整理了一下笔记

基础类型

//布尔类型
let bool:boolean=false


//数值类型 支持二进制
let num:number=123
num=0b1111011


//字符串类型
let str:string='abc'


//数值类型
写法1
let arr1:number[]=[5,6,1]//数组，元素只能是数字
let arr2:(string|number)[]=[1,2,'a']//数字，元素可以说数字和字符串
写法2
let arr3:Array<number>=[5,6,1]


//元组类型
let tuple:[string,number,boolean]
tuple=['a',1,false]//元素必须和规定的长度和类型一样


//枚举类型（enum定义）
enum Roles{SUPER_ADMIN,ADMIN,USER}
conosle.log(Roles.SUPER_ADMIN)//输出0
该类型个人认为主要是用来提示，当判断条件为0时候，可直接通过if来判断，从而不需要额外书写文档，如
if(roles==Roles.SUPER_ADMIN){
    //进行对应的操作
}
当没有自定义值的时候，会自动从0开始赋值
如enum Roles1{SUPER_ADMIN,ADMIN=2,USER}
console.log(Roles1.SUPER_ADMIN)//输出0
console.log(Roles1.['SUPER_ADMIN'])//输出0
console.log(Roles1.USER)//输出3

const enum Message{
    ERROR=error
    SUCCESSS=success
}
const da=Message.ERROR
console.log(da)//输出：error

//any类型
let value:any
value='abc'
value=123
value=false
const arr4:any[]=[1,'aa']
可以理解为，当类型是any的时候，关闭ts的特点


//void类型
const consoleText=(test:string):void=>{
    conosle.log(test)
}
let v:void
v=undefined
v=null
consoleText('abc')
一般情况下，在函数没有返回值的情况，使用void，因为void可以接受null，undefined（函数在没有返回值的时候，会返回undefined）


//null和undefined
let n:undefined=undefined
let u:null=null


//never类型
const error=(message:string):never=>{
    throw new Error(message)
}
const infinite=():never=>{
    while(true){}
}
never可以赋给任何类型，但任何类型不能赋给never
如
let neverv=(()=>{
    while(true){}
})()
let num:number
num=neverv//没有报错
neverv=123//报错


//object类型
let obj:object={name:'a'}


//类型断言
const getlan=(target:string|number):number=>{
    if((<string>target).length||(target as string).length){
        return (target as string).length
    }else{
        return target.toString().length
    }
}
(target as string)和(<string>target)判定target为字符串

接口类型

//使用interface来定义
interface NameInfro{
    firstNaame:string,
    lastName:string
}
const getfullname=({firstName,lastName}:NameInfo):string=>{
    return `${firstName} ${lastName}`
}
getfullname({firstName:'haha',lastName:'li'})


//?的使用（可选参数，必须在必须参数后面）
interface Vegat{
    color?:string,//该参数不是必须的
    type:string,
    [props:string]:any//索引签名，[xxx:string]:any，从而使有必须参数就不会报错
}
const getveg=({color,type}:Vegat):string=>{
    return `${color?(color+''):'')${type}`
}
getveg({color:'red',type:'tomato'})
//getveg({color:'red',type:'tomatoo',age:18}as Vegat)//使用断言，告诉编译器我们传的参数是Vegat类型，从而不会报错


//readonly只读
interface Vege{
    color:string,
    readonly type:string
}
let vegeReadonly:Vege={type:'tomato'}
vegeReadonly.type='carrot'//报错
interface ArrInter{
    0:number,
    readonly 1:string
}
let arr:ArrInter=[1,'a']
arr[1]='b'//报错


//定义函数结构
type AddFunc=(num1:number,num:number)=>number
const dd:AddFunc=(n1,n2)=>n1+n2


//定义索引类型
interface RoleDic{
    [id:string]:string
}
const role2:RoleDic={
    a:'super',
    1:'admin'//没有报错，浏览器会转换成字符串
}


//接口继承(extends)
interface Vegat{
    color:string
}
interface Tomate extends Vegat{//Tomate继承了Vegat类型，所以必须拥有color
    legth:number
}

泛型

//类似any,只不过还是有类型检查
const getArray=<T>(value:T,times:number=5):T[]=>{
    return new Array(time).fill(value)
}
getArray<number>(123,4)//定义了value的类型


//泛型约束
interface ValieW{
    length:number
}
const getArray=<T extends Valiew>(arg:T,times:number):T[]=>{
    return new Array(times).fill(arg)
}
getArray([1,2],3)
getArray('123',3)
getArray(123,3)//报错，数字没有length属性
getArray({length:2},3)//手动传入length也可以

const getProps=<T,K extends keyof T>(object:T,propsNmae:K)=>{//K extends keyof T说明K是T其中一个属性
    return object[propsName]
}
const objs={
    a:'a',
    b:'b'
}
getProps(objs,'a')
getProps(objs,'c')//报错，因为objs没有属性c

类

//public 公共的（默认）
//private 私有的
class Parent{
    private age:number
    constructor(age:number){
        this.age=age
    }
}
const p=new Parent(18)
console.log(p.age)//报错，属性“age”为私有属性，只能在类“Parent”中访问
console.log(Parent.age)// 报错，只能在内部访问,继承也没办法获取


//protected 受保护（只能在继承该类的子类获取的，孙子不行）
class Parent1{
    protected age:number
    constructor(age:number){
        this.age=age
    }
    protected getage(){
        return this.age
    }
}
class Child extends Parent1{
    constructor(age:number){
        super(age)
        console.log(super.age)//没办法获取到受保护属性,但是可以获取到受保护的方法，如下
        console.log(super.getage())
    }
}


//readonly 只读
class UserInfo{
    readonly name:string
    constructor( name:string){
        this.name=name
        // this.name=name
    }
}
const userInfo=new UserInfo('list')
userInfo.name='kao'//报错，无法为“name”赋值，因为它是只读属性


//参数属性
class A{
    constructor(readonly name:string){}//和上面的效果一样
}
const a=new A('qq')


//static 静态属性
class Parent2{
    public static getage(){
        return Parent2.age
    }
    private static age:number=18
    constructor(){}
}
const pp=new Parent2()
console.log(p.getage())//报错，static只能从原型获取
console.log(Parent2.getage())


//abstract 抽象类
abstract class Peops{
    constructor(public name:string){}
    abstract priname():void
}
const k=new Peops()//报错，无法创建抽象类的实例，可通过继承来实例化
class Man extends Peops{
    constructor(name:string){
        super(name)
        this.name=name
    }
    public priname(): void {//父类有抽象方法，子类需要重新定义，属性也一样
        console.log(this.name)
    }
}
const m=new Man('qqq')
m.priname()//输出：qqq

映射类型

//映射类型
interface Info1{
    age:number
    name:string
    sex:string
}
type ReadonlyType<T>={//type需要=号，keyof只能在type中用
    readonly [P in keyof T]:T[P]
}
type ReadonlyInfo1=ReadonlyType<Info1>
let infoll:ReadonlyInfo1={
    age:18,
    name:'lison',
    sex:'man'
}
infoll.age=20//报错，无法为“age”赋值，因为它是只读属性
avatar
文章
阅读
粉丝