登录
ts学习D1---超基础语法导入
2025年11月27日 10:46
在跟练小兔鲜的时候发现常用ts语法来定义接口返回的数据类型，所以来补习一下ts语法
1.js是一种弱脚本文件，数据类型定义和使用不严格，所以便于后期维护，就诞生了ts
2.编写
2.1 ts会以给出的变量类型初始值进行变量类型定义（ts的类型约束功能+类型推断）
2.2 ts的类型注解
// 1.使用类型注解，在变量后加‘：’的符号，指定变量的类型
let str:string='abc'
// 2.或者先预声明一个变量,之后需要使用的时候再进行赋值
let num:number
num=123
2.3 ts的类型断言
let numArr=[1,2,3]
const result=numArr.find(item=>item>2)
// 结合unArr中的元素，这里的‘item=>item>2’有可能不成立，
// 会被判定为undefined类型，所以result会标红
result*5
如果你想筛选掉undefined的情况，就需要使用类型断言‘as number’,断言为一个数值类型
let numArr=[1,2,3]
const result=numArr.find(item=>item>2) as number
// 结合unArr中的元素，这里的‘item=>item>2’有可能不成立，
// 会被判定为undefined类型，所以result会标红
result*5
2.4 ts的基础类型和联合类型
// 1.ts的基础类型
let v1:string='abc'
let v2:number=123
let v3:boolean=true
let nu:null=null
let ud:undefined=undefined
// 2.ts的联合类型
// 2.1通过竖线的方式来定义联合类型(如v4：可以赋值string或者number)
let v4:string|number=123
// 2.2 希望这个数值只能被限定为以下几个数值之一
let v5:1|2|3=1 // 赋值成功
let v6:1|2|3=4 // error 4不是v6的成员
// 3.ts的数组
// 通过类型来约束数组中的类型
let v7:number[]=[1,2,3]
let v8:Array<string>=['a','b','c']
// 4.ts的元组
// 4.1元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
let v9:[string,number]=['a',1]
// 4.2 取出元祖值
v9[0] //输出a
// 4.3 让一些元祖中的元素为可选的
let v10:[string,number,boolean?]=['a',1] // ？表示可选
// 5.ts的枚举
//在js中就是将其编译为键、值的形式
enum MyEnum{ // 枚举类型
a,
b,
c
}
// 5.1 访问枚举类型的两种方式
console.log(MyEnum.a)
console.log(MyEnum[0]) //等于MyEnum.a
2.5 ts的函数
2.5.1 void
// 6. void类型(当函数没有返回值的时候，返回值就是undefined，所以函数返回值类型为void)
function fn():void{ // void类型表示没有任何返回值
console.log('void')
}
2.5.2 给函数的参数分配类型
function MyFn(a:number,b:string){
return a+b;
}
2.5.3 给函数的返回值分配类型（用于严格规范函数返回值类型）
2.5.3.1
function MyFn(a:number,b:string):number{ //报错，因为这里返回值类型不是number
return a+b;
}
## ```
#### 2.5.3.2
```ts
function MyFn(a:number,b:string):number{
return 100;
}
2.5.3.3 将参数设置为可选（和ES6有点像）
注意；可选参数写在必选参数左侧（后面）
function MyFn(a:number,b?:string):number{
return 100;
}
2.5.3.4 剩余参数
function MyFn(a:number,b?:string, ...rest:number[]):number{
return 100;
}
const f=MyFn(20,'abc',1,2,3,4,5,6,7) //1,2,3,4,5,6,7就是剩余函数' ...rest:number[]'的实参
2.6 ts的接口
// 定义一个接口
interface Obj{
name:string,
age:number
}
// 使用接口的时候必须要有name和age
const obj:Obj = {
name:'张三',
age:18
}
2.7 ts的type（类型别名）---很常用
type MyuserName=string|number
let username:MyuserName="123"
2.8 ts的泛型---很常用
定义一个结构体，但是想适配多中数据类型，可以使用泛型
function myFn<T>(a:T,b:T):T[]{
return [a,b];
}
// 使用数值类型进行处理
myFn<number>(1,2)
// 使用字符串类型进行处理
myFn<string>('1','2')
// 或者不手动定义类型，因为在ts中函数myFn()会自动进行类型推导
myFn(1,2) //自动将类型判定为number
