四、TS学习笔记 | 青训营笔记

109 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第4天

今天没有课,昨天在课堂上学习了Js之后,开始自己先预习TS,TS的基础介绍在上一篇笔记里面,今天学习了TypeScript的类型

1、类型注解

let age:number =18

代码中得 :number 就是类型注解

作用: 为变量添加类型约束,

解释 : 约定了什么类型,就只能给变量赋值该类型得值,否则就会报错

2、ts常用类型

可以将ts得常用基础类型细分为两类

1、js已有类型

原始类型 number string bollean null undefined symbol

对象类型 object

2、ts新增类型

联合类型 、自定义类型、接口、元组、字面量类型、枚举、void 、any 等

3、基础类型

image.png

4、数组类型

image.png

需求:如果要求即有数字又有string

联合类型: 表示由两个或其他多个类型组成得类型,表示可以是这些类型中得一种

image.png

5、类型别名

类型复用

image.png

6、函数类型

函数类型实际上指的是 :函数参数和返回值的类型

为函数指定类型的两种方式:

1、单独指定参数、返回值的类型

image.png \

image.png

2、同时指定参数、返回值的类型(不推荐)

image.png

3、无返回值类型: void

4、可选参数

在可传课不传的参数名称后面添加? (问号) 注: 可选参数只能出现在参数列表的最后,也就是说可选参数后面不能再出现必选参数

image.png

7、对象类型

image.png

1、对象可选属性

也是加? 问号

image.png

8、接口

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

解释:

1、使用interface关键字来声明接口

2、接口名称 可以是任意合法的变量名称

3、声明接口后i,直接使用接口名称作为变量的类型

4、因为每一行只有一个属性类型,因此属性类型后没有;分号

image.png

接口继承
interface person{     name:string,     age:number }
// 接口继承
interface person_2 extends person{     z:string }

9、元组

元组类型是另一种类型的数组,他确切的知道包含多少个元素,以及特定索引对应的类型

let position:[number,number] =[39.23,34.45[

//使用元组 let position :[number,number]=[39,23]

10.类型推论

在某些没有明确指出类型的地方,TS的类型推论机制会帮助提供类型

换句话 由于类型推论的存在,这些地方类型可以不写

\

11、类型断言

解决获取类型不准确的问题

//类型断言 const alink=document.getElementById("link") as HTMLAnchorElement
const k=alink.href

12、字面量类型

明确的规定只能是那些类型

image.png

13、枚举

枚举成员默认为数值,默认从0开始自增的。 注 字符串枚举没有自增长行为,因此字符串枚举的每个成员必须有初始值;

枚举类型是非JavaScript的类型扩展,因为其他类型仅仅是被当作类型,二枚举还提供值,

也就是说其他类型会在编译为Js代码时自动移除,而枚举类型会被保留

//枚举 成员默认为数值 enum Direction{up=0,down=20,left=18,right}
function chang(direction:Direction){ 
console.log(direction); 
} 
chang(Direction.up)

\

14、any类型

不推荐使用any类型,因为当值类型为any时,可以对该值进行任意操作,并且不会有代码提示 ,尽量避免any类型

15、typeof

在Js中提供了typeof操作符,用来在js中获取数据的类型,

而在Ts也提供了type操作符:可以在类型上下文中引用变量或属性的类型

那么今天就学到这里了;