TS基础类型

1-静态类型

// 静态类型 (静态类型一旦定义就不能改变)
const count: number = 1;
// count.  所有的number类型的方法都可以使用,它不仅不可以改变,同时也继承了所有本类型的方法

// 接口定义类型
interface zhangsan {
  name: string;
  age: number;
}

const people: zhangsan = {
  name: "张三",
  age: 20,
};
console.log(people);//=>{ name: '张三', age: 20 }

2-基础静态类型和对象类型

// 基础静态类型和对象类型
const count1: number = 123;
console.log(count1);
const myName: string = "王麻子";
const aa: boolean = false;
const bb: null = null;
const cc: undefined = undefined;
// ts可以让你的程序具有很好的健壮性，同时给你语法提示
// 最基础的对象类型  (对象，数组，函数，class)
const xiaohong: {
  name: string;
  age: number;
} = {
  name: "张三",
  age: 15,
};
console.log(xiaohong);
// 数组形式的对象类型
const a1: string[] = ["111"];
const a2: number[] = [1, 2, 3];
// 类类型
class Person {}
const zhangsan: Person = new Person();
// 函数形式对象类型;
const xx: () => string = () => {
  return "123";
};
const xx1: () => number = () => {
  return 123;
};
function a(): string {
  return "123";
}
// 对象类型(对象类型，函数类型，类类型，数组类型)

3- 类型注解和类型推断

// 类型注解和类型推断

let count2 = 12; //这里可以自动推断出类型
// 如果能进行类型推断的话，就不需要写类型注解了
const one = 1;
const two = 2;
const three = one + two; // 这个时候可以不写:number

// 下面的就需要写上类型注解了
function getTotal(one: number, two: number) {
  return one + two;
}
const total = getTotal(1, 2);

// 在对象中属性是可以直接推断出来的
const xiaohui = {
  name: "小惠",
  age: 20,
};

4- 函数参数和返回类型定义

// 函数参数和返回类型定义
function getTotal1(one: number, two: number): number {
  //   return one + two + "";
  return one + two;
}
const total2 = getTotal1(1, 2);

// 返回string
function getStr(v: string): string {
  return "" + v;
}
getStr("aaa");

function hasNoReturnFunc(): void {
  console.log(1111);
}
// never返回值
function errorFunction(): never {
  throw new Error();
  console.log("这里永远也执行不到");
}
function forNever(): never {
  while (true) {}
  console.log(12121);
}
// forNever();

// 函数参数是对象的时候，如何确定对象的属性类型
function add({ one, two }: { one: number; two: number }) {
  return one + two;
}
const sum = add({ one: 1, two: 3 });
console.log(sum);

function getnumber({ one }: { one: string }) {
  return one;
}
console.log(getnumber({ one: "xxx" }));

5- 数组类型定义

// 数组类型定义
const numberArr = [1, 2, 3];
const aaa2 = ["12", "1212", "1212"];
const hunheArr = [1, "2", 3, false];
const lianhe: (string | number | boolean)[] = [1, 2, 3, "1212", false];
const c1: null[] = [null, null];
const c2: undefined[] = [undefined, undefined, undefined];

// 在开发的时候数组对象的类型是经常使用的
const person = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 21 },
  { id: 3, name: "王五", age: 22 },
];

const person1: { id: number; name: string; age: number }[] = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 21 },
  { id: 3, name: "王五", age: 22 },
];
// 上面的写法中太长
// 用类型别名进行改造
// interface  注意区分
type p1 = { id: number; name: string; age: number };

const person2: p1[] = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 21 },
  { id: 3, name: "王五", age: 22 },
];

// 用class进行改造
class p2 {
  id: number;
  name: string;
  age: number;
}
const person3: p2[] = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 21 },
  { id: 3, name: "王五", age: 22 },
];

6- 元组

// 元组
// 元组实际上是数组的加强版
const xiaopengyous = ["小张", "小花", "小红"];
const arr1 = ["1221", 1, "121"];
const arr2: [number, string, number, string] = [1, "12", 1, "34"];

// 二维数组
const xxx3: [string, number, string][] = [
  ["121", 12, "32323"],
  ["121", 12, "32323"],
  ["121", 12, "32323"],
  ["121", 12, "32323"],
];

7- 接口

// 接口
// 身高不能大于170，年龄不能超过30
const screenResume = (name: string, age: number, height: number) => {
  age < 30 && height >= 170 && console.log(name + "通过");
  (age >= 30 || height < 170) && console.log(name + "被淘汰");
};
// screenResume("张三", 32, 185);
// screenResume("李四", 28, 175);

const getResume = (name: string, age: number, height: number) => {
  console.log(name + "年龄是:" + age);
  console.log(name + "身高是:" + height);
};
// getResume("张三", 32, 185);
// getResume("李四", 28, 175);

// 上面的代码重复了
interface People {
  name: string;
  age: number;
  height: number;
}
// type People = {
//   name: string;
//   age: number;
//   height: number;
// };
const wangwu: People = {
  name: "王五",
  age: 28,
  height: 185,
};
const zhaoliu: People = {
  name: "赵六",
  age: 22,
  height: 159,
};
const screenResume1 = (people: People) => {
  people.age < 30 && people.height >= 170 && console.log(people.name + "通过");
  (people.age >= 30 || people.height < 170) &&
    console.log(people.name + "被淘汰");
};
// screenResume1(wangwu);
const getResume1 = (people: People) => {
  console.log(people.name + "年龄是:" + people.age);
  console.log(people.name + "身高是:" + people.height);
};
getResume1(zhaoliu);

8-泛型

// 泛型
// function join(
//   first: string | number | boolean,
//   second: string | number | boolean
// ) {
//   return `${first}${second}`;
// }
// console.log(join("123", 12));
// 让第一个参数和第二个参数类型一摸一样(string,number,boolean)

function join<T>(first: T, second: T) {
  return `${first}${second}`;
}
// console.log(join<string>("11", "22"));
// console.log(join<number>(12, 12));
// console.log(join<string[]>(["11", "22", "22"], ["12", "21", "121"]));
// console.log(join<number[]>([11, 22, 33], [44, 55, 66]));
// function fanxing<ANY>(params: ANY) {
//   return params;
// }

// console.log(fanxing<string>("112"));

function fanxing<ANY>(params: Array<ANY>) {
  return params;
}
console.log(fanxing<string>(["11", "22"]));