TypeScript 概述 - 学习笔记｜青训营

墨绿BG
130 阅读3分钟

📝 TypeScript 概述

TypeScript，通过静态类型检查提前验证您的 JavaScript 代码。

JavaScript 是一种动态类型语言，允许我们执行各种疯狂的操作，比如引用不存在的变量或者使用未知结构的对象。

someObject.whatever(); // DOES NOT EXIST

代码在浏览器中解释执行，但倘若代码有错误，直到运行时浏览器才会抛出错误。

image.png

而 TypeScript 通过引入型别扩展了 JavaScript，防止此类错误发生。

image.png

✒️ 什么是 TypeScript？

TypeScript 是 JavaScript 的一个严格超集，这意味着在打开 .ts 文件时，您可以编写普通的 JavaScript 代码，所有额外的特性都是可选的。

在上方的示例的代码中，IDE 会提供关于使用不存在变量的反馈，而不是等到在公司损失了数千百万元的资产几周后，才轮到工程师回头在堆栈跟踪中修复这些白痴问题。

我们可以立即在此处修复这类 bug，我们之所以能获得即时反馈，是因为 TypeScript 的行为类似于编译语言，其中 JavaScript 是编译目标。

您可以使用 tsc 命令运行 TypeScript 编译器，它将把 .ts 文件转译为纯 JavaScript，并且您可以选择任何 JavaScript 的版本。

tsc indes.ts

image.png

这意味着您若需要面向古老的浏览器时，可以使用 JavaScript 的最新语法特性，而不必担心它们是否在旧环境中得到支持。

image.png

✒️ 如何使用 TypeScript？

您的 TypeScript 项目可能会有一个 tsconfig 文件，它提供了无限种方式来自定义编译器的行为

{
    "compilerOptions": {
        "module": "systme",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../dist/bundle.js",
        "sourceMap": true,
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

，但 TypeScript 的主要目标是实现静态类型。

TypeScript 实现这一目标的一种方式是允许您使用类型对代码进行注解。我们可以使用冒号后跟类型（如 string、boolean 或 number）来对变量进行强类型化，这被称为显式类型。

const appName: string;
const appType: boolean;
const appValue: number;

如果我们试图将错误类型的值赋给变量，就会出现错误。

image.png

另外，如果我们设置了初始值，它将隐式推断出类型。

const appName = 'BlackishGreen03'; // let appName: string;

然而，可能会有一些情况下，您希望避免这种行为，此时可以使用 any 类型进行注解，就可以进行相对松散的类型定义。

let appName: any = 'BlackishGreen03'; 
appName = 114514;

当你在使用数组时，可以利用方括号来对列表进行强类型化。

const appList: number[] = [1, 2, 3];

此外，您还可以定义自己的自定义类型和接口，这在处理对象时尤其强大。在这里，car 接口定义了对象上的各种属性类型，然后我们可以将接口应用于普通的 JavaScript 对象。

interface Car {
    year: number;
    model: string;
    electric: boolean;
}

拥有强类型代码的优点是我们在IDE中随处都有自动补全。我们不必来回跳转到文档或者查找堆栈跟踪，以弄清楚代码为什么有时候不起作用。

image.png

✒️ 结论

这次又是一篇短文，因为最近累累病又发作了。

这篇就纯粹是给完全新手看的那种 TS 简介，所以就为达要求简单凑凑字数发上来了。老样子，对内文有什么疑惑直接尽管在下方提出来，我会尽快回复或修改，就这样，8888

avatar
文章
阅读
粉丝