likes
comments
collection
share

TS-开篇：初识TypeScript

作者站长头像
站长
· 阅读数 16

黑缎缠目

作为一个词语，“ 活着”在我们中国的语言里充满了力量，它的力量不是来自于喊叫，也不是来自于进攻，而是忍受，去忍受生命赋予我们的责任，去忍受现实给予我们的幸福和苦难、无聊和平庸。---《活着》

Atwood定律

任何可以使用JavaScript编写的应用最终都会使用JavaScript编写!

概述

新技术的出现是为了弥补原有技术的缺憾, js不支持类型检测。所以ts孕育而生，ts相较于js增加了类型检测机制增强了代码的健壮性。 我个人感觉学好ts最关键的就是充分理解各种类型之间的关系以及各种类型使用时的各种细节, ts目的是在于基于js增加了类型检测之后变得更好用了. 而不是更加臃肿, 但有些规则的设立是比较奇怪的它们都取决于ts的内部规则, 目的是为了让ts更加灵活使用。

ts的定义: TS源于JS, 高于JSTypeScript是拥有类型的JavaScript超集，它可以编译成普通、干净、完整的JavaScript代码。说人话就是增加了类型检测的JavaScript, 变成JavaScriptPULS版。所以ts拥有js所以特性, 支持各种es标准, 甚至新特性领先于js。所以使用起来无需担心适配兼容性问题。

上手阶段

通过Git安装ts:npm install typescript -g, 安装完成后需要安装ts运行环境, 前期代码演练时可以先安装ts-node库: npm install ts-node -g,npm install tslib @types/node -g, 后期做项目时通过webpack，配置本地的TypeScript编译环境和开启一个本地服务。

TS-开篇：初识TypeScript

变量声明

  • 细节一: ts表示字符串类型的关键字是string, 是String类创建出来的实例
  • 细节二: const声明的变量为字面量类型, let和var声明的变量类型为类型推导出来的类型的一般类型
  • 细节三: ts具有类型推导, 所以开发中一般省略类型注解, 但必要时可以写
//这里和就是唯一不同的就是增加的类型注解
const name: string = "messi"
const arrs: number[] = [1, 2, 3, 4]

函数 参数-返回值 类型注解

返回值类型一般不写, 使用类型推导

function foo(num: number): number {
    return num * num
}

数组类型注解

const names: string[] = ["messi", "curry", "james", "kobe"]

TS中的基本类型

TS-开篇：初识TypeScript

any类型

无限制变量的类型, 对any类型的变量进行任何的操作，包括获取不存在的属性、方法, 这相当于直接让ts变回类型检测宽松的js

unknown类型

不确定的变量类型, unknow类型和any类型相似, 但在对unknow类型的值上进行任何操作都是非法的

应用场景

  • 处理动态数据: 外部数据源（例如 API 响应、JSON 文件等）获取数据时，往往不清楚该数据的确切类型。此时，我们可以使用 unknown 类型来处理这些数据
function parseData(data: unknown) {
  if (typeof data === "string") {
    return JSON.parse(data);
  } else if (Array.isArray(data)) {
    return data.map(parseData);
  } else if (typeof data === "object" && data !== null) {
    const result = {};
    for (const [key, value] of Object.entries(data)) {
      result[key] = parseData(value);
    }
    return result;
  } else {
    return data;
  }
}

void类型

用于描述函数无返回值的情况, 那么函数的返回值就是void类型

never类型

表示这个变量永远不可能出现的值。需要注意的是，never 类型是所有类型的子类型，它表示没有任何值，也包括 undefined 和 null。因此，在使用 never 类型时需要注意与其他类型的兼容性问题。

应用场景

  • 异常处理函数: 异常处理函数用于抛出异常, 永远不需要返回其他结果, 所以函数返回值类型使用never
function error(message: string): never {
  throw new Error(message);
}
  • 无限循环函数: 表示函数无限循环, 永远不可能返回值, 所以函数的返回值设置了never类型
function infiniteLoop(): never {
  while (true) {
  }
}

tuple类型

元组类型, 和数组类似, 通常存放不同类型的数据

应用场景

  • 特定参数和返回类型的函数
传入一个订单信息在函数内部处理
function processOrder(order: [string, number, boolean]): string {
  return "Order processed successfully!";
}
const res: [string, number, boolean] = ["orange", 7, true];

枚举类型

将一组可能出现的值，一个个列举出来，定义在一个类型中。开发中只要遇到需要表达一组常量集合的地方，都可以考虑使用枚举类型来优化代码实现。例如表示固定常量的集合, 例如: 方向、颜色、大小、状态等

enum SkillS {
  SKILL1,
  SKILL2,
  SKILL3
}

//获取索引, 默认从0开始依次往下递增, 也可以直接对枚举类型进行赋值
const enumSkill: Skill = Skill.SKILL1
enum Section {
  LEFT = "left",
  TOP = "top"
}