TypeScript速记指南

234 阅读2分钟

「这是我参与2022首次更文挑战的第14天,活动详情查看:2022首次更文挑战」。

基础类型

  • 常用:boolean、number、string、array、enum、any、void
  • 不常用:tuple、null、undefined、never

声明变量写法let [变量名] : [类型] = 值;

基础声明

let str: string = "hi";
let num: number = 99;
let bool: boolean = false;

声明变量为数组

// 在元素类型后面加上[]
let arr: number[] = [1, 2];

// 或者使用数组泛型
let arr: Array<number> = [1, 2];

联合类型数组

声明包含多种类型的数组

let arr:(number | string)[];
//这个arr数组中既可以存储数值类型的数据, 也可以存储字符串类型的数据

指定数组对象成员类型

interface User{
    name:string,
    tel:number
}
let userArr: User[] = [{name:'CMCC',tel:10086}]

元组类型Tuple

声明已知元素数量和类型的数组

//对应位置的类型需要相同。
let x: [string, number];
x = ['Axjy', 1];    // 运行正常
x = [1, 'Axjy'];    // 报错

空值void

表示方法没有返回值

function hello(): void {
    console.log('没有返回值')
}

enum枚举

提高代码可维护性,统一维护某些枚举值

enum sizeEnum {
  XS = 'XS',
  SM = 'SM',
  MD = 'MD',
  LG = 'LG',
  XL = 'XL',
  XXL = 'XXL',
}

类型别名

一般用于给一个联合类型取新的名字,方便记忆,也更具有描述性。

type c = number | string | boolean
let a :c= 10 

接口Interfaces的使用

接口(Interfaces)是对行为的抽象,也常用于对「对象的形状(Shape)」进行描述。


//定义一个接口IPerson
interface IPerson{
      firstName:string, 
      lastName:string, 
      sayHi: ()=>string
  }
  
//定义一个变量customer,它的类型是IPerson
//customer实现接口 IPerson 的属性和方法
let customer: IPerson = {
    firstName:"Axjy" ,
    lastName:"Bxjy",
    sayHi: ():string =>{return "hello word"}
  }

接口( Interface )与类型别名(Type aliases)可以认为是同一概念的两种语法

类比:函数定义与函数表达式

区别:类型别名更为通用,其右侧可以包含类型表达式(类型联合、类型交叉、条件类型),但接口右侧只能是某种结构( {...} )

可选属性

某些属性我们可能不是必须的,但是如果存在该属性,又希望能约束它的类型则可以是要可选属性。

interface Animal {
     name: string, 
     color?: string
}

const test: Animal = { name: "dog"}

//如果不是可选,则interface里面的属性都必填。

其他

未完待续.....


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 TypeScript入门之预备知识

👉 TypeScript入门之基础知识

👉 TypeScript入门之进阶篇

👉 TypeScript入门之高级篇