TypeScript高级类型与使用,深入学习

TypeScript高级类型与使用,深入学习


1. ConstructorParameters:类构造函数的参数类型的元组


class User {

  constructor(uname: string, age: number) {}

}

type TCtor = ConstructorParameters;

function init(...info: TCtor) {

  const [name] = info;

  console.log('[name]', name);

}

init('我爱学习', 20);

2. Exclude:从另一个类型中排除一个类型

// A=a 判断第一个属性是否继承自第二个属性
type A = Exclude<'x' | 'a', 'x' | 'y' | 'z'>;

3. Extract:选择可分配给另一种类型的子类型

//Extract允许您通过选择两种不同类型中存在的属性来构造类型
interface FirstType {
  id: number;
  firstName: string;
  lastName: string;
}

interface SecondType {
  id: number;
  address: string;
  city: string;
}
// type ExtractType1 = "id"
type ExtractType1 = Extract;
//type ExcludeType2 = "firstName" | "lastName"
type ExcludeType2 = Exclude;

4. InstanceType:获取构造函数的实例类型

//构建函数工厂
declare function create any>(c: T): InstanceType;

class YidengA {}
class YidengB {}
let a1 = create(YidengA); // YidengA
let b1 = create(YidengB); // YidengB

5. NonNullable:从类型中排除null和undefined

//type TNon = string | number
type TNon = NonNullable;

6. Parameters:函数参数类型的元组

type IFoo = (
  name: string,
  age: number
) => { name: string; age: number; gender: string };
//type IBar = [name: string, age: number]
type IBar = Parameters;

7. Partial:将对象中的所有属性设为可选

interface User {
  id: number;
  age: number;
  name: string;
}
// type PartialUser = {
//   name?: string | undefined;
//   age?: number | undefined;
//   id?: number | undefined;
// }
type PartialUser = Partial;

8. Readonly:使对象中的所有属性为只读

interface Person {
  readonly id: number; // 直读属性
}
const data: Person = {
  id: 456,
};
//无法分配到 "id" ,因为它是只读属性。
data.id = 567;

9. ReadonlyArray:制作给定类型的不可变数组

let ydarr: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray = ydarr;
//类型“readonly number[]”上不存在属性“push”。
ro.push(2);

10. Pick:从一个复合类型中,取出几个想要的类型的组合组

interface User {
  id: number;
  age: number;
  name: string;
}
// type PickUser = { id: number; age: number; }
type PickUser = Pick;

11. Record:从键类型到值类型的映射

type petsGroup = 'dog' | 'cat' | 'fish';
interface IPetInfo {
  name: string;
  age: number;
}
//将petsGroup全部映射为IPetInfo
type IPets = Record;

const animalsInfo: IPets = {
  dog: {
    name: 'dogName',
    age: 2,
  },
  cat: {
    name: 'catName',
    age: 3,
  },
  fish: {
    name: 'fishName',
    age: 5,
  },
};

12. Required:将对象中的所有属性设为必需

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

// type PartialUser = { id?: number; age?: number; name?: string; }
type PartialUser = Partial;
//去掉问号
type PullDownRefresh = Required>;

13. ReturnType:获取函数类型的返回类型

type T0 = ReturnType<() => string>;  // string
type T1 = ReturnType<(s: string) => void>;  // void
type T2 = ReturnType<(() => T)>;  //number[] 
type T3 = ReturnType;  // { a: number, b: string }
type T4 = ReturnType<(() => T)>;  // {}                     
type T5 = ReturnType;  // any
type T6 = ReturnType;  // any
type T7 = ReturnType;  // Error
type T8 = ReturnType;  // Error
展开阅读全文

页面更新:2024-03-15

标签:类型   组合   数组   美文   问号   函数   实例   属性   分配   工厂   参数   高级

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top