TypeScript 基础初学

目录

先决条件

使用 TypeScript 需要安装什么？

为什么选择 TypeScript 而不是 JavaScript？

TypeScript 在浏览器中能运行吗？

如何将 TypeScript 文件转换为 JavaScript 文件？

如何使用 TypeScript 构建现代前端应用程序？

如何输入函数的参数？

TypeScript 的基本类型有哪些？

如何输入函数的返回值？

如何输入对象？

如何创建可重用的类型？

如何输入数组？

如何输入元组？

如何输入函数？

如何输入集合和地图？

如何输入异步函数？

---

先决条件

• 具备初级水平的 JavaScript知识。需要了解变量、函数、对象以及 JS 的所有基本部分。
• 知道如何使用命令行。运行诸如npm install和之类的命令npm run build。

什么是 TypeScript？

TypeScript 是 JavaScript 的一个超集，是一套让编写 JavaScript 变得更加愉快的工具。
这些工具包括：

• TypeScript 语言.ts，用和文件编写.tsx。
• TypeScript 编译器，它通过 CLI 将 TypeScript 文件转换为 JavaScript 文件tsc。
• TypeScript 语言服务器，为您的 IDE 中的 TypeScript 体验提供支持。

使用 TypeScript 需要安装什么？

• 安装Node.js，请选择 LTS 版本。
• 代码编辑器，推荐VSCode。

为什么选择 TypeScript 而不是 JavaScript？

TypeScript 可以让 IDE 更加强大。它提供了自动完成、IDE 内错误检测以及更多强大的功能。

TypeScript 在浏览器中能运行吗？

TypeScript 使用了一些原生 JavaScript 所没有的语法。例如，TypeScript 有一个type关键字，而 JavaScript 没有。
由于浏览器只理解 JavaScript，因此它们无法运行 TypeScript 文件。
这意味着要在 Web 上使用 TypeScript，您需要将 TypeScript 文件转换为 JavaScript 文件，然后才能将它们发送到浏览器。

如何将 TypeScript 文件转换为 JavaScript 文件？

• 可以使用tscCLI 将 TypeScript 文件编译为 JavaScript 文件。您需要：
• 在 npm 上安装 TypeScript
• 向项目中添加一个tsconfig.json文件（告诉 TypeScript 要做什么）
• 运行tsc以将 TypeScript 文件编译为 JavaScript 文件

如何使用 TypeScript 构建现代前端应用程序？

如果要构建前端应用程序，则应使用前端框架。几乎所有现代框架都会开箱即用地支持 TypeScript。
如果您不确定选择哪一个，我推荐Vite作为一个很好的起点。
框架承担着将文件Vite转换成文件的责任以及许多其他的事情

如何输入函数的参数？

function greet(name: string) {
  console.log(
    "你好, " + name + "!!"
  );
}
greet(42);

Argument of type 'number' is not assignable to parameter of type 'string'.

TypeScript 的基本类型有哪些？

TypeScript 的基本类型是string、number、boolean和symbol。

let example1: string = "Hello World!";
let example2: number = 42;
let example3: boolean = true;
let example4: symbol = Symbol();

example1 = 42;

Type 'number' is not assignable to type 'string'.

如何输入函数的返回值？

//这将确保greet函数始终返回string
function greet(name: string): string {
  return 123;
}

如何输入对象？

function printCoord(pt: {
  x: number;
  y: number;
}) {
  console.log(
    "坐标的x值为 " + pt.x
  );
  console.log(
    "坐标的y值为 " + pt.y
  );
}
printCoord({ x: 3, y: 7 });

如何创建可重用的类型？

使用type关键字保存类型以供以后使用：

type Point = {
  x: number;
  y: number;
};

function printCoord(pt: Point) {}

这些被称为类型别名。

如何输入数组？

两种方式，使用以下[]语法

let example1: string[] = ["Hello World!"];
let example2: number[] = [42];

或者，使用以下Array<>语法：

let example1: Array<string> = ["Hello World!"];
let example2: Array<number> = [42];

如何输入元组？

元组是具有固定长度的数组，其中每个元素都有固定的类型。

let example1: [string, number] = [
  "Hello World!",
  42,
];

如何输入函数？

使用以下() => Type语法输入函数：

type MyFunction = () => string;
let example1: MyFunction = () => "Hello World!";

function addEventListener(
  event: string,
  callback: () => void
) {
  document.addEventListener(event, callback);
}

如何输入集合和地图？

Set<Type>您可以使用and语法来输入集合和映射Map<KeyType, ValueType>：

let example1 = new Set<string>();

example1.add(42);

Argument of type 'number' is not assignable to parameter of type 'string'.

let example2 = new Map<string, number>();

example2.set("id", "abc");

Argument of type 'string' is not assignable to parameter of type 'number'.

此语法允许将类型传递给函数 。如果没有这些类型，Map就Set无法理解它们应该是什么类型。

如何输入异步函数？

您可以使用以下Promise<>语法键入异步函数：

async function getGreeting(): Promise<string> {
  return "Hello World!";
}

如果你不使用Promise，TypeScript 将会出现错误：

async function getGreeting(): string {
  return "Hello World!";
}

The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<string>'?