Day5 深入浅出TypeScript

ChrisorLoser
120 阅读3分钟

一、TypeScript和JavaScript对比

TypeScript:

  • JavaScript的超集，用于解决大型项目的代码复杂性
  • 强类型，支持静态和动态类型
  • 可以在编译期间发现并纠正错误
  • 不允许改变变量的数据类型


JavaScript:

  • 一种脚本语言，用于创建动态网页
  • 动态弱类型语言
  • 只能在运行时发现错误
  • 变量可以被赋值成不同类型

关系：
JS∈TS

二、TS基础

1.数据类型
①boolean、number、string
②枚举enum
③any、unknown、void
④never
⑤数组类型[]
⑥元组类型tuple
定义：TS定义函数类型时要定义输入参数类型和输出类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型

    function add(x:number[]):number
    function add(x:string[]):string
    function add(x:any[]):any{
        if(typeof x[0]==='string'){
            return x.join()
        }
        if(typeof x[0]==='number'){
            return x.reduce((acc,cur)=>acc+cur)
        }
    }

2.TS基础-接口
定义：接口是为了定义对象类型。
特点：

  • 可选属性：？
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性
    总结：接口很灵活
    interface Person{
        name:string  
        age:number
    }
    
    const p1:Person={
        name:'lin',
        age:18
    }

TS的写法和JS差不多，增加了一些定义。
特点：

  • 增加了public、private、protected修饰符
  • 抽象类： 只能被继承，不能被实例化
    作为基类，抽象方法必须被子类实现
  • interface约束类，使用implements关键字


    3.TS进阶-高级类型 ①.联合类型 |
    ②.交叉类型 &
    ③.类型断言
    ⑤.类型别名(type VS interface)
  • 定义：给类型起个别名
  • 相同点：
  1. 都可以定义对象或函数
  2. 都允许基础
  • 差异点： 1.interface是TS用来定义对象，type是用来定义别名方便使用；
    2.type可以定义基本类型，interface不行； 3.interface可以合并重复声明，type不行；

4.TS进阶-泛型-什么时候需要泛型？
官方定义:
软件工程中，我们不仅要创建一致良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。


在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。


基本定义：
1.泛型的语法是<>里面写类型参数，一般用T表示；
2.使用时有两种方法指定类型：
①.定义要使用的类型
②.通过TS类型推断，自动推导类型
3.泛型的作用是临时占位，之后通过传来的类型进行推导；

    function print<T>(arg:T):T{
        console.log(arg)
        return arg
    }
    
    print<string>('hello')
    print('hello')
  • typeof:获取类型
    interface Person{
        name:string;
        age:number;
    }
    const tom:Person={name:"tomlinker",age:30};
    type Tom=typeof tom;
  • keyof:获取所有键
     interface IPerson{
         name:string;
         age:number;
     }
     
     let type1:IPerson['name']
     let type2:IPerson['age']
  • Partial:将类型属性变为可选
  • Required:将类型属性变为必选
  • Readonly:将类型属性变为只读
  • Pick、Record...
  • declare:三方库需要类型声明文件
  • .d.ts:声明文件定义
  • @types:三方库TS类型包
  • tsconfig.json:定义TS的配置
    示例：
    泛型约束后端接口类型：
    import axios from 'axios'
    
    interface API{
        '/book/detail':{
            id:number,
    },
        '/book/comment':{
            id:number
            comment:string
    }
}
 
    function request<T extends keyof API>{  (url:T,obj:API[T])
    }
    
    request('/book/comment',{
        id:1,
        comment:'非常棒！'
    })

TypeScript是比JavaScript更方便，运用更广的一种语言。多多学习，及时掌握，有助于提高今后的工作效率。

avatar
文章
阅读
粉丝