发布于 2026-01-06 1 阅读
0

TypeScript 入门

TypeScript 入门

TypeScript 入门

TypeScript 入门

基础知识

TypeScript 是 JavaScript 的超集。这种开源语言基于 JavaScript,并添加了许多对开发者有利的新特性。它由微软开发,并于 2012 年首次公开发布。TypeScript 无法直接在浏览器或其他 JavaScript 环境中执行。TypeScript 代码必须先编译成普通的 JavaScript,这在某些人看来可能是一个缺点。然而,编译过程也带来了一些优势,例如错误检查。

编译

从技术上讲,TypeScript 会被转译成JavaScript。转译代码是指在相同的抽象级别上将代码从一种语言转换为另一种语言。而编译代码则是将代码从高级语言转换为低级语言。例如,Go 语言会被编译成机器代码。将 TypeScript 转译成 JavaScript 可以让开发者使用一些编译成 JavaScript 时需要使用变通方法才能实现的新特性。例如,请看以下 TypeScript 代码及其对应的转译后的 JavaScript 代码:

JS 与 TS 代码

此截图中的代码取自 TypeScript 官网的快速教程。可以看到,编译后的 JS 代码冗长得多,也不够清晰。TypeScript 的另一个特性是,如果代码中存在任何错误,都会在编译过程中显示给开发者。例如,如果调用一个没有参数的函数,而该函数期望一个字符串作为参数,则会抛出一个错误,提示“” error TS2554: Expected 1 arguments, but got 0.。TypeScript 还会显示错误发生的具体代码行号和位置:

greeter.ts:7:27 - error TS2554: Expected 1 arguments, but got 0.

7 document.body.innerHTML = greeter();
                            ~~~~~~~~~

  greeter.ts:1:18
    1 function greeter(person: string) {
                       ~~~~~~~~~~~~~~
    An argument for 'person' was not provided.


Found 1 error.

打字

TypeScript 允许开发者使用静态类型。虽然不是必需的,但它可以帮助开发者在编译时捕获错误。例如,如果您尝试将数组作为参数传递给一个期望接收字符串的函数,则会抛出以下错误:error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.以下是 TypeScript 中使用类型的一个示例:

let color: string = "blue";

以下是您可以使用的类型:

  • boolean
  • number
  • string
  • number[](这是针对数组的。请将 `<type>` 替换number为数组中的数据类型。数组也可以这样写Array<number> = [1, 2, 3]。)
  • 元组:允许您声明一个包含固定数量元素且元素类型固定的数组。例如:let a: [string, number];
  • enum允许您为一组常量指定名称。例如:enum Direction { Up: "UP", Down: "DOWN" }
  • any(当数据类型未知时,用 any 标记,这些值将在编译期间通过检查。)
  • void(这表示类型缺失。您只能将 null 或 undefined 赋值给此类型。)
  • undefined
  • null
  • never(用于永远不会出现的值,例如总是抛出错误的函数)
  • object(表示除基本数据类型之外的任何值)

TypeScript 中类型是可选的,可以在编译期间进行推断。

安装 TypeScript

如果您想安装 TypeScript 并亲自尝试一下,以下是使用 npm 的命令:npm install -g typescript

当你在 .ts 文件中编写 TypeScript 代码后,需要tsc {your-file-name_here}.ts在命令行运行命令将其编译成 JavaScript。编译完成后,你会在目录下看到一个新的 .js 文件,其中包含编译后的 JavaScript 代码。

如果你之前用过 TypeScript,请告诉我你的想法。感谢阅读,祝大家一切平安!

洗手

参考
文章来源:https://dev.to/racheladaw/intro-to-typescript-4d8k