TypeScript核心类型概览与应用-1

文章目录

TypeScript入门
- 1.TypeScript介绍
- 2.编译并运行TS代码
- - 2.1.简化运行ts步骤
- 3.TS中的常用类型
- - 3.1.TS中的类型注解
  - 3.2.TS中的原始类型
  - 3.3.TS中的数组类型
  - 3.4.TS中的联合类型
  - 3.5.类型别名
  - 3.6.函数类型
  - - 3.6.1.单独执行参数、返回值类型
    - 3.6.2.同时指定参数，返回值类型
    - 3.6.3.函数的void类型
    - 3.6.4.函数可选参数*
  - 3.7.TS中的对象类型

TypeScript入门

1.TypeScript介绍

TypeScript 是一种由微软开发的开源编程语言，它是JavaScript的一个超集，也就是说任何有效的JavaScript代码也是有效的TypeScript代码。TypeScript在JavaScript的基础上添加了静态类型定义、类、接口、命名空间等特性，旨在解决JavaScript在大型应用开发中遇到的可维护性、可扩展性和编译时错误检查等问题。

TypeScript简介

静态类型检查：TypeScript 引入了静态类型系统，允许开发者在编码阶段就发现类型错误，而不是等到运行时。这有助于提高代码质量和开发效率，减少因类型不匹配导致的错误。
类和接口：提供了面向对象编程的特性，如类（class）、继承、接口（interface）等，使得代码结构更清晰，易于复用和维护。
强大的IDE支持：由于类型信息的存在，IDE和编辑器（如Visual Studio Code）能够提供智能感知、自动完成、接口提示等高级功能，极大提升开发体验。
兼容JavaScript：TypeScript被编译成纯JavaScript代码，因此可以无缝集成到现有的JavaScript项目中，同时也能利用现有的JavaScript库和框架。
模块化：支持ES6模块化，有助于组织大型代码库，提高代码的可维护性和可重用性。

相比JavaScript的优势

类型安全：静态类型检查可以提前捕捉到很多潜在错误，避免了在运行时因为变量类型问题引发的异常，提高了程序的健壮性。
更好的开发工具支持：由于类型信息的存在，编辑器和IDE能提供更加精准的代码补全、接口文档提示、重构支持等，提升了开发效率。
易于维护和协作：随着项目规模的扩大，清晰的类型定义和面向对象的特性让代码更加结构化，便于团队成员理解和维护。
长期可维护性：类型注解作为代码的一部分，形成了“代码的文档”，有助于新加入项目的开发者更快地理解代码结构和意图。
准备未来：TypeScript支持并鼓励使用ES6及以后的新特性，即使当前环境不支持这些特性，TypeScript也能将其编译为向后兼容的JavaScript代码，帮助开发者过渡到未来的JavaScript标准。

2.编译并运行TS代码

创建hello.ts文件

const info : string = 'hello ts';console.log(info)

将TS文件编译为JS文件，在终端中输入命令 tsc .\hello.ts （此时该目录下会生成一个同名的JS文件）
执行JS代码，在终端中输入命令 node hello.js （即可执行刚刚的js文件）

需要注意的是，TS编译生成的JS文件中，代码中就没有类型的信息了。

2.1.简化运行ts步骤

简化方式通过ts-node包，可以直接在node中运行ts代码，不用每次再使用ts进行编译在使用node进行运行

npm i -g ts-node# 使用 就可以实现编译运行两步操作
# 注意 ts-node 并没有生成js文件，他在内部偷偷帮你转换，并且运行
ts-node hello.ts

3.TS中的常用类型

在TypeScript（TS）中，类型系统是其核心特性之一，为JavaScript增添了静态类型检查的能力，从而提高代码的可维护性和安全性。

也可以将TS中测常用基础类型细分为两类：

JS已有类型
原始类型：number/string/boolean/null/undefined/symbol
对象类型：object(包括数组、对象、函数等对象)

TS新增类型
联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any等

以下是TypeScript中一些常用且重要的类型：
基本类型：

string：用于文本字符串。
number：用于数值，包括整数和浮点数。
boolean：布尔值，只能是true或false。
null 和 undefined：表示空值或未定义的值，TypeScript 中它们是所有类型的子类型。
void：表示没有任何返回值的函数。
never：表示永远不会出现的值的类型，常用于抛出异常或无限循环的函数。

数组类型：

使用Array<元素类型>或元素类型[]定义，例如number[]表示一个数字数组。

元组（Tuple）：

定义固定长度和类型的数组，例如[string, number]表示一个数组，其第一个元素为字符串，第二个元素为数字。
对象类型（Object）：

使用接口（interface）或类型别名（type）来描述对象结构，如：
interface Person {name: string;age: number;
}
枚举（Enum）：
用于定义一组命名的常量，如：
1enum Color {Red, Green, Blue}
任意类型（any）：

表示可以是任何类型，使用时需谨慎，因为它绕过了类型检查。

联合类型（Union Types）：

使用管道符号|分隔，表示一个值可以是多种类型中的一种，如string | number。

类型断言（Type Assertion）：

用来告诉编译器某个值的类型，形式为value as Type。

字面量类型（Literal Types）：

直接使用具体的值作为类型，如const answer: 42 = 42;。

索引签名（Index Signatures）：

用于定义对象中动态属性的类型，如{ [key: string]: any }。

类（Class）和接口：

类用于创建对象的蓝图，接口用于定义类或对象的形状。

泛型（Generics）：

提供了编写可重用组件的方式，这些组件可在多种数据类型上工作，如Array<T>。

3.1.TS中的类型注解

