Typescript: 类型

在本文中，我们将学习如何使用 typescript 来确保变量类型是安全的，并且不通类型的值无法错误的赋值。 例如：字符串值不能赋值给数值变量。

这将是一个完整的typescript系列教程，您将从字符串、布尔值等基本主题到类型别名、枚举、接口、泛型等更复杂的主题学习。
typescript中的类型
number
string
boolean
null
undefined
void
object
array
tuples
unknown
never
any (不常用)
以及其他

使用 Typescript 的情况
例如，有一个函数 increaseScore，它接受 currentScore 并将分数增加 increaseBy number 并返回更新后的分数。

function increaseScore(currentScore, increaseBy){
    return currentScore + increaseBy;
}

increaseScore(10, 2) // output : 12
increaseScore(10, "2") // output : 102

如果有人传递字符串或其他东西，那么它将在生产或运行时抛出错误。 例如在分数变为 102 的第二个示例中，它是一个错误，如图所示。

现在，我们如何使用打字稿来防止这种情况发生？ 我们将在后面深入探讨。 您可以像这样定义变量的类型

let variableName: type = value;

原始类型
JavaScript 中的原始类型是

string
boolean
number
string
字符串值用单引号或双引号括起来。 它们用于存储文本数据。

let player: string = "John";

// ✅ CORRECT
player = "anny";

// ❌ ERROR: Type 'number' is not assignable to type 'string
player = 4;

如您所见，我们在第 3 行分配了姓名 (Anny)，在第 4 行分配了号码，它立即抛出错误。 这就是typescript。 您不需要像 JS 那样运行 TS 来获取错误。

布尔值
在布尔值中，它可以是 true 或 false 否则，它会抛出一个错误，如以下代码所示

let isLoggedIn: boolean = false;

// ✅ CORRECT
isLoggedIn = true;

// ❌ ERROR: Type 'number' is not assignable to type 'boolean'
isLoggedIn = 5;

// ❌ ERROR: Type 'string' is not assignable to type 'boolean'.
isLoggedIn = "hello";

number
JavaScript 没有针对整数的特殊运行时值，因此没有等价于 int 或 float 的东西——一切都是简单的数字，这就是为什么在第 5 行中，当我们将价格分配给 500.53 时，它不会给你一个错误，因为它是一个数字。

let price: number = 200;

// ✅ CORRECT
price = 300;
price = 500.53;

// ❌ Error
price = false;
price = "3000";

不要使用any
所以问题出现了，为什么我们不应该使用任何？ 答案很简单，因为当你使用 any 时，你禁用了对该变量的所有类型检查，任何人都可以为该变量分配任何类型的值。 例如：

//  Wrong Practice (by default 'any')
let hello;

//  'hello' can take any type of value
hello =  2;
hello =  "world";
hello =  true;

在第一行我们没有定义变量 hello 的类型，所以它的默认值是 any ，你可以像上面的例子一样分配你想要的任何东西。

现在想象这样一种情况，您正在调用 API 并获取字符串格式的数据，但有人将其更改为布尔值或数字，然后您的整个应用程序功能将因该错误而崩溃。 而 Typescript 会阻止你这样做。 例如：

let data; // 默认类型是any

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();       // 没问题，因为预期的字符串

另外一个例子:

let data;

function getData(){
    //.........API Call
    return 823;
}

data = getData();       // 问题：预期的字符串但返回数字（不会抛出错误，因为类型是“any”）

解决方案:

let data: string;

function getData(){
    //.........API Call
    return  "Message";
}

data = getData();

现在，如果你传递的不是字符串，那么它会抛出一个错误，如下所示：

let data: string;

function getData(){
  //........API Call
  return true;
}

// ❌ 错误：类型“boolean”不可分配给类型“string”
data = getData();

只要您不希望特定值导致类型检查错误，就可以使用 any。

我将在本系列的后面介绍 void、never 和其他内容。

在本文中，我解释了如何使用 typescript 来确保变量类型是安全的，并且没有其他值可以操纵该变量。

这是一系列 Typescript教程，可帮助您从头开始学习 Typescript。 如果您喜欢这篇文章，请不要忘记给❤️和书签️供以后使用，如果您有任何问题或反馈，请不要犹豫，将它们放在下面的评论中。 我会在下一篇中看到。