TS 基础知识整理

基本类型

1. 基本：string、number、boolean
2. 数组：number[] | Array
3. any：不希望某个特定类型检查错误的的时候，就是类型不确定的可以用any
4. never类型never可以为任何类型，但是除了never其他类型都不可为never，never类型为任何类型的子类
5. void表示函数没有返回值
6. null undefinned、Symbol
7. unknown代表任何值，类似any,但是有约束，用改类型得值做任何都是不合法的，顾名思义就是不知道是什么类型

ts类型声明方式

interface User {
  name: string;
  age: number;
}

type User = {
   name: string;
   age: number;
}

class User {
  name:string;
  age: number;
}

enum E {
  a,
  b,
  c,
}

interface和type的区别
1、interface可以声明的type也都可以声明
2、扩展接口 interface Bear extends Animal {} 通过extends继承扩展
type是通过type Bear = Animal & {honey:boolean}扩展
3、用interface声明过的类型可以继续声明覆盖，type犹如let|const 声明过就不能再次声明

类型的断言

如果无法确定值得类型可以用 as 告诉系统这个值就是该类型

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

创建构造函数类型

type SomeConstructor = {
  new (s:string): SomeObject;
}
function fn(ctor:SomeConstructor){
  return new ctor("hello");
}

如何给变量附加类型

let myName: string = "hello"

function greet(name:string){}

function getFavoriteNumber(name:string):number {} //表示函数返回值是number类型


function printCoord (pt: {x: number; y?: number}){}


function prinId (id:number|string){} //联合类型

function greeter(fn: (a:string)=>void){}

修饰符、类型操作符

//?的作用表示改属性可能有可能没有
interface PaintOptions {
  shape: string;
  xPos?: number;
}

//readonly 只读
interface SomeType {
  readonly prop: string;
}

//索引签名，可能不知道所有属性得名称，但是知道值得类型
interface StringArray {
  [k:string]: string;
}

//extends扩展，A extends B? "yes":"no"在条件中当A类型可分配给右侧的类型时，为yes
interface S extends SomeType {
  kk: string;
}

//&交叉，表示且的意思

// |或得意思

//keyof 类型运算符 能够把对象类型键名组合生成键名的联合类型
type key = keyof PaintOptions  // 'shape'|'xPos'

//typeof 得出对应的类型

// in 可以遍历属性,能够映射类型，建立在索引签名的语法上
type OptionFlags ={
  [k in keyof S]:boolean
}

一些ts高阶用法

Partial<T>，把所有属性变为是否存在得属性

type Partial<T> = {
  [p in keyof T]?:T[p]|undfined;
}

//举例
interface Todo {
  title: string;
  description: string;
}

type Todo1 = Partial<Todo>  
/** 
{
  title?: string;
  description?: string;
}
  */

Required<T>，把所有属性变为必存在得属性

type Required<T> = {
  [p in keyof T]-?: T[p];
}

//例子
interface Todo {
  title?: string;
  description?: string;
}

type Todo1 = Required<Todo>  
/** 
{
   title: string;
   description: string;
}
  */

Readonly<T>，把多有属性设置为readonly

type Readonly<T> = {
  readonly [p in keyof T]:T[p];
}

// 例子
interface Todo {
  title: string;
  description: string;
}

type Todo1 = Readonly<Todo> 
/** 
{
  readonly title: string;
  readonly description: string;
}
  */

Record<Keys,Type>，构造一个对象类型，Keys为键得类型，属性值得类型为Type

type Record<k extends string|number|Symbol,T> = {
  [p in k]: T;
}

// 例子
interface CatInfo {
  age: number;
  breed: string;
}
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

Pick<T,K>，通过从中选择一组K来构造类型T

type Pick<T,K extends keyof T> = {
  [p in K] :T[p];
}

//例子
interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

Extract<T,U>，留下T与U的交集

ype Extract<T,U> = T extends U?T:never

// 例子
type T0 = Extract<"a" | "b" | "c", "a" | "f">;
     
// type T0 = "a"

Exclude<T,U>，从T剔除与U的交集

type Exclude<T,U> = T extends U?never:T

// 例子
type T0 = Exclude<"a" | "b" | "c", "a">;
     
// type T0 = "b" | "c"

Omit<T,K>，删除T中属性为K的

type Omit<T,K extends string|number|symbol> = {
  [p in Exclude<keyof T,K>]: T[p];
}

// 例子
interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};

NonNullable<T>，去除null和undefined类型

type NonNullable<T> = T extends null|undefined?never:T

// 例子
type T0 = NonNullable<string | number | undefined>;
     
//type T0 = string | number

Parameters<T>，从函数类型的参数中使用的类型构造元组类型T

type Parameters<T extends (...arges:any)=>any> = T extends (...arges: infer p)=>any?p:never 

// 例子
type T0 = Parameters<() => string>;
//type T0 = []

type T1 = Parameters<(s: string) => void>;
//type T1 = [s: string]

ConstructorParameters<T>，从构造函数类型的类型构造元组或数组类型，它产生一个包含所有参数类型的元组类型

type ConstructorParameters<T extends abstract new (...arges:any)=>any> = T extends abstract new (...arges: infer p)=> any ? p:never

//例子
class C {
  constructor(a: number, b: string) {}
}
type T3 = ConstructorParameters<typeof C>; // typeof 获取构造器类型
     
//type T3 = [a: number, b: string]

ReturnType<T>，解析出有函数返回类型组成的类型，infer表示待推断类型类似一个占位符

type ReturnType<T extends (...arges: any)=> any> = T extends (...arges: any)=> infer R ? R : any

//例子
type T0 = ReturnType<() => string>;
     
// type T0 = string

InstanceType<T>，构造一个类型，该类型由构造函数的实例类型组成的

type InstanceType<T extends abstract new (...arges: any)=>any> = T extends abstract new (...arges: any)=> infer R ? R:any

//例子
class C {
  x = 0;
  y = 0;
}
 
type T0 = InstanceType<typeof C>;
     
// type T0 = C

ThisParamterType<T>，提取函数类型的this参数的类型，如果函数类型没有参数，则为未知this

type ThisParamterType<T> = T extends (this: infer U, ...arges: never)=> any ? U : unknown

//例子
function toHex(this: Number) {
  return this.toString(16);
}
 
function numberToString(n: ThisParameterType<typeof toHex>) { // n的类型：number
  return toHex.apply(n);
}

OmitThisParameter<T>，删除this参数类型，如果类型没有显示声明this的参数，则结果是简单的类型，否则，将this创建一个没有参数的新函数类型。泛型被删除，只有最后一个重载签名被传播到新的函数类型中

type OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...arges: infer A) => infer R ? (...arges: A)=> R : T

//例子
function toHex(this: Number) {
  return this.toString(16);
}
 
const fiveToHex: OmitThisParameter<typeof toHex> = toHex.bind(5);//ts: ()=>string