任意属性
场景：在自定义类型的时候，有可能会希望一个接口允许有任意的属性签名，这个时候任意属性就派上用场了
任意属性有两种定义的方式，一种属性签名是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' }
