一、什么是TS?
TS是TypeScript的简称,是一种强类型的语言。可以理解为JavaScript+强制类型标记。
二、TS的好处?
1、静态类型检查。
2、良好的代码提示,提升开发效率。
三、安装TS,配置TS自动编译环境:
1、安装ts包
npm i typescript -g
2、根据官网资料配置自动编译环境:此处我们选择的是vanilla-ts模板
npm create vite@latest ts-pro -- --template vanilla-ts
在官网我们可以发现,TS还支持一下模板:
vanilla
,vanilla-ts
,vue
,vue-ts
,react
,react-ts
,react-swc
,react-swc-ts
,preact
,preact-ts
,lit
,lit-ts
,svelte
,svelte-ts
,solid
,solid-ts
,qwik
,
qwik-ts
。
执行完以上命令我们将得到一个以 ts-pro为名的文件夹,根据终端提示我们执行cd ts-pro进入ts-pro目录,npm i安装依赖包,npm run dev启动项目。
四、TS类型注解:
1、基础类型:string、number、boolean、null、undefined
2、复杂类型:数组、函数
3、TS新增的类型:联合类型、类型别名、接口(interface)、字面量类型、泛型、枚举、void、any。
下面我将根据分类,依次为各个类型注解。
五、基础类型:
注意:
1、在注释类型的时候,我们需要使用全小写。
2、当使用TS为变量注解后,在赋值为其他类型的值后,会有类型提示。
变量名:类型
六、复杂类型-数组:
注意:
1、我们不仅可以限制变量的类型为数组,还可以限制组员的类型。
2、TS会提示我们变量和变量组员的属性和方法。
3、在使用泛型写法定义的时候,我们写的Array的首字母需要大写。
数组的定义,我们分为两种写法:
1、常见写法
变量名:组员类型[]
2、泛型写法
变量名:Array<组员类型>
七、联合类型:
注意:
1、联合类型指可以将一个变量同时设置为多种类型,声明时使用 “ | ”链接。
2、联合类型可以在多种场景中使用。
1、常见:
变量名: 类型1 | 类型2
2、和数组结合使用:
变量名:(类型1 | 类型2)[]
....
八、类型别名:
注意:
1、通过 type 关键字,我们可以同时给多个变量设置成同一种类型。
type 类型别名 = 类型
变量名:类型别名
九、复杂类型-函数:
注意:
1、可以给参数和返回值添加类型约束。
2、当给参数设置类型约束后,这个参数为必填。
3、当给返回值设置之后,我们所return的值必须符合类型约束的要求。
4、在一些特定的情况下,我们既要为某个参数进行类型约束,又要这个参数为费必传,此时我们需要为这个参数用 “ ? ” 进行标记。
函数的定义,我们分为三种写法:
1、函数声明:
function 函数名(参数1:类型,参数2:类型):返回值类型 {
return
}
2、分开注解:(箭头函数)
const 函数名 = (参数1:类型,参数2:类型):返回值类型 => {
return
}
3、整体注解:(使用type类型别名关键字)
type 类型别名 = (参数1:类型,参数2:类型) =>返回值类型
const 函数名:类型别名 = (参数1,参数2) => {
retuen
}
4、特殊的:可选参数(在参数2后边加 ?则表明参数2可不传。)
function 函数名(参数1:类型,参数2?:类型):返回值类型 {
return
}
十、void-无返回值:
注意:
1、当函数不需要return的时候,我们给返回值定义成void。
2、undefined是一种具体的返回值,不等于void。
function 函数名(参数1:类型):void {
}
十一、interface接口类型:
注意:
1、interface用于给对象的属性或方法添加类型约束。
2、接口的可选设置:在某个属性后添加 “ ?”标识此属性可不传。
3、当未进行 “ ? ” 可选择设置时,如果少传某个属性会进行提示。
4、接口的继承当有多个接口有相同属性时,我们可以使用 “extends” 关键字继承。
interface 接口名 {
属性1:类型,
属性2:类型,
属性3?:类型
}
此时属性3可不传。
接口继承:
interface 父接口名 {
属性1:类型,
属性2:类型,
}
interface 子接口名 extends 父接口名{
属性3:类型,
}
此时子接口会同时具有属性1、属性2、属性3三个属性。
十二、Type注解对象:
注意:
1、我们可以使用 type 关键字注解对象。
2、我们使用 “ type + 交叉类型 ” 模拟继承。
type 类型名 = {
属性1:类型,
属性2:类型
}
let 对象名:类型名
type + 交叉类型:
type 父类型名 = {
属性1:类型,
属性2:类型
}
type 子类型名 = 父类型名 & {
属性3:类型,
}
let 对象名:子类型名
此时该对象会同时具有属性1、属性2、属性3三个属性
总结:
interface 和 type的区别:
1、继承不同。
2、同名的interface会合并,type会报错。
十三、 字面量类型:
注意:
1、给某个元素提供确切的某个值。
2、实际应用中,我们常常和联合类型结合起来,提供某个确切的值。
十四、any类型:
注意:
1、当我们给某个元素设置成any类型后,编辑器会自动忽略检查。
十五、类型断言: as
注意:
1、定义了某个元素一定为某种类型,当它为其他元素时,编辑器不会提示,但浏览器会报错。
十六、泛型: <T>
注意:
1、可以不先指定类型,使用时在指定类型。
2、可以复用类型,更加灵活。
3、适用于多个对象需要定义,且多个对象有很多属性相同。
4、使用思路:
- 先定义泛型:可变部分定义为泛型T。
- 定义具体类型,使用泛型时传入即可。
1、定义:
interface 接口1 <T> {
属性1: 类型,
属性2:类型,
属性3:T
}
interface 接口2 {
属性4: 类型,
属性5:类型,
}
2、使用:
let 对象:接口1<接口2> = { }
3、此时我们所定义的对象内元素应该为:
对象: {
属性1: 类型,
属性2:类型,
属性3:{
属性4: 类型,
属性5:类型,
}
}