在 TypeScript 中声明变量类型 day2

905 阅读7分钟

这是我参与11月更文挑战的第9天,活动详情查看:11月更文挑战 JavaScript 是一种动态类型的语言。 虽然这种语言可以简单地声明变量,但在某些情况下会导致意想不到的结果。 通过 TypeScript 中的静态类型系统,你可以描述对象的形状,从而提供更好的文档并允许 TypeScript 验证代码是否正常工作。 在 TypeScript 中,命名空间、类、属性、函数、变量和其他语言实体的声明将类型与这些实体相关联。 类型形成和与语言实体关联的方式取决于实体的种类。

声明 let 和 const 变量

ECMAScript 2015为 JavaScript 中的变量声明添加了letandconst关键字,消除了var之前版本中与关键字相关的一些问题。此更改使声明具有块级作用域的变量成为可能,并防止您多次声明相同的变量。

TypeScript 鼓励在变量声明中使用letconst关键字。

let和const 的区别

它们之间的区别在于let声明可以在没有初始化的情况下完成,而const声明总是用一个值初始化。并且const声明一旦分配,就永远不能重新分配。

TypeScript 中的类型和子类型

任何类型

TypeScript 中的所有类型都是称为any类型的单一顶级类型的子类型。的any类型是一种类型的可以表示没有约束的任何JavaScript值。所有其他类型都归类为原始类型、对象类型或类型参数。这些类型对其值引入了各种静态约束。

原始类型

原始类型是booleannumberstringvoidnull,和undefined与用户定义的枚举或沿类型enum的类型。该void类型的存在纯粹是为了指示值的缺失,例如在没有返回值的函数中。该nullundefined类型是所有其他类型的亚型。无法显式引用 null 和 undefined 类型。只能使用nullundefined文字引用这些类型的值。

对象类型和类型参数

对象类型都是类、接口、数组和文字类型(任何不是原始类型的东西。)

类和接口类型是通过类和接口声明引入的,并由它们的声明中给定的名称引用。类和接口类型可以是具有一个或多个类型参数的泛型类型。您将在后面的模块中了解有关这些对象类型的更多信息。

TypeScript 中的原始类型

布尔型

let flag: boolean;
let yes = true;
let no = false;

Number and BigInteger types

let x: number;
let y = 0;
let z: number = 123.456;
let big: bigint = 100n;

字符串

let s: string;
let empty = "";
let abc = 'abc';

