写点什么

学习 Typescript(二)

作者:bo
  • 2022 年 7 月 28 日
  • 本文字数:1163 字

    阅读完需:约 4 分钟

类型推论

联合类型

let numberOrString: number | stringnumberOrString.toString()	// 联合类型的共有属性和方法
复制代码

类型断言

使用非共有属性和方法时,利用 as 关键字,将变量看作为某个类型,或利用 typeof 判断类型

// union typeslet numberOrString: number | string
function getLength(input: string | number): number { const str = input as string if (str.length) { return str.length } else { const number = input as number return number.toString().length }}
//type guardfunction getLength2(input: string | number): number { if (typeof input === 'string') { return input.length } else { return input.toString().length }}
复制代码

枚举 enums

// 数字枚举,枚举成员会被赋值为从第一个值(默认为0)开始递增的数字enum Direction {    Up,    Down,    Left,    Right,}console.log(Direction.Up)   // 0console.log(Direction[0])   // Up
// 字符串枚举enum Direction { Up = 'UP', Down = 'DOWN', Left = 'LEFT', Right = 'RIGHT',}const value = 'UP'if (value === Direction.Up) { console.log('go up!')}
// 常量枚举,可减少性能const enum Direction {...}
复制代码

泛型 Generics

泛型基础

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

function echo<T>(arg: T): T {  return arg}
const result = echo(true)
function swap<T, U>(tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]]}const result2 = swap(['string', 123])
复制代码

约束泛型

在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法

Typescript中的extends关键字-技术圈 (proginn.com)

interface IWithLength {  length: number}
function echoWithLength<T extends IWithLength>(arg: T): T { console.log(arg.length) return arg}
const str = echoWithLength('str') // 要有length属性const obj = echoWithLength({ length: 10, width: 10})const arr2 = echoWithLength([1, 2, 3])
复制代码

类中应用

class Queue<T> {  private data = [];  push(item: T) {    return this.data.push(item)  }  pop(): T {    return this.data.shift()  }}const queue = new Queue<number>()queue.push(1)console.log(queue.pop().toFixed())
复制代码

接口中应用

interface KeyPair<T, U> {  key: T  value: U }let kp1: KeyPair<number, string> = { key: 1, value: "string"}let kp2: KeyPair<string, number> = { key: 'str', value: 2 }let arr: number[] = [1,2,3]let arrTwo: Array<number> = [1,2,3]		// Array内置泛型
复制代码


发布于: 14 分钟前阅读数: 4
用户头像

bo

关注

还未添加个人签名 2022.07.11 加入

还未添加个人简介

评论

发布
暂无评论
学习Typescript(二)_前端_bo_InfoQ写作社区