示例代码：

// 只需要在 变量后面 : 具体的类型 即可
let age : number = 19

代码中的 number 类型就是类型的注解，作用就是为变量添加类型约束，比如上面为age类型添加了 number类型的约束（数值类型），一旦约定了什么类型，就只能给变量赋值什么类型，否则就会报错

3.2.TS中的原始类型

原始类型：number/string/boolean/null/undefined/symbol

这些类型，完全按照JS中类型的名称来书写即可，非常简单。

/* number/string/boolean/null/undefined/symbol */
let age : number = 30
let username : string = '张三'
let isRunning : boolean = trueconsole.log("年龄：",age)
console.log("姓名：",username)
console.log("是否在奔跑：",isRunning)

3.3.TS中的数组类型

对象类型：object（包括，数组、对象、函数等对象）。

对象类型在TS中更加细化，每个具体的对象都有自己类型的语法

数组类型的写法

推荐使用 number[] 这种写法

let numbers : number[] = [1,3,3,4,5,6,7,8,9,10]
let strings : Array<string> = ['1','2','3','4','5','6','7','8','9','10']console.log(numbers)
console.log(strings)

3.4.TS中的联合类型

当数组中既有number类型又有string类型，这个数组的类型该如何书写的？

如果数组中既有number类型又有string类型，这时候需要使用 | ts中的联合类型（由两个或者多个类型组成类型，表示可以是这些类型中的任意一种），主要这里只是 | 一个竖线，不是两个两个 || 是逻辑表达式

let listInfo : (string | number | boolean)[] = ['1',2,'3',4,true]// 打印当前集合数据 以及类型
listInfo.forEach(item=>{console.log(item + '\t\t' + typeof(item))
})

3.5.类型别名

类型别名（自定义类型）：为任意类型起别名

当一个类型（复杂）并且多次被使用时，可以通过类型别名，简化该类型的使用。

// 类型别名
type CustomArray = (number | string | boolean)[]let user1 : CustomArray = ['张三',21,true]user1.forEach(item=>{console.log(item +"\t" + typeof(item))
})

使用 type 关键字来创建类型的别名。
类型别名，可以是任意合法的变量名称。
创建类型别名后，直接使用该类型别名作为变量的类型注解即可。

3.6.函数类型

函数的类型实际上指的是：函数的参数 和 函数的返回值 类型

为函数指定类型的两种方式

单独指定参数、返回值类型。
同时执行参数、返回值类型。

3.6.1.单独执行参数、返回值类型

// 函数表达式形式
const add = (num1: number, num2: number): number => {return num1 + num2;
}
const res = add(1, 2)
console.log("最终计算结果：" + res + '\t' + typeof (res) + '\t')

3.6.2.同时指定参数，返回值类型

const addNum : (num1:number, num2:number)=> number = (num1,num2)=>{return num1 + num2;
}
const res = addNum(1,3)console.log("最终计算结果：" + res + '\t' + typeof (res) + '\t')

当函数作为表达式时，可以通过 类似箭头函数形式的语法 来为函数添加类型

注意：这种形式只适用于函数表达式

3.6.3.函数的void类型

如果函数没有返回值，那么函数的返回值类型就为🐤 void

const getUserName = (name: string): void => {console.log(name)
}
getUserName('迪加！')

3.6.4.函数可选参数*

当使用函数实现某个功能时，参数可以传，也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了。

比如数组中的 slice方法 可以使用 slice() 也可以使用 slice(1) 也可以使用 slice(1,3)

const mySlice = (start?: number, end?: number): void => {console.log("起始索引：" + start + "\t" + "结束索引：" + end)
}// 使用了可选参数，那么我们自定义的 mySlice()中的参数  可以传 也可以不传了
mySlice()
mySlice(1)
mySlice(1, 3)

可选参数：在可传可不传的参数后面添加？（问号）

注意：可选参数只能出现在参数列表的最后，可选参数后面不能再出现参数

3.7.TS中的对象类型

JS中的对象是由属性和方法构成的，而TS中对象的类型就是在描述对象的结构（有什么属性和方法）

对象类型的写法：

// 单行形式
let person2: { name: string; age: number; show(): void; } =
{name: '张三',age: 19,show() {console.log('你好，我是' + this.name + '\t' + '我今年' + this.age + '岁了');}
}
// 多行形式
let person: {name: string,age: number,show(): void
}= {name: '张三',age: 19,show() {console.log('你好，我是' + this.name + '\t' + '我今年' + this.age + '岁了');}
}person.show()

直接使用{}来描述对象结构，属性采用 属性名：类型 的形式，方法采用 方法名():返回值类型 的形式
如果方法有参数，就在方法名称后面的小括号中指定类型参数例如show(name:string):void
在一行代码中指定对象的多个属性类型时，使用;(分号)来分隔
1. 如果一行代码只能指定一个属性类型，（通过换行来分割多个属性类型，可以去掉 ;(分号)）
2. 方法的类型可以使用箭头函数的形式（比如{show:()=>void}）

TS对象中的可选属性

对象的属性或者方法也是可选的，此时就需要用到可选属性

比如我们在使用axios({ … })时，如果发送GET请求，mothod属性就可以省略

// 如果我们不传methods 那么默认的请求方式就是get
// 可选属性的语法 与 函数的可选参数语法一直 使用 ? 来表示
const myAxios = (config: { url: string, method?: string }): void => {console.log(config);
}myAxios({ url: "http://localhost:9000/api/v1/test" })
myAxios({ url: "http://localhost:9000/api/v1/test", method: 'POST' })