当前位置：首页 > news >正文

【TypeScript学习】TypeScript基础学习总结一

news 来源：原创 2024/10/1 10:49:39

学习TypeScript基础的一些总结回顾。跟着tianyu老师学的课程，大部分内容跟课件一致

1. TypeScript与JavaScript相较

TS需要严格声明数据的类型，提升了代码的规范性但同时也减少了代码的灵活性；
TS具备静态类型检测的能力，即在代码编译运行前能够对代码的一些错误进行检查提醒，减少代码运行时发生错误的概率；
相同的功能下TS的代码量多于JS,但是TS在后期更易于维护。

浏览器并不能直接运行TypeScript，TS在运行之前需要预编译成JS代码

3.TypeScript的类型

ts具有主动推断类型的能力，如果定义一个变量为数字，ts会将这个值推断成number类型；如果只定义了一个变量但是不赋值，ts会将其推断成any类型

（1）基本类型

TypeScript包含JavaScript中的数据类型

number
string
boolean
symbol
undefined
null
BigInt
object (Array, function, Error, Date…)

基本数据类型中需要区分一下string与String 、number与Number 、boolean与Boolean 是不一样的, 通常使用小写，大写是对应的包装对象

(2) TypeScript新增数据类型

1. any: 表示数据可以是任意类型，ts放弃了对声明为any的变量的类型检查, 因此声明为any的变量可以赋任意类型的值，同样也可以赋值给任意类型

let a: any
a = 1
a = 'hello'
a = false
// 以上赋值都是可以的
let an: any
an = 'hello'let num: number
num = an
console.log(typeof num); // string
console.log(num); // 'hello'

2. unknown: 表示数据类型暂时不确定，声明为unknown的变量可以赋任意类型的值，但是不能赋值给任何类型的值除非事先确定了变量的类型（通过if判断/断言）

我目前理解的断言是把a看作b的类型(string) 赋值给b，但是a如果原来是boolean，b还是会被赋值成boolean

let a:unknown
a = 12
a = 'hello'
a = false
// 以上赋值都是可以的
console.log(typeof a); // boolean
b = a; // 这边ts的静态检查会检查出错
console.log(a,b);

规范后的写法:

let a: unknown
a = 12
a = 'hello'let b: string
// 1.逻辑判断
if(typeof a === 'string') {b = a
}
// 2.两种断言的写法：我目前理解的断言是把a看作b的类型(string) 赋值给b
// 但是a如果原来是boolean，b还是会被赋值成boolean
b = a as string
b = <string> a

3.void：表示空。 空值只有undefined与之对应。声明为void的变量只能赋值为undefined,但是意义不大。通常用于限制函数返回值, 并且不能对返回值有任何操作。
返回值限定为void和返回值限定为undefined的函数区别就在于前者不能对返回值有操作

let un: void
// un = null // 会检查出错
// un = '' // 会检查出错
un = undefinedlet voidFun = (): void=>{console.log('一个返回限制为void的函数')return undefined // 要写return的话，只能写return undefined 或 return 
}

4.never：表示不是任何值，一般是ts推断出某个值没在任何范围。用于限制函数返回值时，通常在需要抛出异常，不需要返回值的情况。

5. object和Object，两者的涵盖范围较大。用object声明的变量，可用来赋值给除基础数据类型的数据。而Object范围更大，用来表示除undefined和null的值(所有可以调用到Object的值)

对象定义方法

tips: 可选链形式以及索引签名, 索引签名让对象在声明时先占个坑位，表示允许对象中定义更多其他属性

// 声明方式：属性之间可以用';'分隔，也可以用','分隔
//          当属性各占一行的时候也可以不用分隔符
//          一个对象名只能声明一次但是可以多次赋值
let student1 : {id: string;name: string;age?: number // 可选链形式，表示定义的student，可以有age属性也可以没有。但是上面两者必须要有
}
let student2 : {id: string,name: string,age?: number 
}//对象的赋值，属性之间必须用','分开
student = {id: '00001',name: 'no_name'
}// 索引签名
let student3 : {id: stringname: stringage?: number [key:string]:any // 指定属性名的类型和属性值的类型就行
}
student3 = {id: '00002',name: 'no_name2',gender: '男', // 可以多次定义未知的属性grade: '3'
}

函数指定类型

在声明函数之前指定函数的参数类型和返回值类型，可减少类型推断带来的不确定性

let countSum: (x:number, y:number) => number
countSum = function (x,y){return x+y
}

我感觉常用的函数定义方式还是下面这种。但是这两的区别可能主要还是上面的方式能够实现复用，这块还没有实际体会过~~

function countSum(x:number, y:number):number {return x+y
}

数组声明方式

let arr = [] // 这个是赋值,包含了声明+赋值，ts进行类型推断
let arr1: string[]
let arr2: Array<string> // 泛型

6.tuple
元组，特殊的数组，在声明中可以指定元素的类型。

let arr: [string] // 指定只有一个字符串的数组
let arr1:[string, number] // 第一个元素必须是string,第二个元素必须是number
let arr2:[string, number?]// 第一个元素必须是string,第二个元素可选为空或者number
let arr2: [string, ...number[] ] // 第一个元素必须是string,后面接任意数量的数字

7.enum
枚举类型,对声明为枚举类型的变量，会对其中的属性进行反向映射, 一般枚举类型的变量首字母大写。
(待补充：自增、字符串枚举、常量枚举)

enum Direction = {Up,Down,Left,Right
}
// 反向映射后Direction中的每个值都具有键值对形式
Direction = {Up: 0,Down: 1,Left: 2,Right: 3,0: 'Up',1: 'Down',2: 'Left',3: 'Right'
}