必学！TypeScript语法类型基础 | TypeScript 入门指南 03（持续更新中）

程序员王天

已于 2024-09-09 21:18:58 修改

阅读量1k

点赞数 25

分类专栏： TypeScript实践指南文章标签：前端 typescript javascript

于 2024-09-09 21:08:17 首次发布

本文链接：https://blog.csdn.net/qq_36435177/article/details/142069208

版权

TypeScript实践指南专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ts基础使用-语法类型

js vs ts

JavaScript

JavaScript 是一种动态类型的编程语言，可以进行隐式转换，数据类型之间相互转换

typescript

是一种静态类型的编程语言，需要在编译阶段进行类型检查，并将 TypeScript 代码转换为 JavaScript 代码。

ts 应用场景

typescript 出现，弥补 JavaScript 缺陷，拓展许多功能，更适合大型项目

基本类型

原数据类型

JavaScript 中的数据类型，可分为两类：

1、原始数据类型（Primitive Data Types），指的是不能再细分修改的数据类型，JavaScript 中有 6 种原始数据类型。

2、引用数据类型（Reference Data Types），存储多个值、或复杂对象数据类型，比如 object

咱们介绍 5 种原始数据类型在 typeScript 中的应用

Boolean 布尔值
String 文本类型
Number 数字
Array 数组
Null 和 Undefined 空和未定义

在定义类似时，通过 : 声明数据类型，如：

let e:Boolean = false //布尔
let a:string = '1'; // 字符
let b:number = 123;// number
let c:null = null; // 空
let d:undefined = undefined; // 未定义
let list:number[] = [1,2,3] // 数组


console.log(a,b,c,d,e)

特殊类型

any (任意值)

允许赋值给任意类型原则上在 typeScript 中不允许修改数据类型，咱们可以声明变量 any 类型，使数据为任意类型。

let e:any = "yyds"
e = 666
console.log('any|e:',e)

类型推断

声明变量、未指定类型，默认是任意类型

在定义变量时未赋值，会进行类型推断的规则，推断出下一个类型，最终为 any 类型，如：

let something;
something = 'seven';
something = 7;
console.log(something)
// 打印输出 7

联合类型

联合类型（union Types）定义一个变量，可以接收多种类型的值

举个例子，假设你有一个名为 result 的变量，你希望它可以保存数字或者字符串类型的值。你可以这样声明它的类型：

let result: number | string;

现在，result 变量可以存储数字类型的值，也可以存储字符串类型的值。例如：

result = 42; // 保存数字类型的值
result = "Hello"; // 保存字符串类型的值

使用联合类型，在类型声明中将这两种类型联合起来，表示该变量可以是其中任意一种类型。这就像是给变量指定了多个备选类型。

元组 (Tuple)

元组是一种特殊的数据结构，它允许我们将不同类型的值放在一个数组中，每个值都可以有自己的类型。想象成一种盒子，里面可以放不同类型的东西。

以下是一个元组的示例：

let person: [string, number, boolean] = ["Alice", 25, true];

在这个例子中，我们创建了一个名为 person 的元组，包含三个元素。第一个元素的类型是 string，表示人的姓名；第二个元素的类型是 number，表示年龄；第三个元素的类型是 boolean，表示是否已婚。

我们可以通过索引来访问元组中的元素：

let name: string = person[0]; // name 的值为 "Alice"
let age: number = person[1]; // age 的值为 25
let isMarried: boolean = person[2]; // isMarried 的值为 true

使用元组时需要注意，元组的长度是固定的，而且每个位置上的类型必须与元组类型定义中对应的位置类型相匹配。

枚举 (Enumeration)

有时候我们希望用更直观的方式表示一组相关的常量值，这时候就可以使用枚举。枚举为一组具有命名值的常量提供了一个更可读的表达方式。

以下是一个枚举的例子：

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

在这个例子中，我们定义了一个名为 Direction 的枚举，包含了四个值：Up、Down、Left、Right。这些值分别被赋予了默认的数字值：0、1、2、3。我们也可以为每个值指定具体的数字：

enum Direction {
  Up = 1,
  Down = 2,
  Left = 3,
  Right = 4,
}

使用枚举时，可以通过枚举值的名称来引用相应的常量：

上面的示例中，我们将枚举值 Direction.Up 赋给了变量 myDirection，然后通过比较来判断变量的值是否等于枚举中的某个常量值，并进行相应的逻辑处理。

`void` 类型

void 是一种特殊的类型，用于表示某些函数没有返回值。它可以用于在函数的返回类型位置上，告诉 TypeScript 编译器函数不会返回任何值。

以下是一个使用 void 类型的示例：

function sayHello(name: string): void {
  console.log("Hello, " + name + "!");
}

在上面的代码中，我们定义了一个名为 sayHello 的函数，它接受一个参数 name，类型为 string，并且返回类型被声明为 void。在函数体内，我们只是简单地打印一句问候的话。

sayHello("Alice"); // 控制台输出 "Hello, Alice!"

需要注意的是，使用 void 类型的函数不允许有 return 语句返回值。

第一个 TypeScript 程序

我们可以使用以下 TypeScript 程序来输出 "Hello World" ：

HiTs.ts 文件代码：

const hello : string = "Hello World!"
console.log(hello)

以上代码首先通过 tsc 命令编译：

tsc HiTs.ts

得到如下 js 代码：

Runoob.js 文件代码：

varhello = "Hello World!"; console.log(hello);

最后我们使用 node 命令来执行该 js 代码。

node HiTs.js  // 输出 Hello World

整个流程如下图所示：

我们可以同时编译多个 ts 文件：

tsc file1.ts file2.ts file3.ts

TypeScript 入门指南（持续更新中🔥🔥🔥）

期待你的三连（点赞+收藏+关注）是我最大更新动力哦