TypeScript基础类型

whhhhhhhhhw

于 2024-10-06 21:41:04 发布

阅读量687

点赞数 9

文章标签： typescript javascript 前端原型模式 es6 开发语言 ubuntu

本文链接：https://blog.csdn.net/whhhhhhhhhw/article/details/142730326

版权

前言：

在当今的软件开发中，前端主流的语音无疑是JavaScript。但随着项目规模的不断扩大和复杂性的增加，JavaScript开始暴露出了许多问题，就比如说类型系统的缺乏。为了解决此类问题，微软开发了一种自由和开源的编程语音TypeScript。它是JavaScript的一个超集，为 JavaScript 代码添加了静态类型和基于类的面向对象编程。简单来说JavaScript是操作数据的，但是TypeScript是操作类型的。

微软官方也推出了TypeScript的学习网站：点击此处<<<

为什么要使用TypeScript

1.TypeScript 的类型系统可以帮助开发者在编写代码时捕获潜在的错误，从而减少运行时的错误。

2.是一个强类型，支持静态和动态类型，它可以提供更好的代码编辑、重构和导航支持。

3.可维护性：随着项目的增长，类型系统可以帮助开发者更好地理解代码库，并更容易地进行修改和扩展。

4.TypeScript 支持最新的 ECMAScript 标准，支持 ES3，ES4，ES5 和 ES6 等

1.基础类型

可以在声明的变量后面设置我们想要的类型，如果设置类型跟变量不匹配会直接报错。

1.1 布尔类型boolean

在Javascript中我们想要设置变量为布尔值需要通过if判断，通过typeof将变量转换为基本数据类型，在通过全等(== 或 ===)来判断这个变量是否为布尔值，但在TypeScript中不用这么复杂，比方说：

const data1:boolean = true 
const data2:boolean = '' // 不能将类型“string”分配给类型“boolean”。
const data3:boolean = 123 // 不能将类型“number”分配给类型“boolean”。

在ts环境下，后面两行代码会报错，并将报错原因给出来，原因是变量的类型不是布尔值，

但是最终编译后的JavaScript代码不会出现问题，以下是编译后的JavaScript代码：

const data1 = true;
const data2 = '';
const data3 = 123;

1.2 数值类型number

跟上述代码同理，二进制数、十进制数、十六进制数都可以用 number 类型来表示。

const data1:number = true // 不能将类型“boolean”分配给类型“number”。
const data2:number = '' // 不能将类型“string”分配给类型“number”。
const data3:number = 123

1.3 字符串类型string

const data1:string = true // 不能将类型“boolean”分配给类型“string”。
const data2:string = ''
const data3:string = 123 // 不能将类型“number”分配给类型“string”。
const data4:string = ""
const data5:string = ``

双引号、单引号以及ES6推出的模板字符串都表示字符串

1.4 数组类型array

数组类型比较特殊，因为数组中元素可以为各种数据类型，这时候可以使用元组类型Tuple，也可以设置整体，比方说数组中的元素我想要的数据类型，有两种表示方法，第一种就是在元素类型后面加上[]，另外一种是使用数组泛型，Array<元素类型>：

const data1: number[] = [1, 2, 3, 4];
const data2:Array<string> = ['张三','李四']

第二种数组泛型它适用的场景更多，但第一种更加简洁，一般都是优先适用第一种，当有特殊情况时，再去使用第二种数组泛型。

1.5 元组类型Tuple

刚刚说了，数组中元素的类型不止一种，但有时我们需要在单个变量中存储不同类型的值，这时候我们就可以使用元组。

let user: [string, number, string?]; // ?表示可选
user = ['张三', 17, '男']
user = ['李四', 22]

其中?表示可选的意思，上述代码说明这个数组可以有三个元素或二个元素，都是元素的类型要和元组中设置的类型一样，不然报错。

1.6 枚举类型enum

一般是用于定义一些常量的，比方说性别。

enum Gender {
    '男',
    '女'
}
const user: string = Gender[0]
console.log(user) // '男'

1.7 any类型

使用了该类型的变量，可以不被ts的类型检查器检查，直接编译为JavaScript。通俗易懂的说法就是在Typescript中如果使用了any就将代码变成了JavaScript，这样typescript就失去了意义，因此在项目中我们要避免去使用any，网上就有段子调侃说typescript是anyscript。

let user: any = 1
user = [1, 2, 3, '4']
user = true

上述代码可以看到，我们声明的变量可以为各种类型，因为它没有被ts的检查器检查到，直接就编译为了JavaScript代码。

1.8 void类型

当一个函数没有返回值时，通常将返回类型设置为void。通常不会给一个常量设置void类型，因为这样只能赋值为undefined或null。

function fn(): void {
    console.log('函数没有返回值')
}
const user: void = undefined

1.9 null和undefined类型

当变量为undefined或null时，可以给它的类型设置为undefined或null。

const u: undefined = undefined
const n: null = null

1.10 never和unknown类型

never：类型表示的是那些永不存在的值的类型，使用never类型时，就代表这个值永远不可能有有效的类型。

function error(message: string): never {  
    throw new Error(message);  
}

在上述代码中，由于throw语句的存在，函数永远不会有正常的返回值。

1.11 字面量类型

字面量可以是字符串、数值、布尔值以及undefined和null，字面量类型提供了一种方式来精确指定一个变量的值或函数参数/返回值的精确类型。

let data: 'hello world' = 'hello world'
data = 'hi world' // 报错 不能将类型“"hi world"”分配给类型“"hello world"”。

// 字面量类型的联合
let Gender: 'man' | 'woman'
Gender = 'man'
Gender = 'Third gender' // 报错 不能将类型“"Third gender"”分配给类型“"man" | "woman"”。

结论

本次我们学习了TypeScript的基础类型，为 JavaScript 开发提供了类型安全和更好的工具支持，同时保持了与现有 JavaScript 生态系统的兼容性。随着 JavaScript 生态系统的不断发展和项目规模的扩大，TypeScript 已经成为许多开发者的首选语言。通过这篇博客，我希望你已经对 TypeScript 的基本概念和优势有了初步的了解，下期介绍一下TypeScript的高级类型。