web前端开发工程师常见的TypeScript中使用的基本类型

　　随着互联网的普及和技术的不断发展，web前端开发工程师在当今互联网行业中的重要地位，Web前端开发工程师作为一个专业技术岗位，需要掌握多种技术来构建现代化的网页和应用程序，今天八维职业学校和大家一起来看看web前端开发工程师常见的TypeScript中使用的基本类型，希望对想要学习和了解web前端开发工程师这个行业的同学有所帮助。

　　TypeScript有多种基本类型，在构建更复杂的类型时用作构建块。在以下部分中，我们将检查这些类型中的大多数。请注意，我们在本节中创建的大多数变量都可以省略它们的类型，因为TypeScript可以推断它们，但是，我们为了学习目的而明确说明了类型。

　　String

　　string字符串用于文本数据类型，如字符串文字或模板字符串。

　　试试下面的代码：

　　constlanguage:string='TypeScript';constmessage:string=`I'mprogrammingin${language}！`;

　　在这个代码块中，语言(language)和消息(message)都被分配了string字符串类型。模板文字仍然是一个字符串，即使它是动态确定的。

　　由于字符串在JavaScript编程中很常见，因此这可能是您最常使用的类型之一。

　　Boolean

　　boolean类型用于表示真或假。

　　尝试以下块中的代码：

　　consthasErrors:boolean=true;constisValid:boolean=false;

　　由于hasErrors和isValid被声明为布尔值，它们只能被分配值true和false。请注意，truthy和falsy值不会转换为它们的布尔等效值，如果与这些变量一起使用会引发错误。

　　Number

　　number用于表示整数和浮点数，如下所示：

　　constpi:number=3.14159;constyear:number=2021;

　　这是另一种在JavaScript开发中经常使用的常见类型，因此这种声明在TypeScript中很常见。

　　Bigint

　　bigint类型是针对ES2020时可以使用的类型。它用于表示BigInt，这是一种新的数据类型，用于存储大于2^53的整数。

　　试试下面的代码：

　　constbigNumber:bigint=9007199254740993n;

　　注意：如果此代码抛出错误，可能是TypeScript未设置为targetES2020。这可以在我们的tsconfig.json文件中进行更改。

　　如果我们使用大于2^53的数字或使用某些数学库，bigint将是一种常见的类型声明。

　　symbol

　　symbol用于表示原始symbol值。这将创建一个唯一的、未命名的值。

　　使用Symbol()构造函数运行以下代码：

　　constmySymbol:symbol=Symbol('unique-symbol-value');

　　这些值的唯一性可用于避免引用冲突。有关JavaScript中符号的更多信息，请阅读Mozilla开发人员网络(MDN)上的符号文章。

　　Array

　　在TypeScript中，数组是根据它们预期具有的元素进行类型化的。输入数组有两种方法：

　　将[]附加到数组元素的预期类型。例如，如果我们想输入一个包含多个数值的数组，我们可以这样做：

　　constprimeNumbers:number[]=[2,3,5,7,11];

　　如果我们给这个数组分配了一个字符串值，TypeScript会给我们一个错误。

　　使用ArrayGeneric，其中T是该数组中元素的预期类型。使用前面的例子，它会变成这样：

　　constprimeNumbers:Array=[2,3,5,7,11];

　　两种方式是相同的，所以选择一种并尝试仅使用该格式来表示数组。这将使代码库保持一致，这通常比选择一种风格更重要。

　　在TypeScript中使用保存数组的变量的一个重要方面是大多数时候，我们必须键入它们。试试下面的代码：

　　constmyArray=[];

　　TypeScript无法推断此数组预期的正确类型。相反，它使用any[]，这意味着任何东西的数组。这不是类型安全的，并且可能会在以后的代码中引起混淆。

　　为了使我们的代码更加健壮，建议明确说明数组的类型。例如，这将确保数组具有数字元素：

　　constmyArray:number[]=[];

　　这样，如果我们尝试将无效值推送到数组，TypeScript将产生错误。试试下面的代码：

　　constmyArray:number[]=[];myArray.push('some-text');

　　TypeScript编译器将显示错误2345：

　　Argumentoftype'string'isnotassignabletoparameteroftype'number'.(2345)

　　Tuples

　　元组是具有特定数量元素的数组。一个常见的用例是以[x,y]格式存储2D坐标。如果我们正在使用React并使用Hooks，大多数Hooks的结果也是一个元组，例如const[isValid,setIsValid]=React.useState(false)。

　　要键入元组，而不是键入数组时，我们将元素的类型包装在[]中，并用逗号分隔它们。想象一下，我们正在创建一个包含元素类型的文字数组：

