使用 React 学习 TypeScript - 第一部分

⚡TL;DR：了解什么是类型、类型注释、为什么使用它们以及如何使用它们可以帮助您在开发过程中发现错误，同时提高代码质量和可读性。

两周前，我决定学习 TypeScript，于是开始通过创建TEDFlix来学习它。它与 React 集成，可以从官方Tedx Talks YouTube 频道获取视频供大家观看。为什么选择 TEDFlix？听起来很有趣，说实话，我实在想不出什么好主意了 😛

在这个由两部分组成的系列中，我想分享我从这个项目中学到的东西。

在深入探讨之前，我先从 TS 官方网站上简单介绍一下 TypeScript (TS) 的定义。

“TypeScript 是 JavaScript 的类型超集，可以编译为纯 JavaScript。”

现在，让我向您概述一下该应用程序的功能以及 React 端的结构。

它是一个单页应用，包含视频播放器、相关演讲列表和搜索栏，所有这些均以独立的 React 组件构建。页面加载时，它会从 JSON 文件获取默认演讲列表，而不是从 YouTube 获取，以避免在页面被大量用户加载时超出 YouTube API 的每日使用配额。该应用仅在搜索演讲时才与 YouTube 通信。

好的，我们开始吧。

一、项目设置

我使用 TypeScript 的 Create React App 生成了项目

create-react-app my-app-name --typescript

我如何在这个应用中使用 TypeScript？

由于我是 TS 的初学者，我首先学习的是该语言的语法和特性，特别是类型、类型注解和接口。在这篇文章中，我将只讨论类型和注解。

什么是类型？

由于 TypeScript 是一种类型化语言，这意味着我们可以指定/注释变量、函数参数和对象属性的类型。

我个人理解，类型是变量可以访问的所有属性和方法的符号/表示。number这意味着，如果我们给变量添加一个类型，TS 编译器就知道该变量具有并且只能访问数字所具有的所有属性和方法。

使用这种格式将类型注释到变量、参数或属性上:type。
例如，let name: string。

TS 中有很多可用的类型，但是，在这个应用程序中，这些是我使用过的：

原始类型——数字、字符串、布尔值
数组[]-在类型后添加（例如let names: string[]）
视频- 我创建的用于表示视频对象属性的接口或自定义类型

请参阅此处以获取更全面的类型列表。

为什么我们要关心注释类型？

类型是你能拥有的最好的文档形式之一。这对于下一个需要阅读你代码的开发人员（也可能是未来的你）非常有帮助。
它有助于 TypeScript 编译器帮助你。如果你将一个变量注释为数字，而几行之后又赋予它一个字符串值，编译器就会报以下错误。

let x: number = 123;
x = '123'; // Error: cannot assign a `string` to a `number`

即使我们:number从变量中删除注释x，编译器也会给出同样的错误，因为TypeScript 是智能的*。

*如果声明一个变量时没有指定其类型，TypeScript 将根据分配给该变量的初始值来确定该变量的类型。

这称为类型推断。

“那么如果存在类型推断，那么我为什么还要费心注释变量呢？”

类型推断并不总是有效。

一个示例场景是当您延迟变量的初始化时，如下所示。

let age;

// a few lines later
age = 12; 
// The compiler will NOT give an error even 
// if we assign a non-numeric value to `age`
age = 'Ana';

如果您延迟变量初始化而不为其注释类型，则该变量将自动具有与其关联的类型，any因为 TS 编译器不知道age以后会具有什么样的属性。

any应尽可能避免使用类型的变量。这违背了 TS 类型系统背后的理念：我们希望在开发过程中尽可能多地捕获错误。为什么？因为编译器无法对类型进行错误检查any。

请记住，使用类型来帮助 TS 编译器帮助您。

类型注释在应用程序中如何使用？

除了在变量声明中使用类型之外，我还在函数声明中使用注释。

函数可以用以下方式注释：

1.箭头函数

const add = (a:number, b:number):number => {
 return a + b;
}

// or
const add: (a: number, b: number) => number = (a, b) => {
  return a + b;
};

2. 非箭头函数

function add(a:number, b:number):number {
 return a + b;
}

在这两个例子中，如果函数返回一个字符串或任何非数字的类型，编译器就会给出错误，因为它期望的是一个数字。

为了获取频道的视频，我创建了一个名为的函数，fetchChannelVideos它接受一个布尔值标志，指示是否从 JSON 文件中获取默认视频，以及一个搜索查询字符串。这两个参数都是可选参数（通过?在属性名称后添加）并以接口的形式表示。稍后我将解释什么是接口，但现在让我们仔细看看这个函数是如何注释的。

interface FetchVideosArguments {
 shouldUseDefaultVideos?: boolean;
 searchQuery?: string;
}

export const fetchChannelVideos: (
 args: FetchVideosArguments
) => Promise < Video[] > = async ({
 shouldUseDefaultVideos = false,
 searchQuery
}) => {};

=在赋值运算符 ( )的左侧，

const fetchChannelVideos: (args: FetchVideosArguments) => Promise <Video[]>

fetchChannelVideos我们注释的是声明的变量，而不是赋值的函数。我们告诉 TS 编译器，这个变量将被赋值给一个函数，该函数具有这些类型的参数和返回值。

而右边部分=则是所分配的功能。

async ({
 shouldUseDefaultVideos = false,
 searchQuery
}) => {};

要注释函数本身，我们必须指定它的参数及其类型以及返回值。

那么为什么我没有将函数注释为分配给呢fetchChannelVideos？因为 TypeScript 很聪明。

看到我将函数分配给带注释的变量，它可以推断出该函数将具有相同的参数名称和类型以及返回值，否则如果我添加或指定不同的参数名称或返回不同的值，它就会出错。

*函数参数和返回值是推断出来的

但是，如果我直接导出函数而不将其分配给变量，那么我必须像下面这样对其进行注释。

export async function fetchChannelVideos({
 shouldUseDefaultVideos = false,
 searchQuery
}: FetchVideosArguments): Promise<Video[]> {
 // function body
}