Fork me on GitHub

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

  

 

 

 

 

posted @ 2022-11-04 14:26  小白不白10  阅读(114)  评论(0编辑  收藏  举报