在 TypeScript 中,还可以使用模板字符串,它可以跨越多行并嵌入表达式。这些字符串由反引号/反引号 () 字符包围,嵌入的表达式采用${ expr }`.

let firstName: string = "Mateo";
//注意这个是个反引号    ${ expr } 这个叫模板字符串
let sentence: string = `My name is ${firstName}.
    I am new to TypeScript.`;
console.log(sentence);

控制台输出:

My name is Mateo.
    I am new to TypeScript.

void、null 和 undefined 类型

JavaScript 和 TypeScript 有两个原始值,用于表示不存在或未初始化的值:nullundefined. 这些类型在函数上下文中最有用

枚举类型

对来自 JavaScript 的标准数据类型集的一个有用补充是枚举类型,或enum.

枚举提供了一种处理相关常量集的简单方法。一个enum,是一组值的符号名。枚举被视为数据类型,您可以使用它们来创建与变量和属性一起使用的常量集。

每当过程接受一组有限的变量时,请考虑使用枚举。枚举使代码更清晰、更易读,尤其是在使用有意义的名称时。

创建枚举

enum ContractStatus {
     Permanent,
     Temp,
     Apprentice
}
let employeeStatus: ContractStatus = ContractStatus.Temp;
console.log(employeeStatus);

不要忘记编译一下ts文件 输出的结果为1 因为枚举默认从0开始 给第一个枚举值赋值可以修改默认值

要显示与枚举关联的名称,我们可以使用提供的索引器。将以下内容添加到代码底部:

console.log(ContractStatus[employeeStatus]);

这会输出temp 查到与枚举关联的名称

任何类型

以下示例声明了一个类型的变量any并为其赋值:

let randomValue: any = 10;
randomValue = 'Mateo';   // OK
randomValue = true;      // OK

any这个类型退出了类型检查 就失去了使用typescript的优势了 请谨慎使用

未知类型 unknown

虽然灵活,但any类型可能会导致意外错误。为了解决这个问题,TypeScript 引入了unknown类型。

类型断言

如果您需要将变量视为不同的数据类型,您可以使用类型断言。类型断言告诉 TypeScript 在调用语句之前你已经执行了任何你需要的特殊检查。它告诉编译器“相信我,我知道我在做什么”。类型断言类似于其他语言中的类型转换,但它不执行特殊的数据检查或重组。它没有运行时影响并且纯粹由编译器使用。

类型断言有两种形式。一种是 -as语法:

(randomValue as string).toUpperCase();

另一个版本是“尖括号”语法:

(<string>randomValue).toUpperCase();

as是首选语法。TypeScript 的一些应用程序,例如 JSX,在< >用于类型转换时可能会感到困惑。

您可以使用以下条件来了解变量的类型:

类型断言
stringtypeof s === "string"
numbertypeof n === "number"
booleantypeof b === "boolean"
undefinedtypeof undefined === "undefined"
functiontypeof f === "function"
arrayArray.isArray(a)

TypeScript 中的联合和交叉类型

联合类型

联合类型使用竖线或竖线 ( |) 来分隔每种类型。在以下示例中,multiType可以是 a number或 a boolean

let multiType: number | boolean;
multiType = 20;         //* Valid
multiType = true;       //* Valid
multiType = "twenty";   //* Invalid
function add(x: number | string, y: number | string) {
    if (typeof x === 'number' && typeof y === 'number') {
        return x + y;
    }
    if (typeof x === 'string' && typeof y === 'string') {
        return x.concat(y);
    }
    throw new Error('Parameters must be numbers or strings');
}
console.log(add('one', 'two'));  //* Returns "onetwo"
console.log(add(1, 2));          //* Returns 3
console.log(add('one', 2));      //* Returns error

交集类型

交集类型与联合类型密切相关,但它们的使用方式非常不同。交集类型结合了两种或多种类型以创建具有现有类型所有属性的新类型。这允许您将现有类型添加在一起以获得具有您需要的所有功能的单一类型。

交集类型最常与接口一起使用。以下示例定义了两个接口EmployeeManager,然后创建了一个名为的新交集类型ManagementEmployee,它结合了两个接口中的属性。

感觉跟java的继承有点像

interface Employee {
  employeeID: number;
  age: number;
}
interface Manager {
  stockPlan: boolean;
}
type ManagementEmployee = Employee & Manager;
let newManager: ManagementEmployee = {
    employeeID: 12345,
    age: 34,
    stockPlan: true
};

文字类型

文字类型被编写为对象、数组、函数或构造函数类型文字,并用于从其他类型组合新类型。

演示文字类型使用的最佳方法是使用示例。此类型定义创建了一个名为 的文字类型testResult,它可以包含三个string值之一:

type testResult = "pass" | "fail" | "incomplete";
let myResult: testResult;
myResult = "incomplete";    //* Valid
myResult = "pass";          //* Valid
myResult = "failure";       //* Invalid

设置变量的值时myResult"incomplete""pass"是有效条目,而"failure"不是因为它不是testResult类型定义中的项目之一。

TypeScript 也有数字文字类型,其作用与上面的字符串文字相同。例如:

type dice = 1 | 2 | 3 | 4 | 5 | 6;
let diceRoll: dice;
diceRoll = 1;    //* Valid
diceRoll = 2;    //* Valid
diceRoll = 7;    //* Invalid

TypeScript 中的集合类型

数组

TypeScript 与 JavaScript 一样,允许您使用数组。数组可以用两种方式之一编写。首先,使用元素类型后跟方括号 ( [ ]) 来表示该元素类型的数组:

let list: number[] = [1, 2, 3];

第二种方式使用泛型Array类型,使用语法Array<type>

let list: Array<number> = [1, 2, 3];

使用一种比另一种没有任何优势,因此由您决定使用哪种语法。

元组

拥有相同值类型的数组很有用,但有时您有一个包含混合类型值的数组。为此,TypeScript 提供了 Tuple 类型。要声明元组,请使用语法variableName: [type, type, ...].

let person1: [string, number] = ['Marcia', 35];