Typescript-类型

基本类型

let a: any = 110; //number
//没有指定类型会自动推导
let b: string = "string"; //string
let c: boolean = true; // boolean
let d: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
let e: Array<number> = [1, 2, 3, 4, 5, 6, 7];
let f: number[][] = [
	[1, 2, 3],
	[4, 5, 6, 7],
]; //二维数组
let g: Array<Array<string>> = [["1", "2"], ["1"]]; //二维数组
let h: object = { name: "wc", age: 18 }; //如果一个变量指定了Object类型, 就不能获取和修改数据
let i: { name: string; age: number } = { name: "wc", age: 18 }; //
let j: { name: string; age?: number } = { name: "wc", age: 18 }; //?表示可选的
let k: { name: string; age?: number } = { name: "wc", age: 18 }; //属性与属性之间可以写 ; 或者 ,
type Mytype = { name: string; age: number };
let l: Mytype = { name: "wc", age: 18 }; //可以使用别名,一处定义多处使用
const s1: symbol = Symbol("name");
const s2: symbol = Symbol("name");
let m = { [s1]: "ajax", [s2]: "axios" };
let n: null = null; //值只有一个null
let o: undefined = undefined; //值只有一个null
let p: any = 123; //无法确定变量的类型,或者它的类型是可以变化的,或者使用第三方库,缺少类型约束 就可以使用any
p = "string";
p = true;
let q: any[] = [1, 2, "string", true];
function r(num: number, num1: number): number {
	//给形参指定类型 , 也可以给返回值指定类型
	return num1 + num;
}
r(1, 2); // 如果没有指定返回值会自动推导,如果形参没有指定类型,默认类型是any
const arr = ["ww", "hh", "mm", "ss"];
arr.forEach((item) => {
	//如果匿名函数没有指定类型,会根据上下文自动推导
	console.log(item.toUpperCase());
});
function s(num: number, num1: number): void {
	//函数没有返回值,返回类型就是void
	console.log(num1 + num);
}

元祖 长度固定, 每个位置的数据类型也固定

let t: [string, number, boolean] = ["ajax", 1, true]; //[string, number,boolean]  这是一个数据对象 叫元祖
//数组一般存储相同类型的元素,元组每个元素都有自己的类型
type U = [string, number, boolean];
let v: U = ["ajax", 1, true];

自定义类型

//interface 指定类型
interface MyType {
	a: string;
	b: number; //属性和属性之间也可以用分号
	c?: boolean; //可选
	readonly d?: string; //可选 只读不能修改
	[key: string]: any; //键和值都是任意
	onChange: (a: any) => void; //  (a:any)=>  void 整体是一个函数类型
}
let w: MyType = {
	a: "ajax",
	b: 1,
	c: true,
	d: "axios",
	"123": 123,
	ABC: "ABC",
	onChange: (a) => {
		console.log("onChange");
	},
};
//  (a:any)=>  void 整体是一个函数类型
let x: (a: any) => void = (a: any) => {
	console.log(a);
};
type Y = (a: any) => void;
let y: Y = (a: any) => {
	console.log(a);
};

联合类型

//从现有的类型中构建出新的类型,由两个或者多个组合而成
let z: number | string | boolean = true;
z = "string";
z = 110;
//一般情况下都会给联合类型起别名 ,别名不能重复
type Z = number | string | boolean;
let zz: Z = 110;

//interface 可以重名
interface Itype1 {
	a: string;
}
interface Itype {
	b: number;
}
type AA = Itype1 | Itype1; //联合类型

//缩小联合

function BB(id: number | string) {
	if (typeof id === "string") {
		console.log(id.toUpperCase());
	} else {
		console.log(id.toFixed(2));
	}
}
BB(10);
BB("String");

//交叉类型

interface CC {
	a: string;
}
interface DD {
	b: number;
}
type EE = CC & DD;
let FF: EE = {
	a: "hello",
	b: 2,
};
console.log(FF);

//字面量类型 每个子类型都是字面量类型

type GG = "primary" | "danger" | "info";
let HH: GG = "primary";
HH = "danger";
HH = "info";

type II = "top" | "bottom" | "left" | "right";
let KK: II = "top";

//类型断言 as

let LL = {
	url: "http://www.google.com",
	method: "GET",
};
function ajax(url: string, method: "GET" | "POST") {
	console.log(url);
	console.log(method);
}
// 这里 LL.method 是一个字符串值,
//不能把字符串值赋值给定义为"GET"字面量类型的method
//所以需要类型断言as
// 告诉ts编译器LL.method的字符串值就是字面量"GET"类型
ajax(LL.url, LL.method as "GET");

//函数类型

type FnType = (num1: number, num2: number) => number;
const MM: FnType = (num1: number, num2: number): number => {
	return num1 + num2;
};
// 如果设置了形参的默认值 可以省略类型不写
const NN: FnType = (num1 = 1, num2: number = 2): number => {
	return num1 + num2;
};
//如果参数个数不固定,使用剩余函数
const OO = (...args: (string | number)[]): (number | string)[] => {
	return args;
};
OO(1, 2, 3, 4, "string");

//类型断言

const PP = document.getElementsByTagName("li") as HTMLCollection;
//非空类型断言
const QQ = (msg?: string) => {
	console.log(msg!.toUpperCase()); //msg! 非空类型断言
};
QQ();

//类型缩小 typeof

const RR = (num: number | string) => {
	if (typeof num !== "number") {
		console.log(num.toUpperCase(), num.split(" "));
	} else {
		console.log(num.toFixed(2));
	}
};
RR(100);

//类型缩小 ==/===

type Derict = "top" | "bottom" | "right" | "left";
let SS = (d: Derict) => {
	if (d === "top") {
		return "top";
	} else if (d === "bottom") {
		return "bottom";
	} else if (d === "right") {
		return "right";
	} else if (d === "left") {
		return "left";
	}
};
SS("bottom");

//类型缩小 instanceof

//类型缩小 in

interface TT {
	code: () => void;
}
interface UU {
	sing: () => void;
}
function VV(argus: TT | UU) {
	if ("code" in argus) {
		argus.code();
	} else if ("sing" in argus) {
		argus.sing();
	}
}
const WW: TT = {
	code() {
		console.log("code");
	},
};
const XX: UU = {
	sing() {
		console.log("sing");
	},
};

//泛型 T K V E O U

function foo<T>(args: T) {
	console.log(typeof args);
}
foo(123);
foo(true);
foo("ajax");

function fooo<T, U>(args1: T, args2: U) {
	console.log(args1, args2);
}
fooo(123, 456);

// 自定义类型泛型

interface Man<T, U = number> {
	uname: T;
	age: U;
}
let XXX: Man<string> = {
	uname: "axios",
	age: 33,
};
console.log(XX);

///
interface Ilength {
	length: number;
}
function xy(argus: Ilength) {
	return argus.length;
}
function xyz<T>(argus: Ilength): number {
	return argus.length;
}
function yyy<T>(argus: T): T {
	return argus;
}
function zzz<T extends Ilength>(argus: T): T {
	return argus;
}

//类型声明