TypeScript 基础 - 权威指南

在本文中，我们将学习一些 TypeScript 的基础知识，帮助你更好地开发 JavaScript 应用程序。TypeScript 基础知识 - 权威指南

什么是 TypeScript 以及我们为什么需要它？

因此，在深入研究 TypeScript 的概念之前，我们应该知道什么是 TypeScript 以及为什么需要它。

首先，TypeScript 是 JavaScript 的超集，主要提供可选的静态类型、类和接口。它的一大优势是能够让 IDE 提供更丰富的环境，方便 用户在编写代码时发现常见错误。

作为 Javascript 开发者，与 Java、C# 等其他语言相比，我们缺少了一件事，那就是TypeCheck。

与 JavaScript 不同，Java 等语言会在编译时检查定义变量的类型。这有助于在编译时解决许多错误。

为了解决 JavaScript 中的这个问题，引入了TypeScript 。

设置 TypeScript

TypeScript 仅用于开发目的。因为浏览器/JS 引擎除了 JavaScript 之外什么都不懂。

因此，我们需要在服务器/浏览器运行之前将 typescript 编译为 javascript。

这里有一篇文章解释了 Node.js 应用程序中 typescript 的完整设置和生产部署。

理解类型

类型在 JavaScript 中并不是什么新鲜事物。JavaScript 已经有了动态类型。它们是：

• 不明确的
• 无效的
• 布尔值
• 数字
• 细绳
• 象征
• 目的

但是，javascript 中的这些类型是动态的。javascript 在运行时检查变量的类型。

Typescript 不是在运行时检查类型，而是在编译时检查。静态类型预测动态类型的值。

基本静态类型

细绳

它是用单引号或双引号括起来的文本数据

const message: string = 'hello world';
console.log(message);

布尔值

此类型表示布尔值，即 true 或 false

const isType: boolean = false
console.log(isType);

数字

此类型表示变量中的整数值。数字类型支持四种类型的数字文字

const age: number = 40;
console.log(age)

大批

在 Typescript 中，有两种方法可以对数组进行类型检查。第一种方法是将[]添加到元素类型

let newArray: string[] = ["one", "two", "three"]
console.log(newArray)

第二种方法是使用关键字 Array 和类型，

let newArray: Array<string> = ["one", "two", "three"]
console.log(newArray)

枚举

枚举允许我们声明一组命名常量，即可是数字或字符串值的相关值的集合。

枚举主要有三种类型，

• 数字枚举
• 字符串枚举
• 异构枚举

enum Status {
    Inactive = 0,
    active = 1
}

console.log(Status.active)

enum Status {
    Inactive = "INACTIVE",
    active = "ACTIVE"
}

console.log(Status.active)

任何

如果变量类型未知并且我们不需要特定变量的类型检查器，那么可以使用任何类型。

let checkValue: any = true

checkValue = "Check";
checkValue = 14

空白

当函数中没有返回值时使用 void。如果函数没有返回数据类型，则使用 void。

const LogIt = (): void => {
    console.log("log")
}

类型推断

主要是，TypeScript 有一个特性，可以根据分配给变量的值来识别变量的类型，这被称为类型推断。

例如，

let userName = "String"

TypeScript 根据变量 userName 的值将其识别为字符串。如果为其分配类型编号，则会引发错误。

这个概念被称为类型推断。

界面

首先，Typescript 中的接口是一种检查对象类型的方法。如果我们想检查组中值的类型，接口是最好的选择。

例如，

interface userData {
    name: string,
    age : number
}

let AddUserDetails = ({ name, age }: userData): void => {
    let arr = [];

    arr.push({
        name,
        age
    })
}

AddUserDetails({ name : "Ganesh",age : 25});

这里，我们有一个名为AddUserDetails的函数，它接受两个参数，例如name和age。

要检查两个参数的类型，我们需要接口。因此，我们创建了一个接口userData并对其进行了类型检查。

如果我们传递第一个值作为数字，则会抛出错误。或者，我们可以定义any类型来传递值。

泛型

在 TypeScript 中，泛型使你能够创建可复用的代码组件，这些组件可以处理多种类型，而不是单一类型。例如，

const createNewArray = (value: string): Array<string> => {
    let output : Array<string> = [];

    output.push(value);

    return output;
}

这里，函数createNewArray接受一个string类型的参数并返回一个具有该值的数组。但是如果我们想创建一个number类型的数组该怎么办呢？

上述实现在该场景下会抛出编译错误。我们可以使用泛型来解决这个问题。

const createNewArray = <T>(value: T): Array<T> => {
    let output : Array<T> = [];

    output.push(value);

    return output;
}

let val = createNewArray<string>("fdfsd");

console.log(val)

上面的例子有一个泛型类型 T，它对应于传递给createNewArray函数的参数的类型。

T 是一个表示字符串的命名约定，因为我们在调用函数时传递的是字符串类型。

如果我们在调用函数/类时将类型更改为数字，它将动态地采用该类型。这就是泛型的美妙之处

实现泛型有不同的方法，我们可以在接口、类和类型泛型中实现它。

结论

老实说，我们仅仅触及了 TypeScript 的表面。我们将在接下来的文章中更深入地讨论这个概念，在此之前，您可以参考一些关于 TypeScript 的精彩文章。

TypeScript 手册（官方 TypeScript 文档）

TypeScript 深度探索（在线 TypeScript 指南）

理解 TypeScript 的类型注解（很棒的 TypeScript 入门文章）