TypeScript入门一篇就懂(一) ｜ 青训营笔记

joey不熬夜
64 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

引言

为什么要学TypeScript(ts)？

学习ts是趋势，2022 年了，TS 已经快成为一个前端的基本技能了。同几件前相比，jquery 时代快结束时，你不会 vue 或者 react一样，根本找不到工作。如今别说 React，连 Vue 的默认版本都已经是 Vue3 了，Vue3 和 Typescript 是绑在一起的，再过两年，除了祖传老项目，新项目就是清一色的 TS 了。接下来就让我们走进ts的世界

什么是ts？

TypeScript是一种由微软开发的自由和开源的编程语言。
它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

总之，ts就是总结并拓展了js的一些功能，解决了一些js的缺点，以下能更直观展现二者的区别：

TypeScriptJavaScript
JavaScript 的超集，用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页。
强类型，支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋予不同类型的值

TS的基本数据类型

这里将TS的数据类型简单的进行下归类：

  • 基本类型：string、number、boolean、symbol、bigint、null、undefined
  • 引用类型：array、 Tuple(元组)、 object(包含Object和{})、function
  • 特殊类型：any、unknow、void、nerver、Enum(枚举)
  • 其他类型：类型推理、字面量类型、交叉类型

基本类型

//字符串
let str: string = "Domesy"

// 数字
let num: number = 7

//布尔
let bool: boolean = true

//symbol
let sym: symbol = Symbol();
 
//bigint
let big: bigint = 10n
    
//null
let nu: null = null

//undefined
let un: undefined = undefined

当然还有一些其他类型不继续补充，可以参考文章：(23条消息) TS入门学习_卖猹的西瓜君的博客-CSDN博客_ts的学习

TS泛型

泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。

软件工程中，我们不仅要创建一致的定义良好的 API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。
在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
设计泛型的关键目的是在成员之间提供有意义的约束，这些成员可以是：类的实例成员、类的方法、函数参数和函数返回值。
为了便于大家更好地理解上述的内容，我们来举个例子，在这个例子中，我们将一步步揭示泛型的作用。首先我们来定义一个通用的 identity 函数，该函数接收一个参数并直接返回它：

function identity (value) {
  return value;
}

console.log(identity(1)) // 1

现在，我们将 identity 函数做适当的调整，以支持 TypeScript 的 Number 类型的参数：

function identity (value: Number) : Number {
  return value;
}

console.log(identity(1)) // 1

这里 identity 的问题是我们将 Number 类型分配给参数和返回类型，使该函数仅可用于该原始类型。但该函数并不是可扩展或通用的，很明显这并不是我们所希望的。
我们确实可以把 Number 换成 any，我们失去了定义应该返回哪种类型的能力，并且在这个过程中使编译器失去了类型保护的作用。我们的目标是让 identity 函数可以适用于任何特定的类型，为了实现这个目标，我们可以使用泛型来解决这个问题，具体实现方式如下：

function identity <T>(value: T) : T {
  return value;
}

console.log(identity<Number>(1)) // 1

对于刚接触 TypeScript 泛型的读者来说，首次看到 <T> 语法会感到陌生。但这没什么可担心的，就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

image.png 参考上面的图片，当我们调用 identity(1) ，Number 类型就像参数 1 一样，它将在出现 T 的任何位置填充该类型。图中 内部的 T 被称为类型变量，它是我们希望传递给 identity 函数的类型占位符，同时它被分配给 value 参数用来代替它的类型：此时 T 充当的是类型，而不是特定的 Number 类型。

其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

K（Key）：表示对象中的键类型；  
V（Value）：表示对象中的值类型；  
E（Element）：表示元素类型。

参考文献

juejin.cn/post/687211…

以上是我近期总结的一些ts学习，希望对你有帮助~ 未完待续~

avatar
文章
阅读
粉丝