这篇文章主要介绍“TypeScript类型级别和值级别如何区分”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“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类型级别和值级别如何区分”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。