基础属性类型
type AppProps = {
message: string
count: number
disabled: boolean
/** array of a type! */
names: string[]
/** string literals to specify exact string values, with a union type to join them together */
status: 'waiting' | 'success'
/** 任意需要使用其属性的对象（不推荐使用，但是作为占位很有用） */
obj: object
/** 作用和`object`几乎一样，和 `Object`完全一样 */
obj2: {}
/** 列出对象全部数量的属性 （推荐使用） */
obj3: {
id: string
title: string
}
/** array of objects! (common) */
objArr: {
id: string
title: string
}[]
/** 任意数量属性的字典，具有相同类型*/
dict1: {
[key: string]: MyTypeHere
}
/** 作用和dict1完全相同 */
dict2: Record<string, MyTypeHere>
/** 任意完全不会调用的函数 */
onSomething: Function
/** 没有参数&返回值的函数 */
onClick: () => void
/** 携带参数的函数 */
onChange: (id: number) => void
/** 携带点击事件的函数 */
onClick(event: React.MouseEvent<HTMLButtonElement>): void
/** 可选的属性 */
optional?: OptionalType
}
type，interface
interface PointX {
x: number
}
interface Point extends PointX {
y: number
}
// 类型继承
type PointX = {
x: number
}
type Point = PointX & {
y: number
}
// 接口继承类型
type PointX = {
x: number
}
interface Point extends PointX {
y: number
}
// 类型继承接口
interface PointX {
x: number
}
type Point = PointX & {
y: number
}
// 共同点：1，都可以定义对象类型。2，都可以继承扩展。
// 不同点：1，type 可以为基本类型，联合类型，元组，any。
// 2，interface 定义重名了会合并属性，type 办不到(会报错提醒 重复定义)。
React 属性类型
export declare interface AppBetterProps {
children: React.ReactNode // 一般情况下推荐使用，支持所有类型 Great
functionChildren: (name: string) => React.ReactNode
style?: React.CSSProperties // 传递style对象
onChange?: React.FormEventHandler<HTMLInputElement>
}
// useState 对象
const [user, setUser] = React.useState<IUser>({} as IUser);
export declare interface AppProps {
children1: JSX.Element // 差, 不支持数组
children2: JSX.Element | JSX.Element[] // 一般, 不支持字符串
children3: React.ReactChildren // 忽略命名，不是一个合适的类型，工具类类型
children4: React.ReactChild[] // 很好
children: React.ReactNode // 最佳，支持所有类型 推荐使用
functionChildren: (name: string) => React.ReactNode // recommended function as a child render prop type
style?: React.CSSProperties // 传递style对象
onChange?: React.FormEventHandler<HTMLInputElement> // 表单事件, 泛型参数是event.target的类型
}
关键字段解释
Record
创建一个类型
type Coord = Record<'x' | 'y', number>
// 等同于
type Coord = {
x: number,
y: number
}
Partial
将类型定义的所有属性改为可选
type Coord = Partial<Record<'x' | 'y', number>>
// 等同于
type Coord = {
x?: number,
y?: number
}
Readonly
将所有属性定义为自读
Pick
从类型定义的属性中，选取指定一组属性，返回一个新的类型定义
type Coord = Record<'x' | 'y', number>;
type CoordX = Pick<Coord, 'x'>;
// 等用于
type CoordX = {
x: number;
}
interface IPorps<T> {
tableProps: Pick<TableProps<T>, keyof TableProps<T>>;
}
Omit
去除接口中某个值，对接口做剪裁
interface Foo {
a: number;
b: string;
c: boolean;
}
// { a:number; }
type OnlyA = Pick<Foo, "a">;
type ExcludeA = Omit<Foo, "a"> // { b: string; c: boolean}
extends
条件类型
// x是y ? true : false
type Equal<x, y> = x extends y ? true : false
type Num = <1, 1> // true
// T是number类型 ? number : string
type IsNum<T> = T extends number ? number : string
type Num = IsNum<1> // number;
type Str = IsNum<'1'> // string;
keyof
类型对象，返回key组成的联合类型
type Dog = { name: string; age: number; };
type D = keyof Dog; // type D = "name" | "age"
typeof
提供对象的类型
const bmw = { name: "BMW", power: "1000hp" }
type bmwType = typeof bmw // { name: string, power: string }
enum
会被编译成对象使用
enum obj {
name = "前端娱乐圈",
num = 100
}
infer
用在extends语句后表示待推断的类型，用它取到函数返回值的类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
type Str = ReturnType<(x: string) => string> // type Str = string
断言
类型断言好比其他语言里的类型转换
尖括号 <>
let a: any = "this is a string";
let strLength: number = (<string>a).length; // a 是any类型 使用<>转成string
as
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
style={{['--bg_color' as any]: 'red'}}
非空断言 ！
排除 null和undefined
1,忽略 undefined 和 null 类型
function myFunc(maybeString: string | undefined | null) {
// Type 'string | null | undefined' is not assignable to type 'string'.
// Type 'undefined' is not assignable to type 'string'.
const onlyString: string = maybeString; // Error
const ignoreUndefinedAndNull: string = maybeString!; // Ok
}
2, 调用函数时忽略 undefined 类型
type NumGenerator = () => number;
function myFunc(numGenerator: NumGenerator | undefined) {
// Object is possibly 'undefined'.(2532)
// Cannot invoke an object which is possibly 'undefined'.(2722)
const num1 = numGenerator(); // Error
const num2 = numGenerator!(); //OK
}
// 确定赋值断言 ！
let x!: number;
initialize();
console.log(2 * x); // Ok，没加！时会报错： // Variable 'x' is used before being assigned.(2454)
function initialize() {
x = 10;
}
