TypeScript核心用法-＞进阶

目录

为什么要选择Ts?

TS核心

1.类型推断

2.类型注解

3.类型断言

4.ts当中的基础类型

5.ts当中的联合类型

6.数组，元组，枚举

7.函数

8.接口

9.类型别名：type

10.泛型

TS进阶

1.typescript中的函数重载

2.接口继承

3.类的修辞符

4.存取器属性

5.类实现接口

---

为什么要选择Ts?

1.加上了类型系统，对人好，对机器，对维护都很好，增强了代码的双层可读型;对于编译器来说，类型定义可以让编译器揪出隐藏的 bug;
2.类型系统+ 静态分析检查+智能感知 提示，书写方便，使大规模的应用代码质量更高。 bug 少，维护方便，就连重构也安心;
3.给应用配置、应用状态、前后端接口及各种模块定义类型，整个应用由类型定义组成，多人协作更为方便、高效和安全。

TS核心

1.类型推断

let str='abc'  ✔️
str=10         ❌

因为typescript会根据你给变量存放的初始值来进行变量类型限定，也就是，刚开始给定的是字符串，那么这个变量之后就只能存放字符串值,这在开发中其实很有意义，因为变量一旦分配了字符串值，意味着之后可能会书写一些字符串相关功能，比如方法等相关的操作，如果突然分配了一个数值，也就意味着，针对字符串的操作都会出现错误，因此为了避免这种情况，需要使typeScript的类型约束功能。

2.类型注解

也是比较推荐的一种写法

let str:string ='abc'  ✅

str='abc'              ✅

也就是书写变量的时候，给变量一个类型的限定，可以通过冒号方式来写，即第一种，也可以初始不给值，先做一个预声明，声明一个变量，即第二种。

3.类型断言

let numArr=[1,2,3]
//下面的操作是进行一个数组的内容筛选
const result=numArr.find(item=>item>2)as number  ✅

其中最后添加一个 as number ，就是直接断言这句话操作的最终结果会是一个number类型。

比如，如果最终结果是undefined，我们还要拿最终结果去做计算就会出现这样的问题：

undefined*5=NaN not a number  

4.ts当中的基础类型
 

let v1:string='abc'
let v2:number=10
let v3:boolean=true
//以下两种不常用
let nu:null=null; 
let un:undefined=undefined

5.ts当中的联合类型

联合类型又分为两种：

1.限制类型

//最终分配为字符串或者为空
let v4:string|null]=null ;

2.具体值的限定

//也就是希望运算的值只能被分配为以下几个值之一
let v5: 1|2|3=2  ✅
let v5: 1|2|3=5  ❌

6.数组，元组，枚举

1.定义一个数组

let arr:number[]=[1,2,3]
let arr1:Array<string>=['a','b','c']

2.定义一个元组

元组，也可以存储多个数据，但是它限定了你存储的数据的个数，以及每个数据的类型

 声明一个元组：

let  t1:[number,string,number？]=[1,'a',2]//添加一个问号，表示可选
t[0]='a'❌
t[0]=100 ✅

 3.枚举类型（enum）

enum MyEnum{
 A,
 B,
 C
}
console.log(MyEnum.A)
console.log(MyEnum[0])

7.函数

引入void:

void 类型，类似于null和undefined,在使用的时候，void只能被分配undefined值（严格模式），一般直接使用的时候，很少给变量赋这个值，通常是在函数，比如一个函数没有返回值的时候，默认是undefined，此时会使用void

function myFn(a,b):void{//表示没有返回值

}

function myFn(a,b):number{
return a+b
}
//给参数分配类型
function myFn(a：number,b:string ){
return 100
}
//将参数设置为可以选择的
//...rest剩余值是一个数组结构
function myFn(a：number,b:string,c?boolean,...rest:number[]):number{
return 100
}
const f=myFn(20,'abc',true,1,2,3);

8.接口

