ts泛型的内容

泛型作用：主要是做函数的重用。

//传入一个值返回当前值
function fun(args:number):number{
return args;
}

function fun(args:boolean):boolean{
return args;
}
//写成简单泛型
//在定义泛型时 不需要知道数据类型 在使用的时候传递数据类型
//定义泛型 需要使用泛型变量
// T type U E element K key 泛型变量也可以任意。 A B

function fun<T>(args:T):T{
return args;
}

//使用基本泛型
//泛型的基本用法
fun<string>("a");
fun<number>(1);
//ts存在自动推断
fun("a"); //自动推断类型

案例：
1.检测是否存在某个值
//数组中检测是否存在某个值
// T & U 泛型变量之间产生交集
function has<T, U>(arr: T[], args?: U): boolean {
let has = arr.some((item) => (item as T & U) == args);
return has;
}

let h = has(["a", "b", "c"], "a");
console.log(h);

2.数组之间的值交换位置
//数组之间的值交换位置
function Huan<T>(a: T[], b: T[]): T[][] {
let c: T;
for (let i = 0; i < a.length; i++) {
c = a[i];
a[i] = b[i];
b[i] = c;
}
return [a, b];
}

let par = Huan([1, 2, 3], [4, 5, 6]);
console.log(par);

3.一个数组之间的值交换位置
//数组值交换位置
function Huans<T>(args: T[]): T[] {
return [args[1], args[0]];
}
//[1,3,2,4] [4,2,3,1]
Huans([1, 2]);

4.输入任意值 和数量 循坏多个
function loop<T>(str: T, num: number): T[] {
let arr: T[] = [];
for (let i = 0; i < num; i++) {
arr[i] = str;
}
return arr;
}

let as1 = loop("a", 3); //aaa
let as2 = loop(2, 3); //222

console.log(as1, as2);

5.检测值在集合中存在
//单泛型变量
function checkHas<T>(a: T[], b: T): boolean {
let index = a.indexOf(b);
return index != -1 ? true : false;
}

checkHas(["a", "b"], "a");

//多个泛型变量

function checkHas<T, U extends T>(a: T[], b: U): boolean {
let index = a.indexOf(b);
return index != -1 ? true : false;
}

checkHas(["a", "b"], "a");

泛型接口

interface 接口和 泛型连用

纯接口写法
//接口
interface St {
id?: number;
name?: string;
}

let stulist: St = {
id: 1,
name: "小花",
};

该为泛型接口
//接口
interface St<T, U> {
id?: T;
name?: U;
fun: (a: T[]) => T; //函数表达式
}

let stulist: St<number, string> = {
id: 1,
name: "小花",
fun: function (arg: number[]): number {
return arg[0];
},
};

stulist.fun([1, 2, 3]);

使用ts完成axios网络请求

安装axios

封装request.js
import axios, {
AxiosRequestConfig,
AxiosResponse,
InternalAxiosRequestConfig,
} from "axios";

//axios的基本配置
const instance = axios.create({
timeout: 2000,
baseURL: "http://xawn.f3322.net:8888",
headers: {},
});
//请求拦截器
instance.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
return config;
},
(error: any) => {
return Promise.reject(error);
}
);

//响应拦截
instance.interceptors.response.use(
(response: AxiosResponse) => {
return Promise.resolve(response);
},
(error: any) => {
return Promise.reject(error);
}
);

//封装get
export const get = function <T>(
url: string,
params?: any,
config?: AxiosRequestConfig
) {
return instance.get<T>(url, { params, ...config });
};

//封装post
export const post = function <T>(
url: string,
data?: any,
config?: AxiosRequestConfig
) {
return instance.post<T>(url, data, config);
};

封装的ts请求api

import { get, post } from "../utils/request";

//获取验证码接口
//接口
interface captchaType {
captchaOnOff?: boolean;
code?: number;
img?: string;
msg?: string;
uuid?: string;
}
export const getCaptcha = () => {
return get<captchaType>("/captchaImage");
};

//登录接口
interface loginType {
code?: number;
msg?: string;
token?: string;
username?: string;
}
export const userLogin = (data: any) => {
return post<loginType>("/login", data);
};

组件中使用

const App: React.FC<any> = (props) => {
let [img, setImg] = useState<string>("");
let [uuid, setUuid] = useState<string>("");
let [yz, setYz] = useState<string>("");
//获取验证码
async function captcha() {
let res = await getCaptcha();
setImg(`data:image/gif;base64,${res.data.img}`);
//非空断言 null undefined ！
setUuid(res.data.uuid!);
}
useEffect(() => {
captcha();
}, []);

let login = async () => {
let res = await userLogin({
code: yz,
password: "admin123",
username: "admin",
uuid: uuid,
});
console.log(res.data.token);
};
let change = (e: FormEvent) => {
// 使用断言处理
let { value } = e.target as HTMLInputElement;
setYz(value);
};
return (
<>
<div>
app
<img src={img} alt="" />
<input type="text" value={yz} onChange={change} />
<button onClick={login}>登录</button>
</div>
</>
);
};

泛型接口

使用ts完成axios网络请求

猜你喜欢