TypeScript学习笔记(全)-CSDN博客

本文链接：https://blog.csdn.net/q1372302825/article/details/140075502

文章目录

TypeScript入门

TypeScript入门

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 = true


console.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' })

3.8.接口

当一个对象类型被多次使用的时候，一般会使用接口（interface）来描述对象的类型，达到复用的目的

/**
 * 定义接口
 */
interface IPerson {
   
    name: string,
    age: number,
    printInfo(): void
}


let personInfo: IPerson = {
   
    name: '张三',
    age: 22,
    printInfo() {
   
        console.log('姓名：' + this.name + '年龄：' + this.age);
    }
}

personInfo.printInfo()

使用interface关键字来声明接口
接口名称，可以是任意合法的变量名称
声明接口后，直接使用接口名称作为变量的类型
因为每一行只有一个类型属性，因此属性后面没有 ;（分号）

接口和类型别名的对比

相同点：都可以给对象指定类型
不同点：
1. 接口，只能为对象指定类型
2. 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

/**
 * 定义接口
 */
interface IPerson {
   
    name: string,
    age: number,
    printInfo(): void
}


/**
 * 定义类型 注意：这里后面有一个 = 相当于把对象的结构赋值给TPerson
 */
type TPerson = {
   
    name: string,
    age: number,
    printInfo(): void
}

type <