interface 接口，通常进行一个对象的定义
interface Obj{
    name:string
    age:number
}
const obj: Obj={
    name:'a',
    age:10
}
const obj2: Obj={
    name:'a',
    age:10
}

9.类型别名：type

type MyUserName=string|number
let a:MyUserName=10

10.泛型

function myFn(a:number,b:number):number[]{
    return [a,b]
}

function fun<T>(a:T,b:T):T[]{
    return [a,b]
}
//按照数值的方式进行使用
fun<number>(1,2)
//按照字符串的方式进行处理
//1.
fun<string>('a','b')
//2.
fun('a','b')//因为ts能智能识别

TS进阶

1.typescript中的函数重载

typescript当中的函数重载（js当中其实不支持函数重载，ts给支持了），也就是创建多个名称一样，但是参数类型和反应值不同的函数，以便能达到编写一个函数实现多种功能的目的

function hello(name:string):string
function hello(age:number):string   
function hello(value:string|number):string{
  if(typeof value==='string'){
    return `你好，我的名字是`+value
  }else if(typeof value==='number'){
    return `你好，我的年龄是${value}`
  }else{
    return '非法格式'
  }
}

hello('abc')
hello(18)

2.接口继承

interface Parent{
    prop1:string
    prop2:number
}
interface Child extends Parent{
    prop3:string
}
const myObj:Child={
    prop1:'',
    prop2:1,
    prop3:'3'
}

3.类的修辞符

class Article{
    title:string//不写也默认是public,建议写上，这样代码的可读性就变强了
    content:string
    aaa?:string//aaa是可选的,可选属性
    bbb=100 //可以使用等号来设置默认值
    //在ts中还针对对象的成员，进行了一些可访问性的配置方式，比如titile就是一个公开的，可以在任意位置访问的属性 ，无论是类自身内部
    //还是类的实例（即外部），或者是继承的子类中，都是可以正常访问实例的title属性的 

    private temData?:string
    protected innerData?:string
    static author:string
    private static auth:string//staic在privte,protected.public这三个的后边
    private static readonly authorr:string='无忧'//只读属性
    //temData是私有属性，只能在类的article内部进行访问。
    constructor( title:string,content:string){//由此可见，title和content都是必选的
        this.title=title
        this.content=content
    }
}
const a=new Article('标题','内容')
Article.author
class B extends Article{
    constructor(title:string,content:string){
     super(title,content)
    // this.temData 私有属性不可用
    this.innerData
    }
}
//a.innerData   //属性"innerData"受保护，只能在类Article及其子类当中访问

4.存取器属性

类似在操作中使用的getter和setter,只不过，ts中设置了一种单独的设置方式

class User{
     private _password:string=''
     get password():string{
       return '*****'
     }
     set password(newPass:string){
        this._password=newPass //也就是，可以设置，但是不能做读取这么一个功能
     }
} 
const u=new User()
console.log(u.password);//此时返回的是'******  '
/*可以发现，设置的私有属性_password和存取器属性password,区别就是一个下划线，这个其实可以自己定义，、
只是一般我们可以把这两个值关联到一起的时候，私有值对应一个存储器，可能是比较常用的一种形态*/
//抽象类
//通常作为子类基类去使用的
abstract class Animal{
 name:string
 abstract maskSound():void
 move():void{
    console.log('移动');
    
 }
 //可以有抽象的属性和方法，也可以有普通的属性和方法
}

class Cat extends Animal{
    name:string='小猫'
    maskSound(): void {
         
    }
}
//抽象的成员，必须要在抽象类当中使用

5.类实现接口

interface AnimalL{
    name:string
    get sound():string
    makeSound():void
}
//类不可能继承自一个接口，接口本身是没有功能的，叫做实现
class Dog implements AnimalL{
    name:string='小狗'
    get sound(){
        return ''
    }
    makeSound(): void {
        
    }
}

 11