我的编程空间,编程开发者的网络收藏夹
学习永远不晚

TypeScript类型级别和值级别示例详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

TypeScript类型级别和值级别示例详解

对值级别编程类型级别编程区分

首先,让我们对值级别编程和类型级别编程进行重要区分。

  • 值级别编程让我们编写将在生产中运行的代码即运行期,并为我们的用户提供有用的东西。
  • 类型级别编程帮助我们确保代码在发布之前即编译期不包含错误,在运行期会被完全删除

JavaScript没有类型,所以所有JavaScript都是值级别的代码:

// A simple Javascript function:
function sum(a, b) {
  return a + b;
}

TypeScript允许我们将类型注释添加到JavaScript中,并确保我们编写的sum函数永远不会用数字以外的任何东西调用:

// Using type annotations:
function sum(a: number, b: number): number {
  return a + b;
}

但TypeScript的类型系统远比这强大得多。我们编写的真实代码有时需要是通用的,并接受我们事先不知道的类型。

在这种情况下,我们可以在尖括号<A,B,…>中定义类型参数然后,我们可以将类型参数传递给一个类型级函数,该函数根据输入类型计算输出类型:

// Using type level programming:
function genericFunction<A, B>(a: A, b: B): DoSomething<A, B> {
  return doSomething(a, b);
}

这就是类型级编程!DoSomething<A,B> 是一种用特殊编程语言编写的类型级函数,它与我们用于值的语言不同,但同样强大。让我们将这种语言称为类型级TypeScript。

// This is a type-level function:
type DoSomething<A, B> = ...
// This is a value-level function:
const doSomething = (a, b) => ...

类型级编程

类型级TypeScript是一种最小的纯函数语言。

在类型级别,函数被称为泛型类型:它们接受一个或多个类型参数并返回单个输出类型。下面是一个函数的简单示例,该函数使用两个类型参数并将它们包装在元组中:

type SomeFunction<A, B> = [A, B];

类型级别的TypeScript没有很多功能。毕竟,它是专门为你的代码做类型约束的!也就是说,它确实有足够的特性(几乎)图灵完备,这意味着你可以用它解决任意复杂的问题。

  • 代码分支:根据条件执行不同的代码路径(相当于值级别if/else关键字)。
  • 变量赋值:声明一个变量并在表达式中使用它(相当于值级别var/let关键字)。
  • 函数:可重复使用的逻辑单位,如我们在前面的示例中看到的。
  • 循环:通常通过递归。
  • 相等检查:==但适用于类型!
  • 还有更多!

这是我们将在接下来的章节中学习的语言类型的简要概述。现在,让我们开始第一次挑战吧!

挑战是如何工作的

在每一章结束时,你将有一些挑战需要解决,以将你的新技能付诸实践。它们看起来像这样:

namespace challenge {
  // 1. implement a generic to get the union
  // of all keys in an object type.
  type GetAllKeys<Obj> = TODO;
  type res1 = GetAllKeys<{ a: number }>;
  type test1 = Expect<Equal<res1, "a">>;
}
  • namespace 是一个鲜为人知的TypeScript功能,它可以让我们在专用范围内隔离每个挑战。
  • TODO 是占位符。这是您需要更换的!
  • res1=。。。 是泛型为某些输入类型返回的类型。您可以用鼠标将其悬停以检查其当前
  • type test1=Expect<Equal<res1,…>> 是类型级单元测试。用于判断TODO部分的代码是否正确

在此之前你要先定义好Expect和Equal

type Expect<T extends true> = T;
type Equal<X, Y> = (<T>() => T extends { [k in keyof X]: X[k]; } ? 1 : 2) extends <T>() => T extends { [k in keyof Y]: Y[k]; } ? 1 : 2 ? true : false;

挑战

准备好迎接你的第一个挑战了吗?出发:


