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);