　　constposition:[number,number]=[1,2];

　　如果我们尝试传递的元素数量少于或多于元组预期的元素数量，TypeScript编译器将显示错误2322。

　　以下面的代码为例：

　　constposition:[number,number]=[1,2,3];

　　这将产生以下结果：

　　Type'[number,number,number]'isnotassignabletotype'[number,number]'.Sourcehas3element(s)buttargetallowsonly2.(2322)

　　any

　　在某些情况下，指定值的类型可能太难了，例如该值来自第三方库或最初编写时没有使用TypeScript的代码。在以小步骤将JavaScript代码库迁移到TypeScript时，这种情况尤其常见。在这些场景中，可以使用一种称为any的特殊类型，这意味着任何类型。使用任何方式选择退出类型检查，这与使TypeScript编译器忽略该值相同。

　　采用以下代码块：

　　letthisCanBeAnything:any=12345;thisCanBeAnything="Icanbeanything-Look,I'mastringnow";thisCanBeAnything=["NowI'manarray-ThisisalmostlikepureJavaScript！"];

　　这些声明都不会在TypeScript中产生错误，因为类型被声明为any。

　　注意：大多数时候，如果可以的话，我们应该避免使用any。使用它会失去TypeScript的主要好处之一：拥有静态类型的代码。

　　unknown

　　unknown类型就像任何类型的类型安全对应物。当我们想键入无法确定其值的内容时，可以使用unknown，但仍希望确保使用该值的任何代码在使用之前正确检查类型。这对于库中的函数库作者很有用，这些函数可以从用户那里接受广泛的值并且不想显式地键入值。

　　例如，如果我们有一个名为code的变量：

　　letcode:unknown;

　　然后稍后在程序中，我们可以为该字段分配不同的值，例如35(数字)，或完全不相关的值，例如数组甚至对象。

　　注意：我们使用let是因为我们要为该变量分配一个新值。

　　稍后在同一代码中，我们可以将代码设置为一个数字：

　　code=35;

　　但后来我们可以将它分配给一个数组：

　　code=[12345];

　　我们甚至可以将它重新分配给一个对象：

　　code={};

　　如果稍后在代码中，我们想将该值与其他数字进行比较，例如：

　　constisCodeGreaterThan100=code>100;

　　TypeScript编译器将显示错误2571：

　　Objectisoftype'unknown'.(2571)

　　发生这种情况是因为代码需要用于此比较的数字类型，而不是未知类型。当使用未知类型的值执行任何操作时，TypeScript需要确保类型是它所期望的类型。这样做的一个例子是使用JavaScript中已经存在的typeof运算符。检查以下代码块：

　　if(typeofcode==='number'){constisCodeGreaterThan100=code>60;//...}else{thrownewError('Invalidvaluereceivedascode');}

　　在此示例中，我们正在使用typeof运算符检查代码是否为数字。当我们这样做时，TypeScript将强制我们的变量类型在if块内编号，因为在运行时if块内的代码只有在代码当前设置为数字时才会被执行。否则，我们将抛出一个JavaScript错误，指出传递的值无效。

　　要了解unknown和any类型之间的区别，我们可以将unknown视为"我不知道该值的类型"，将any视为"我不关心该值的类型"。

　　void

　　我们可以使用void类型将相关变量定义为根本不包含任何类型。如果将不返回值的函数的结果分配给变量，则该变量将具有void类型。

　　采取以下代码：

　　functiondoSomething(){};constresultOfVoidFunction:void=doSomething();

　　我们很少需要直接在TypeScript中使用void类型。

　　nullandundefined

　　TypeScript中的null和undefined值具有它们自己的唯一类型，它们以相同的名称调用：

　　constsomeNullField:null=null;constsomeUndefinedField:undefined=undefined;

　　这些在创建我们自己的自定义类型时特别有用，这将在本系列的后面部分介绍。

　　never

　　never类型是永远不会存在的值的类型。例如，假设我们创建了一个数值变量：

　　constyear:number=2021;

　　如果我们创建一个if块以在year不是数字的情况下运行某些代码，则可能如下所示：

　　if(typeofyear！=="number"){year;}

　　if块中的变量year的类型将永远不会。这是因为，由于year被键入为数字，因此，这个if块的条件永远不会满足。我们可以将never类型视为不可能的类型，因为此时该变量不能有值。

　　Object

　　对象类型表示任何不是原始类型的类型。这意味着它不是以下类型之一：

　　number

　　string

　　boolean

　　bigint

　　symbol

　　null

　　undefined

　　对象类型通常用于描述对象字面量，因为可以将任何对象字面量分配给它：

　　constprogrammingLanguage:object={name:"TypeScript"};