TypeScript基础总结

一、TS 基础类型

（1）JavaScript 中的数据类型:

        string               字符串

        number             数值

        boolean           布尔

        null                   空

        undefined         未定义

        bigint                整数数据类型

        symbol              symbol 原始数据类型，独一无二的值

        object                引用数据类型，包含：Array、Function、Date、Error等

（2）TypeScript 类型

        TS 支持的变量类型如下：

（3）TypeScript类型具体声明

1. 字符串类型(string小写)

使用 string 表示文本数据类型,可以使用双引号（"）或单引号（'）表示字符串

let str :string = 'hanzhaohua'

2. 数字类型（number小写）

除了支持十进制和十六进制字面量，也支持二进制和八进制字面量。

let num :number = -666

3. 布尔类型（boolean小写）

最基本的数据类型就是简单的 true/false 值

let bool:boolean = true

4. 字面量类型

TS 允许限制某个变量为固定的某个值，用的很少

let x:123 = 123

5. any

any 类型允许变量的值为任意类型, 并且可以进行任意类型的赋值

let o: any;
o = 100
o = 'hello'
o = true

6. never

never的含义是：任何值都不是，简言之就是不能有值,多用于函数无线循环，抛出异常得函数

function fn():never {
    throw new Error('错误日志')
}
// 调用fn函数
fn()

7. void

void 限制值为 undefined，可以限制变量的值或者是函数的返回值，更多的时候是限制函数的返回值，通常用于函数返回值声明，含义：【函数返回值为空，调用者也不应依赖其返回值进行任何操作】

注意：undefined和void区别

void是一个广泛的概念，用来表达“空”，而 undefined 则是这种“空”的具体实现之一。
● 因此可以说 undefined是void能接受的“空”状态的一种具体形式。
● 换句话说：void包含undefined，但void表达的语义超越了单纯的 undefined，它是一种意图上的约定，而不仅仅是特定值的限制

let v: void;
console.log(v); //undefined

function fn1(): void {
    return;
}
console.log(fn1()); //undefined

let fn = (): void => {
    return;
}
console.log(fn());  //undefined

8. 数组 Array[]

有两种方式可以定义数组。

​ (1) 可以在元素类型后面接上[]，表示由此类型元素组成的一个数组：

// 1.数字数组
let numberArr :number[] = [1,2,3,4,5,6,7,8,9]
// 2.字符串数组
let stringArr :string[] = ['张三','李四','王五']

​ (2) 使用数组泛型，Array<元素类型>

// 3.泛型 Array<约束类型>
let arr2: Array<Boolean> =[true, false, true]

9. 元组(tuple)

元组（Tuple）类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，用的较少

let personArray :[string, number] = ['韩召华'， 28]
let objArr :[object, Array<number>] = [{x: 100}, [1,2,3]]
let arr :[string,number][] = [['张三', 20],['李四'，21]]

10. 枚举(enum)

一般用于组织一些有相似之处的常量，让这些常量更规范、更统一。

enum gender {
    nan = '男',
    nv = '女',
    screct = '保密'
}
//11.创建一个枚举类型的变量
let sex: object = {
    sex: gender.nv
}
console.log(sex)

11. 联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种

let o = string | number
o = 'hanhzaohua'
o = 19961112
// o = true; //其他类型不允许

12. 类型断言

TypeScript中的类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。可以使用尖括号（<>）语法或者as语法进行类型断言。

let o: string | number;
o = 34.55666;
// console.log(o.toFixed(2));
//方法一：as
// console.log((o as number).toFixed(2))
//方法二:类型
console.log((<number>o).toFixed(2))

13. 类型推断

TS 会在没有明确的指定类型的时候推测出一个类型。主要有下面两种情况

1. 变量声明时赋值了，推断为值对应的类型
2. 变量声明时没有赋值， 推断为 any 类型

let t = 123;
// t = true; //已经赋值了的变量规定为number，再次修改也必须为number
t = 23;
console.log(t)

let y;
y = 100;
y = 'hello';
y = true;
console.log(y)

 14. 非空断言

非空断言（Non-null Assertion）是 TypeScript 2.0 引入的新特性，用于告诉编译器一个变量不为 null 或 undefined，在某些场景下可以方便地解决一些类型检查问题。

非空断言的语法是在一个变量名或表达式的末尾添加一个感叹号 !，例如：

const element = document.querySelector('#myElement')!;
// querySelector 方法可能返回 null 或 undefined，但是通过在变量赋值后添加一个感叹号，告诉编译器该   变量不会为空，因此在编写后续的代码时就可以放心地省略对空值的判断了。

15. any中转

当等号左右两次的类型不一致的时候,我们还想让强行赋值,使用any中转一下

// 图片删除的回调
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 spuImageList.value = uploadFiles as any; //左右两边的类型不一致时，强行赋值
}

16. 函数

情况一: TypeScript 可以为参数与返回值设置类型，代码示例如下：

//1、普通函数
//参数添加类型
function fun(a: number, b: number) {
    console.log(a + b)
}
fun(1, 2);
//添加函数返回值类型
function fun1(x: string, y: number): string {
    return x + y;
}
console.log(fun1('11', 20));

//2、箭头函数
let fun2 = (a: number, b: number): number => {
    return a + b;
}
console.log(fun2(12, 34));

情况二： 函数声明的完整形式

//4、声明函数
let fun5: (a: number, b: number) => number = (x: number, y: number): number => {
    return x + y;
}
console.log(fun5(10, 20));

情况三： 可选参数（ypeScript 默认要求函数实参数量要与形参的数量保持一致，不过可以使用 ?: 设置参数为可选参数）

let fn = (a: number, b: number, c?: number) => {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn(1, 2)

情况四：参数默认值

let fun6: (a: number, b: number, c?: number) => number = (x: number, y: number, z: number = 40): number => {
    return x + y + z;
}
console.log(fun6(10, 20, 100));

（4）接口

//声明接口
interface BoyFriend {
    name: string;
    age: number;
    car ?: string;        // 可选属性
    readonly id: number, // 只读属性 这样设置后， 如果修改 id 属性， 编译器就会报错
}
//声明对象 满足接口结构与类型要求
let zhangsan: BoyFriend = {
    name: '张三',
    age: 18,
}
console.log(zhangsan);