TS类型入门

联合类型

let a: number | string | boolean | undefined = undefined
a = 10

数组

数组类型 两种表示方式

1.类型[ ]

2.Array<类型>

const arr1: string[] = ['a', 'b', 'c']
const arr2 = [1, 2, 3, 4, 5]
const arr3: Array<number> = [1, 2, 3, 4]
const arr4: Array<string> = ['a', 'b', 'c']
//空数组赋值：在strict严格检查下 默认事any类型
const arr5 = []
arr5.push(1)
arr5.push('a')

数组也能用联合类型

const arr6: (string | number)[] = ["a", 1, "b", 2];
const arr7: Array<string | number> = ["a", 1, "b", 2];
//注意和下面的写法进行区分
const arr8: string[] | number[] = [1, 2, 3, 4];
const arr9: Array<string> | Array<number> = ["a", "b", "c", "d"];

元组

元组类型

const tuple1: [string, number] = ["a", 1];
//规定数组长度及每个item类型
const tuple2: [number, number, number] = [1, 2, 3];
//使用场景：坐标
let position: [number, number] = [39.5432, 118.2452];

一个容易混淆的赋值情况 ：元组|数组

let value = [];
let tuple3: [] = []; //空元组

函数

定义函数必须返回 及返回类型

function add(a: number, b: number): string {
  return a + b + "";
}
//参数后加？，表示可选 可以不用传
//默认void
//如果函数没有返回值类型，默认返回类型是void
function del(a: number, b: number, c?: number): void {
  console.log("a,b,c");
}
//默认参数本身就是可选参数
function sum(a: number, b: number, c = 10) {
  console.log(a, b, c);
}
add(1, 2);
del(1, 2, 3);
//剩余参数
const fn = (a: number, b: number, ...rest: number[]) => {
  console.log("---", a, b, rest);
};
fn(1, 2, 3, 4, 5, 6); //--- 1 2 [ 3, 4, 5, 6 ]

泛型

指定类型

function identity<T>(arg: T): T {
  return arg;
}
let output1 = identity("myString");
let output2 = identity(123);
function getTuple<T>(a: T, b: T): [T, T] {
  return [a, b];
}
const as = getTuple<string>("hello", "world");
console.log("as", as); //as [ 'hello', 'world' ]

元组不同类型 

function getTuple2<T, k>(a: T, b: k): [T, k] {
  return [a, b];
}
const as1 = getTuple2<string, number>("hello", 2345);
console.log("as1", as1); //as1 [ 'hello', 2345 ]
const as2 = getTuple2("hello", 1);
console.log("as2", as2); //as2 [ 'hello', 1 ]

模拟数组过滤

//callback返回类型必须是boolean类型
function myNumberString(
  arr: number[],
  callback: (item: number, index?: number) => boolean
) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (callback(item, i)) {
      result.push(item);
    }
  }
  return result;
}
//callback必须传参
const filterSet = myNumberString([1, 2, 3, 4, 5], (item) => {
  return item % 2 === 0;
});
console.log("filterSet", filterSet); //filterSet [ 2, 4 ]
//使用泛型参数定义filter函数
function myNumberString1<T>(
  arr: T[],
  callback: (item: T, index?: number) => boolean
): T[] {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (callback(item, i)) {
      result.push(item);
    }
  }
  return result;
}
const filterSet2 = myNumberString1(["XXX.ts", "xvbs.js", "aaa.ts"], (item) => {
  return item.endsWith("ts");
});
console.log(filterSet2); //[ 'XXX.ts', 'aaa.ts' ]

对象字面量类型

自定义类型

两种定义类型的方式

类型别名：创建一个类型的新的名字，类型别名可以是任何有效类型

type 类型别名 =/*类型 */

type Pointer = {
  x: number;
  y: number;
};
type ID = number | string;
type Age = number;
type User = {
  id: ID;
  name: string;
  age: Age;
};
const obj3: User = { id: 1, name: "tom", age: 21 };

接口：接口时面向对象的概念，所以一般用于定义对象

interface 接口名{/*属性名：属性类型 */}

interface Point {
  x: number;
  y: number;
}
interface Person {
  id: ID;
  name: string;
  age: Age;
}
const obj4: Person = { id: 1, name: "tom", age: 21 };
//在函数和数组中使用就很方便
function fn2(user: User) {
  console.log(user.name);
}
const person1: Person[] = [
  { id: 1, name: "tom", age: 21 },
  { id: 2, name: "jerry", age: 34 },
];
//需要返回User类型
type infoFn = (id: number, name?: string) => string;

可选属性和函数声明

interface Book {
  id: number;
  name: string;
  price?: number;
  //函数类型的表示方式
  show(id: number): void;
  filter?: (id: number) => void;
  info?: infoFn;
  author: User;
}
const book: Book = {
  id: 1,
  name: "java",
  price: 88,
  show(id: number) {
    console.log(id);
  },
  filter(id: number) {
    console.log(id);
  },
  info(id: number, name?: string) {
    return "hello";
  },
  author: { id: 2, name: "jerry", age: 34 },
};

交叉类型

交叉类型是将多个类型合并为一个类型

类型A &类型B

type A = {
  id: number;
  name: string;
};
type B = {
  age: number;
};
type C = A & B;
const obj3: C = {
  id: 2,
  name: "jerry",
  age: 34,
};
type D = A | B;
//类型为A 、B  、A & B;
const obj4: D = {
  id: 2,
  name: "jerry",
  age: 34,
};

类型断言

TS会根据上下文推断，有时候可以人为干涉，确定某一个类型

类型断言:告诉TS complier“我知道我在做什么，这里没有类型安全问题 我自己来掌握”

允许我们使用更宽松的方式处理类型问题

语法 ：1.值as类型 ；2.<类型>值

let someValue: any = "this is a string";
//建议使用as
//react 中jsx语法会与<类型>值产生歧义
let strLength1 = (someValue as string).length;
let strLength2 = (<string>someValue).length;
//非空断言
//当你确定某个值不是null或undefined时候，可以直接使用非空断言
//语法：值
let maybeString: string | undefined = "hello";
let defineString = maybeString;
function getRandom(length?: number) {
  if (!length || length <= 0) {
    return undefined;
  }
  return Math.random().toString(36).slice(-length); //从后往前
}
console.log(getRandom(6)); //rjtyat 获取随机六位字符串

非空断言

type Box = {
    id: number
    name: string
}
function getBox(): Box | undefined {
    if (Math.random() > 0.5) {
        return {
            id: 1,
            name: 'box',
        } as Box
    }
    return undefined
}
function creaateProduction(box: Box) {}
//不为空  el! 非空断言
creaateProduction(getBox()!)
creaateProduction(getBox() as Box)

比如常见的DOM操作

const inputDom = document.querySelector('input')
inputDom!.addEventListener('change', (e) => {
    console.log((e.target as HTMLInputElement).value)
})

可选链操作符

ES2020 node 14++

语法：对象?.属性名

interface Address {
    city?: string
    street?: string
}
interface Student {
    name?: string
    address?: Address
}
const student: Student = {
    name: 'jack',
    address: {
        city: '成都',
        // street: '人民大街',
        //如不填写street,下方打印undefined
    },
}
let street = student.address?.street
console.log(street) //人民大街