namespace genericFunction {
  function identity(a: TODO): TODO {
    return a;
  }
  let input1 = 10;
  let res1 = identity(input1);
  type test1 = Expect<Equal<typeof res1, number>>;
  let input2 = "Hello";
  let res2 = identity(input2);
  type test2 = Expect<Equal<typeof res2, string>>;
}

namespace safeHead {
  function safeHead(array: TODO[], defaultValue: TODO): TODO {
    return array[0] ?? defaultValue;
  }
  let input1 = [1, 2, 3];
  let res1 = safeHead(input1, 0);
  type test1 = Expect<Equal<typeof res1, number>>;
  let input2 = ["Hello", "Hola", "Bonjour"];
  let res2 = safeHead(input2, "Hi");
  type test2 = Expect<Equal<typeof res2, string>>;
}

namespace map {
  function map(array: TODO[], fn: (value: TODO) => TODO): TODO[] {
    return array.map(fn);
  }
  let input1 = [1, 2, 3];
  let res1 = map(input1, value => value.toString());
  type test1 = Expect<Equal<typeof res1, string[]>>;
  let input2 = ["Hello", "Hola", "Bonjour"];
  let res2 = map(input2, str => str.length);
  type test2 = Expect<Equal<typeof res2, number[]>>;
}

namespace pipe2 {
  function pipe2(
    x: TODO,
    f1: (value: TODO) => TODO,
    f2: (value: TODO) => TODO
  ): TODO {
    return f2(f1(x));
  }
  let res1 = pipe2(
    [1, 2, 3],
    arr => arr.length,
    length => `length: ${length}`
  );
  type test1 = Expect<Equal<typeof res1, string>>;
  let res2 = pipe2(
    { name: 'Alice' },
    user => user.name,
    name => name.length > 5
  );
  type test2 = Expect<Equal<typeof res2, boolean>>;
}

以上就是TypeScript类型级别和值级别示例详解的详细内容,更多关于TypeScript类型级别值级别的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

TypeScript类型级别和值级别示例详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

TypeScript类型级别和值级别示例详解

这篇文章主要为大家介绍了TypeScript类型级别和值级别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-02-27

TypeScript类型级别和值级别如何区分

这篇文章主要介绍“TypeScript类型级别和值级别如何区分”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“TypeScript类型级别和值级别如何区分”文章能帮助大家解决问题。对值级别编程类型级别
2023-07-05

TypeScript 类型级别示例介绍

这篇文章主要为大家介绍了TypeScript 类型级别示例介绍,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-02-27

TypeScript类型级别实例代码分析

本篇内容介绍了“TypeScript类型级别实例代码分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码如下:/** * Try assi
2023-07-05

TypeScript高级数据类型实例详解

这篇文章主要为大家介绍了TypeScript高级数据类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-01-30

TypeScript类型断言VS类型守卫示例详解

这篇文章主要为大家介绍了TypeScript类型断言VS类型守卫示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-16

Typescript中函数类型及示例详解

这篇文章主要介绍了Typescript中函数类型,主要包括常见写法、可选参数,默认参数及剩余参数,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-01-05

TypeScript中的交叉类型和联合类型示例讲解

交叉类型简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型,联合类型和交叉类型比较相似,联合类型通过|符号连接多个类型从而生成新的类型,本文就这两个类型结合示例代码详细讲解,感兴趣的朋友跟随小编一起学习吧
2022-12-31

BeanFactory和FactoryBean的区别示例详解

这篇文章主要为大家介绍了BeanFactory和FactoryBean的区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

PHP错误级别种类及解决方法详解

PHP错误级别种类及解决方法详解作为一种常用的服务器端脚本语言,PHP在开发过程中难免会遇到各种错误。了解PHP错误级别种类和相应的解决方法对于提高开发效率和代码质量至关重要。本文将详细讨论PHP错误级别种类和解决方法,并提供具体的代码示
PHP错误级别种类及解决方法详解
2024-03-09

编程热搜

目录