TSTS学习日记,仅自己学习记录，# TS学习日记 ## 1、TS基本概念 TypeScript 可以看成是 JavaS

TS学习日记

1、TS基本概念

TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法

2、基本用法

定义类型规范：
变量名字 ： 变量类型
比如：
let name:string
这样name的类型就只能为字符串类型，不可修改为其他类型了

3、在线编辑地址

TypeScript Playground。

5、安装使用TS

// 安装
npm install -g typescript
// 终端输入，这样会把ts文件编译成js文件
tsc ***.ts
// 可以同时编译多个ts文件
tsc 1.ts 2.ts 3.ts

5.1 --outFile

这个指令可以将多个ts文件编译整合成一个js文件，例如

tsc 1.ts 2.ts 3.ts --outFile index.js

5.2 --target

指定ts编译成js为指定的版本，例如

tsc --target es2015 file.ts

5.3 --outDir

将ts指定编译后的文件位置，例如

tsc app.ts --outDir dist

6、常见报错

6.1 类型报错

比如我们定义了一个字符串类型，又把数字类型给了变量，就会在编译时候提示

比如webstrom软件，在写ts时候，会有类型提示，如果更改了与定义类型不同的变量，会有提示

又或者下左下方，可以看到图片的报错

二、数据类型

1、string

2、number

3、boolean

4、object

object 类型包含了所有对象、数组和函数。

5、undefined

undefined 只包含一个值undefined，表示未定义

const a:undefined = undefined

6、null

null 只包含一个值null，表示为空（即此处没有值）。

const a:null = null

noImplicitAny和strictNullChecks在关闭时，会被自动退推导成any

7、symbol

8、bigint

bigint 包含所有的大整数。它只能安全表示的整数范围在-(2^53 - 1)到2^53 - 1之间（即Number.MIN_SAFE_INTEGER到Number.MAX_SAFE_INTEGER）

const a:bigint = 123 // 报错
const b:bigint = 123343232334n // 正确

9、any

表示为任何类型，可以躲避ts的类型校验，任意赋值，在编译时不会报错，例如

let x:any
x=1;
x=‘2’；
x= false

以上的赋值都不报错

10、unknown

因为any，ts不会校验类型，但是我们有些时候使用any，会产生类型污染的问题。

类型污染指的是当使用any类型时，它会"污染"代码库的其他部分，导致类型信息丢失或变得不可靠。具体表现为：

类型信息丢失：一旦某个值被标记为any，TypeScript将不再对该值进行类型检查
连锁反应：any类型会沿着代码调用链传播，影响使用该值的其他代码
类型安全性丧失：原本TypeScript提供的编译时类型检查优势将不复存在

现象

// 1.自动类型推断被破坏
let data: any = "hello";
const result = data + 5; // TypeScript不会报错，但运行时可能是非预期行为

// 2.污染函数参数和返回值
function processData(data: any) {
  return data.trim().split(","); // 如果data不是字符串，运行时将出错
}
const num = 123;
processData(num); // 编译时不会报错，但运行时会出错

// 3.对象属性访问不受限制
const obj: any = { name: "Alice" };
console.log(obj.age); // 访问不存在的属性也不会报错

TS3新增了一个类型，unknown，表示为类型不确定，有些方面和any作用相同，但是有区别。

相同点： 任何类型都可以赋值给到unknown类型 不同点：

1、unknown类型的变量，不能直接赋值给其他类型的变量（除了any类型和unknown类型）。

let v:unknown = 123;
let v1:boolean = v; // 报错
let v2:number = v; // 报错

2、不能直接调用unknown类型变量的方法和属性。

11、数组

1.数组的所有成员的类型必须相同，但是成员数量是不确定的，

如果数组内类型不同，编译时会报下面的错误

let arr:number[] = [1, 2, ‘3’];

2.多种数据类型

这么写就不会报错，数组元素可以是字符串和数字类型

let arr:(number|string)[] = [1,2,'3']

3. 定义数组的方式

以下两种都可以，

let arr:number[] = [1, 2, 3]; // 直接在变量后面直接定义
let arr:Array<number> = [1, 2, 3 // 内置的 Array 接口。

1.4 const断言

const arr1:readonly number[] = [1,2,3] // 只读数组，不可进行数组的操作
arr1.push(12)

1.5 多维数组

let arr:number[][] = [[1,2],[3,4]]

12、元组

成员类型可以自由设置的数组，即数组的各个成员的类型可以不同。

let arr:[number,string] = [123,'123'] // 代表第一个元素为数字，第二个是字符串

13、元组合数组区别

1. 数字数组（`number[]`）

类型定义：元素全部是 number，长度不固定。
特点：可以动态增删元素，所有元素必须是数字。

const arr: number[] = [1, 2, 3];
arr.push(4); // ✅ 合法
arr[0] = 100; // ✅ 合法
arr = [1, "2"]; // ❌ 错误，不能有 string

2. 数字元组（`[number, number, number]`）

类型定义：固定长度，每个位置的类型必须匹配。
特点：长度和类型顺序严格约束。

const tuple: [number, number, number] = [1, 2, 3];
tuple.push(4); // ⚠️ 可以 push（TS 允许，但破坏元组约束）
tuple[0] = 100; // ✅ 合法
tuple = [1, 2, "3"]; // ❌ 错误，第三个元素不能是 string

3. 关键区别

特性	数组 `number[]`	元组 `[number, number, number]`
长度	动态（不固定）	固定（这里是 3）
元素类型	必须全部是 `number`	必须按顺序是 `number`
类型检查	检查元素类型	检查每个位置的类型和长度
`push`/`pop`	完全支持	允许但不安全（会破坏元组约束）
使用场景	同类型数据集合（如数字列表）	固定结构数据（如坐标 `[x, y, z]`）

4. 类型区别

const arr: number[] = [1, 2, 3];
const tuple: [number, number, number] = [1, 2, 3];

// 数组可以赋值给元组吗？ ❌
const a: [number, number, number] = arr; // 错误，因为数组长度可能变化

// 元组可以赋值给数组吗？ ✅
const b: number[] = tuple; // 合法，因为元组满足数组的类型约束

5. 扩展元组

理论上元组的长度是固定的，不可以扩展，但是有种方法可以让元组的长度变成可变的

type NamedNums = [
  string,
  ...number[]
];

const a:NamedNums = ['A', 1, 2];
const b:NamedNums = ['B', 1, 2, 3];  // 不报错

6.只读元组

// 写法一
type t = readonly [number, string]

// 写法二
type t = Readonly<[number, string]>

13、函数

三、定义类型

1、type

type age = number
const age:age = 19

相当于给age配置了一个别名，可以直接使用别名去定义类型，（注意：type作用域是局部作用域，函数内部的声明，不影响外部的声明）

1.1 扩展方式：

type Animal = {
  name: string;
}

type Dog = Animal & {
  breed: string;
}

1.2 重复声明

type 不可以重复声明

2、interface

接口，用来指定的类型结构。

interface user {
  name: string;
  age: number
}

3、typeof

获取操作的类型

typeof undefined; // "undefined"
typeof true; // "boolean"
typeof 1337; // "number"
typeof "foo"; // "string"
typeof {}; // "object"
typeof parseInt; // "function"
typeof Symbol(); // "symbol"
typeof 127n // "bigint"

`声明：`

学习资料来源： 可以自行去网道学习，wangdoc

TS