【TypeScript学习】TypeScript基础学习总结一
学习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 = undefined
let 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: string
name: string
age?: 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'
}
原文地址:https://blog.csdn.net/weixin_45626095/article/details/142627004
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!