TypeScript常用类型(基本类型,数组类型,类型别名type ,函数类型,对象类型,接口interface,元组,类型推论,类型断言,字面量类型,枚举类型 enum,any类型,typeof新用法)
原始基本类型
let age: number = 18; let myname: string = "tom"; let flag: boolean = true; let a: null = null; let b: undefined = undefined; let c: symbol = Symbol(); console.log(age); console.log(myname); console.log(flag); console.log(a); console.log(b); console.log(c);
数组类型
let numbers: number[] = [1, 2, 3]; //数字数组类型 let strings: string[] = ["1", "2", "3"]; //字符串数组类型 let arr: Array<string> = ["1", "2", "3"]; //数组第二种写法 let arr2: (string | number)[] = [1, "2", 3]; //联合类型(添加小括号,数组中既有数字也有字符串) let arr3: string | number[] = [1, 2, 3]; //联合类型(去掉小括号,数组中要么是数字要么是字符串,只能有一种) let arr4: Array<string | number> = [1, "2", "3"]; //联合类型(数组中既有数字也有字符串) console.log(numbers); console.log(strings); console.log(arr); console.log(arr2); console.log(arr3); console.log(arr4);
类型别名(自定义类型)
type ComObj = { count: number; name: string; }; let obj: ComObj = { count: 1, name: "tom", }; type ComArr = (number | string)[]; let arrs: ComArr = [1, 2, "3"]; console.log(obj); console.log(arrs);
函数类型(函数参数类型和返回值类型)
//函数声明式 //没有返回值的函数 function add(num1: number, num2: number) { console.log(num1 + num2); } //有返回值的函数 function add2(num1: number, num2: number): number { return num1 + num2; } //有返回值的函数 function add3(num1: number, num2: number): number { return num1 + num2; } //函数表达式 const add4 = (num1: number, num2: number): number => { return num1 + num2; }; //函数表达式第二种写法 const add5: (num1: number, num2: number) => number = (num1, num2) => { return num1 + num2; }; //函数void类型(函数没有返回值可以定义为void类型 function add6(name: string): void { console.log(name); } //函数可选参数类型 function mySlice(start?: number, end?: number): void { console.log(start, end); } add(1, 2); console.log(add2(1, 2)); console.log(add3(1, 2)); console.log(add4(1, 2)); console.log(add5(1, 2)); add6("tom"); mySlice(1, 2); mySlice(1);
对象类型
let person: { name: string; age: number; sayHi(): void } = { name: "tom", age: 18, sayHi() { console.log(1); }, }; console.log(person); //对象可选属性 function myAxios(config: { url: string; method?: string }): void { console.log(config); } myAxios({ url: "www.baidu.com" }); myAxios({ url: "www.baidu.com", method: "get" });
接口( interface类似type但是没有等号 interface只可以为对象注明类型,type可以为任何类型注明)
interface TypePerson { name: string; age: number; } // type TypePerson={ // name:string, // age:number // } let myPerson: TypePerson = { name: "tom", age: 18, }; console.log(myPerson); //接口继承 interface Person1 { x: number; y: number; } //Person2继承了Person1中的 x,y,有添加了z interface Person2 extends Person1 { z: number; } let personAll: Person2 = { x: 1, y: 2, z: 3, }; console.log(personAll);
元组
let position: number[] = [12, 23, 44]; //数组类型可添加任意多个值 let position2: [number, number] = [33, 44]; //限定值的个数
类型推论
let myAge = 18; //省略注明类型,但是ts会自动推论类型
类型断言
let htmlType = document.getElementById("aLink") as HTMLAnchorElement;
字面量类型(let声明的变量可以改变,const声明的为常量不能改变,所以const声明的就是字面量类型)
let str1 = "hello"; //str1类型为string const str2 = "hello"; //str2类型为hello
枚举类型 (enum)
enum ArrEnum { UP, Down, Left, Right, } //不设置默认0,1,2,3递增 // enum ArrEnum{UP=2,Down=4,Left=6,Right=8} //可以设置数字枚举 // enum ArrEnum{UP='Up',Down='Down',Left='Left',Right='Right'} //可以设置字符串枚举 function changeArrEnum(position: ArrEnum) { console.log(position); } changeArrEnum(ArrEnum.UP);
any类型(任何类型,不检查类型,不推荐使用)
let anyObj: any = { name: 11, age: "tom", };
ts中typeof新用法(可以在类型上下文中引用变量或属性的类型)
let p = { x: 1, y: 1 }; // function typeofP(point:{x:number,y:number}){ // console.log(point) // } //可以代替上面的写法 function typeofP(point: typeof p) { console.log(point); } typeofP(p);