TS入门学习笔记

1.any与unknown的区别

any = 万能类型 + 放弃类型检查 unknown = 万能类型 + 保留类型检查

function myFunc(params: unknown) {
  //...
}
myFunc({})
myFunc([])
myFunc(true)


function myFunc1(params: unknown) {
  (params as unknown[]).forEach(element => {
    element = (element as number) + 1
  })
}

interface IUser {
  name: string;
  job?: IJob;
}
interface IJob {
  title: string;
}
const user: IUser = {
  name: 'foo',
  job: {
    title: 'bar'
  }
}
const { name, job = {} as IJob } = user
const { title } = job

type Status<T> = 'success' | 'failure' | 'pending' | T


// const m: Status = 'success'
type CompleteStatus = Status<'offline'>

const m: CompleteStatus = 'offline'


function factory<T1> (input: T1) : T1{
  return input
}

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

type PartialUser = Partial<User>

const partialUser: PartialUser = {
  name: 'John',
  age: 20
}

type RequiredUser = Required<User>
const requiredUser: RequiredUser = {
  name: 'johnn',
  age: 2,
  email: ''
}



type ReadonlyUser = Readonly<User>

const readonlyUser: ReadonlyUser = {
  name: 'johnn',
  age: 2,
  email: ''
}

readonlyUser.name = ''


type UserProps = 'name' | 'job' | 'email'
type User2 = Record<UserProps, string>

对象类型

type User3 = {
  name: string;
  age: number;
  email: string;
  phone: string;
}

// Pick它会对这个对象类型进行裁剪，只保留你传入的属性名组成的部分
type UserBasicInfo = Pick<User3, 'name' | 'age'>

const userBasicInfo: UserBasicInfo = {
  name: 'john',
  age: 30
}

// Omit类型就是Pick类型的另一面，它会移除传入的属性名的部分，只保留剩下的部分作为新的对象类型
type UserWithoutPhone = Omit<User, 'phone'>
const userWithoutPhone: UserWithoutPhone = {
  name: '2',
  age: 30,
  email: 'ss'
}

集合类型的Exclude和Extract

// Exclude它能够从一个类型中移除另一个类型中也存在的部分：
type UserProps2 = 'name' | 'age' | 'email' | 'phone' | 'address'
type RequiredUserProps = 'name' | 'email'

type OptionalUserProps = Exclude<UserProps2, RequiredUserProps>
const optionalUserProps: OptionalUserProps = 'age' // 'age' | 'phone' | 'address'

// Extract则用于提取另一个类型中也存在的部分
type RequiredUserProps2 = Extract<UserProps, RequiredUserProps>
const requiredUserPropsOnly: RequiredUserProps2 = 'name' // 'name' | 'email'

函数类型

// 内置工具类型中提供了Parameters和ReturnType这2个类型类提取函数的参数与返回值类型

type Add = (x: number, y: number) => number;
type AddParams = Parameters<Add> // [number, number]
type AddResult = ReturnType<Add> // number

const addParams: AddParams = [1, 2]
const addResult: AddResult = 3


// 异步函数类型，提前返回值类型

const promise = new Promise<string>((resolve) => {
  setTimeout(() => {
    resolve('hello, world')
  })
})

type PromiseInput = Promise<string>
type AwaitedPromiseInput = Awaited<PromiseInput> // string