Typescript系列二(01)-常用类型

前端人

共 3285字,需浏览 7分钟

 ·

2021-08-26 15:18

上周的时候,我们一起学习了Typescript的一些知识,但是有的小伙伴说,内容有点复杂,所以本章节通过非常简单代码展示的形式来从头到尾学习Typescript,从简易到深入理解Typescript,一共分为两个章节,大致30篇文章,以下是本次章节的学习清单,记得关注公众号鬼哥一起学习

第一章节

  • Any Types 任何类型
  • Array Types 数组类型
  • Class Types 类别类型
  • Literal Types 文字类型
  • Comment Types 注释类型
  • Intersection Types 交叉类型
  • Maybe Types 缺省类型
  • Mixed Types 混合类型
  • Interface Types 接口类型
  • Module Types 模块类型
  • Object Types 对象类型
  • Primitive Types 原始类型
  • Tuple Types 元组类型
  • Type Aliases 类型别名
  • Type Annotations 类型注释
  • Type Casting Expressions 类型转换表达式
  • Typeof Types 字体类型
  • Union Types 工会类型
  • Variable Types 变量类型

第二章节

  • Utility Types 实用类型

开始

Any Types 任何类型

类型any可分配给每种类型,所以白话就是任意类型

使用如下:

function funA(obj: any{
  let info: number = obj.foo;
}

function funB(one: any, two: any): number {
  return one + two;
}

const userInfo:any = {userName:'鬼鬼',userAge:18}
Array Types 数组类型

存储于多种类型的集合,使用 Array < Type > Type,其中 Type 是数组中元素的类型

使用如下:

const arr1: Array<number> = [123];

const arr2: Array<boolean> = [truefalsetrue];


interface User {
    userName:string,
    userAge:number
}
const arr3: Array<User> = [{
    userName:'鬼鬼',
    userAge:18
}];

Class Types 类别类别

Class类型

使用如下:

class UserInfo {
    public userName: string;
    public userAge: number;
    constructor(userName:string,userAge:number){
        this.userAge=userAge;
        this.userName=userName;
    }
  }

const userInfo: UserInfo = new UserInfo('鬼鬼',18);




class User {
  public userName: string;
  public userAge: number;
}

class UserInfo extends User {
  constructor(userName: string, userAge: number) {
    super();
    this.userAge = userAge;
    this.userName = userName;
  }
}

const userInfo: UserInfo = new UserInfo("鬼鬼"18);
const user: UserInfo = new User();

Literal Types 文字类型

直接使用文字当做类型。然后这个类型的变量就只能为这些值

使用如下:

type colors="success" | "warning" | "danger"

function getColor(name:colors{
    switch (name) {
      case "success" : return "green";
      case "warning" : return "yellow";
      case "danger"  : return "red";
    }
}

getColor("success");

关注公众号添加鬼哥微信

                            拉你进前端学习群一起学习

                     

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发,不妨:

  • 点个【在看】,或者分享转发,让更多的人也能看到这篇内容

  • 点击↓面关注我们,一起学前端

  • 长按↓面二维码,添加鬼哥微信,一起学前端



浏览 30
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报