Typesctipt中遇到的那些不懂的地方记录

任意属性

场景：在自定义类型的时候，有可能会希望一个接口允许有任意的属性签名，这个时候任意属性就派上用场了

         任意属性有两种定义的方式，一种属性签名是string类型的，另一种属性签名是number类型

  string类型任意属性

interface A {
    [prop: string]: number;
}

const obj: A = {
    a: 1,
    b: 3,
};

[prop: string]: number 的意思是，A 类型的对象可以有任意属性签名，string 指的是对象的键都是字符串类型的，number 则是指定了属性值的类型。

prop 类似于函数的形参，是可以取其他名字的。

  number类型任意属性

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

参考部分：https://juejin.cn/post/6855449252785717256

重载

重载的作用：TypeScript 的重载是为了给调用者看，方便调用者知道该怎么调用（同时 tsc 也会进行静态检查以避免错误的调用

unknow的使用

在typescript中，当我们不确定一个类型是什么类型的，可以选择给其声明为any或者unknow，但是实际上应该使用unknow，因为know是比较安全的

let foo: unknown = "foo"

let foo1: String = foo

unknow 是任意类型的父类型，any是任意类型的父类型，也是任意类型的子类型

extends的使用

// extends的使用方法
T extends U ？X : Y
如果T包含的类型是U包含的类型的子集，那么结果取X，否则结果取Y

as断言的使用

/**
 * @param d 日期
 * @param f 想要格式化的字符串
 */
function dateFormatter(d: Date | string, f?: string) {
    const date = new Date(d);
    if (f) {
        return `${date.getFullYear()}${f}${date.getMonth() + 1}${f}${date.getDate()}`
    } else {
        return new Date(d);
    }
}

/**
 * @param d 日期字符串
 */
function dealDate(d: string) {
    return new Date(d).getTime();
}

　　如果我们直接调用cosnt date = dealDate(dealFormatter('2020-7-28'))就会存在问题

      我们知道dealFormatter返回的是Date类型，但是程序会认为dealFormatter返回的可能是Date( )类型, 所以就会标红

      所以我们可以这么写：

const date = dealDate(dateFormatter('2020-7-28','-') as string);

// typescript中
let someValue:any = "this is a string"
let strLength:number = (someValue).length

let someValue1:any = "this is a string1"
let strLength2:number = (someValue1 as string).length

// 编译成javascript之后
var someValue = "this is a string";
var strLength = (someValue).length;
console.log('111', strLength);
var someValue1 = "this is a string1";
var strLength2 = someValue1.length;
console.log('222', strLength2);

　　

?:的理解

?:是指可选参数，可以理解为参数自动加上undefined

?.的意思基本和 && 是一样的 a?.b 相当于 a && a.b ? a.b : undefined

const a = {
      b: { c: 7 }
};
console.log(a?.b?.c);     //7
console.log(a && a.b && a.b.c);    //7

ts的declare

一般声明文件就是给js代码补充类型标准，这样在ts编译环境下就不会提示js文件“缺少类型”

声明变量使用关键字declare来表示声明其后面的全局变量的类型，比如：

// packages/global.d.ts
declare var __DEV__: boolean
declare var __TEST__: boolean
declare var __BROWSER__: boolean
declare var __RUNTIME_COMPILE__: boolean
declare var __COMMIT__: string
declare var __VERSION__: string

ts的Record

关于record的使用如下：

ts的Omit的使用

Omit的作用是剔除：

type  UserProps =  {
  name?:string;
  age?:number;
  sex?:string;
}
// 但是我不希望有sex这个属性我就可以这么写
type NewUserProps =  Omit<UserProps,'sex'> 
// 等价于
type  NewUserProps =  {
  name?:string;
  age?:number;
}

使用的场景如下(以React中为例)：

忽略类型中的某个属性值的时候，例如一个自定的InputProps类型，要继承input元素的所有属性和方法，但是InputProps中也有和input元素属性一样的类型，此时，我们想用InputProps类型里的属性，就可以选择Omit类型移除input元素里相同的类型

import React, { ReactElement, InputHTMLAttributes } from 'react'

type InputSize = 'lg' | 'sm'
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    disabled?: boolean;
    size?: InputSize;
}

ts的索引签名

索引签名的写法：

interface FormattingOptions {
    tabSize: number;
    insertSpaces: boolean;
    [key: string]: boolean | number | string;
}

ts的Partial

Partial可以快速把某个接口类型中定义的属性变为可选的

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

const Jerry:People = {
    age: 10,
    name: 'Jerry'
};

const Tom: People = {
    name: 'Tom'
}