## ts基础知识复习 https://juejin.cn/post/6844903981227966471#heading-79 ## 😊 ts中的访问修饰符 - public，任何地方 - private，只能在类的内部访问 - protected，能在类的内部访问和子类中访问 - readonly，属性设置为只读 ## 😊 const和readonly的区别 1. const用于变量，readonly用于属性 2. const在运行时检查，readonly在编译时检查 3. 使用const变量保存的数组，可以使用push，pop等方法。但是如果使用`ReadonlyArray`声明的数组不能使用push，pop等方法。 ## 😊 枚举和常量枚举（const枚举）的区别 1. 枚举会被编译时会编译成一个对象，可以被当作对象使用 2. const枚举会在ts编译期间被删除，避免额外的性能开销 ```ts // 普通枚举 enum Witcher { Ciri = 'Queen', Geralt = 'Geralt of Rivia' } function getGeraltMessage(arg: {[key: string]: string}): string { return arg.Geralt } getGeraltMessage(Witcher) // Geralt of Rivia ``` ```ts // const枚举 const enum Witcher { Ciri = 'Queen', Geralt = 'Geralt of Rivia' } const witchers: Witcher[] = [Witcher.Ciri, Witcher.Geralt] // 编译后 // const witchers = ['Queen', 'Geralt of Rivia' ``` ## 😊 ts中interface可以给Function/Array/Class做声明吗？ ```ts // 函数类型 interface SearchFunc { (source: string, subString: string): boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); return result > -1; } ``` ```ts // Array interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"]; ``` ```ts // Class, constructor存在于类的静态部分，所以不会检查 interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } } ``` ## ts中的this和js中的this有什么差异？不了解 ## 😊 ts中如何枚举联合类型的key? ```ts type Name = { name: string } type Age = { age: number } type Union = Name | Age type UnionKey

= P extends infer P ? keyof P : never type T = UnionKey ``` ## 😊 ts中 ?.、??、!.、_、** 等符号的含义？ - ?. 可选链 - ?? ?? 类似与短路或，??避免了一些意外情况0，NaN以及"",false被视为false值。只有undefind,null被视为false值。 - !. 在变量名后添加!，可以断言排除undefined和null类型 - _ , 声明该函数将被传递一个参数，但您并不关心它 - ** 求幂 - !:，待会分配这个变量，ts不要担心 ```ts // ?? let x = foo ?? bar(); // 等价于 let x = foo !== null && foo !== undefined ? foo : bar(); // !. let a: string | null | undefined a.length // error a!.length // ok ``` ## 😊 什么是抗变、双变、协变和逆变？ - Covariant 协变，TS对象兼容性是协变，父类 <= 子类，是可以的。子类 <= 父类，错误。 - Contravariant 逆变，禁用`strictFunctionTypes`编译，函数参数类型是逆变的，父类 <= 子类，是错误。子类 <= 父类，是可以的。 - Bivariant 双向协变，函数参数的类型默认是双向协变的。父类 <= 子类，是可以的。子类 <= 父类，是可以的。 ## 😊 ts中同名的interface或者同名的interface和class可以合并吗？ 1. interface会合并 2. class不可以合并 ## 😊 如何使ts项目引入并识别编译为js的npm库包？ 1. `npm install @types/xxxx` 2. 自己添加描述文件 ## 😊 ts如何自动生成库包的声明文件？可以配置`tsconfig.json`文件中的`declaration`和`outDir` 1. declaration: true, 将会自动生成声明文件 2. outDir: '', 指定目录 ## 😊 什么是泛型泛型用来来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。**简单的说，“泛型就是把类型当成参数”。** ## 😊 -?，-readonly 是什么含义用于删除修饰符 ```ts type A = { a: string; b: number; } type B = { [K in keyof A]?: A[K] } type C = { [K in keyof B]-?: B[K] } type D = { readonly [K in keyof A]: A[K] } type E = { -readonly [K in keyof A]: A[K] } ``` ## 😊 TS是基于结构类型兼容 typescript的类型兼容是基于结构的，不是基于名义的。下面的代码在ts中是完全可以的，但在java等基于名义的语言则会抛错。 ```ts interface Named { name: string } class Person { name: string } let p: Named // ok p = new Person() ``` ## 😊 const断言 const断言，typescript会为变量添加一个自身的字面量类型 1. 对象字面量的属性，获得readonly的属性，成为只读属性 2. 数组字面量成为readonly tuple只读元组 3. 字面量类型不能被扩展（比如从hello类型到string类型） ```ts // type '"hello"' let x = "hello" as const // type 'readonly [10, 20]' let y = [10, 20] as const // type '{ readonly text: "hello" }' let z = { text: "hello" } as const ``` ## 😊 type 和 interface 的区别 1. 类型别名可以为任何类型引入名称。例如基本类型，联合类型等 2. 类型别名不支持继承 3. 类型别名不会创建一个真正的名字 4. 类型别名无法被实现(implements)，而接口可以被派生类实现 5. 类型别名重名时编译器会抛出错误，接口重名时会产生合并 ## 😊 implements 与 extends 的区别 - extends, 子类会继承父类的所有属性和方法。 - implements，使用implements关键字的类将需要实现需要实现的类的所有属性和方法。 ## 😊 枚举和 object 的区别 1. 枚举可以通过枚举的名称，获取枚举的值。也可以通过枚举的值获取枚举的名称。 2. object只能通过key获取value 3. 数字枚举在不指定初始值的情况下，枚举值会从0开始递增。 4. 虽然在运行时，枚举是一个真实存在的对象。但是使用keyof时的行为却和普通对象不一致。必须使用keyof typeof才可以获取枚举所有属性名。 ## 😊 never, void 的区别 - never，never表示永远不存在的类型。比如一个函数总是抛出错误，而没有返回值。或者一个函数内部有死循环，永远不会有返回值。函数的返回值就是never类型。 - void, 没有显示的返回值的函数返回值为void类型。如果一个变量为void类型，只能赋予undefined或者null。 ## unknown, any的区别 unknown类型和any类型类似。与any类型不同的是。unknown类型可以接受任意类型赋值，但是unknown类型赋值给其他类型前，必须被断言 ## 😊 如何在 window 扩展类型 ```ts declare global { interface Window { myCustomFn: () => void; } } ``` ## 复杂的类型推导题目 ### 🤔 implement UnionToIntersection ```ts type A = UnionToIntersection<{a: string} | {b: string} | {c: string}> // {a: string} & {b: string} & {c: string} // 实现UnionToIntersection type UnionToIntersection = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never // https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type // https://jkchao.github.io/typescript-book-chinese/tips/infer.html#%E4%B8%80%E4%BA%9B%E7%94%A8%E4%BE%8B ``` ### 😊 implement ToNumber ```ts type A = ToNumber<'1'> // 1 type B = ToNumber<'40'> // 40 type C = ToNumber<'0'> // 0 // 实现ToNumber type ToNumber = T extends `${R['length']}` ? R['length'] : ToNumber; ``` ### 😊 implement Add ```ts type A = Add<1, 2> // 3 type B = Add<0, 0> // 0 // 实现ADD type NumberToArray = T extends R['length'] ? R : NumberToArray type Add = [...NumberToArray, ...NumberToArray]['length'] ``` ### 😊 implement SmallerThan ```ts type A = SmallerThan<0, 1> // true type B = SmallerThan<1, 0> // false type C = SmallerThan<10, 9> // false // 实现SmallerThan type SmallerThan = N extends L['length'] ? M extends R['length'] ? false : true : M extends R['length'] ? false : SmallerThan; ``` ### 😊 implement LargerThan ```ts type A = LargerThan<0, 1> // false type B = LargerThan<1, 0> // true type C = LargerThan<10, 9> // true // 实现LargerThan type LargerThan = N extends L['length'] ? false : M extends R['length'] ? true : LargerThan; ``` ### 😊 implement IsAny ```ts type A = IsAny // false type B = IsAny // true type C = IsAny // false type D = IsAny // false // 实现IsAny type IsAny = true extends (T extends never ? true : false) ? false extends (T extends never ? true : false) ? true : false : false; // 更简单的实现 type IsAny = 0 extends (T & 1) ? true : false; ``` ### 😊 implement Filter ```ts type A = Filter<[1,'BFE', 2, true, 'dev'], number> // [1, 2] type B = Filter<[1,'BFE', 2, true, 'dev'], string> // ['BFE', 'dev'] type C = Filter<[1,'BFE', 2, any, 'dev'], string> // ['BFE', any, 'dev'] // 实现Filter type Filter = T extends [infer P, ...infer Q] ? 0 extends (P & 1) ? Filter : P extends A ? Filter : Filter : N; ``` ### 😊 implement TupleToString ```ts type A = TupleToString<['a']> // 'a' type B = TupleToString<['B', 'F', 'E']> // 'BFE' type C = TupleToString<[]> // '' // 实现TupleToString type TupleToString = A['length'] extends T['length'] ? S : TupleToString ``` ### 😊 implement RepeatString ```ts type A = RepeatString<'a', 3> // 'aaa' type B = RepeatString<'a', 0> // '' // 实现RepeatString type RepeatString = A['length'] extends C ? S : RepeatString ``` ### 😊 implement Push ```ts type A = Push<[1,2,3], 4> // [1,2,3,4] type B = Push<[1], 2> // [1, 2] type C = Push<[], string> // [string] // 实现Push type Push = T extends [...infer P] ? [...P, I] : [I] ``` ### 😊 implement Flat ```ts type A = Flat<[1,2,3]> // [1,2,3] type B = Flat<[1,[2,3], [4,[5,[6]]]]> // [1,2,3,4,5,6] type C = Flat<[]> // [] // 实现Flat type Flat = T extends [infer P, ...infer Q] ? P extends any[] ? [...Flat

, ...Flat] : [P, ...Flat] : []; ``` ### 😊 implement Shift ```ts type A = Shift<[1,2,3]> // [2,3] type B = Shift<[1]> // [] type C = Shift<[]> // [] // 实现Shift type Shift = T extends [infer P, ...infer Q] ? [...Q] : []; ``` ### 😊 implement Repeat ```ts type A = Repeat // [number, number, number] type B = Repeat // [string, string] type C = Repeat<1, 1> // [1, 1] type D = Repeat<0, 0> // [] // 实现Repeat type Repeat = R['length'] extends C ? R : Repeat ``` ### 😊 implement ReverseTuple ```ts type A = ReverseTuple<[string, number, boolean]> // [boolean, number, string] type B = ReverseTuple<[1,2,3]> // [3,2,1] type C = ReverseTuple<[]> // [] // 实现ReverseTuple type ReverseTuple = T extends [...infer Q, infer P] ? A['length'] extends T['length'] ? A : ReverseTuple : A; ``` ### 😊 implement UnwrapPromise ```ts type A = UnwrapPromise> // string type B = UnwrapPromise> // null type C = UnwrapPromise // Error // 实现UnwrapPromise type UnwrapPromise = T extends Promise ? P : Error; ``` ### 😊 implement LengthOfString ```ts type A = LengthOfString<'BFE.dev'> // 7 type B = LengthOfString<''> // 0 // 实现LengthOfString type LengthOfString = T extends `${infer P}${infer Q}` ? LengthOfString : A['length'] ``` ### 😊 implement StringToTuple ```ts type A = StringToTuple<'BFE.dev'> // ['B', 'F', 'E', '.', 'd', 'e','v'] type B = StringToTuple<''> // [] // 实现 type StringToTuple = T extends `${infer K}${infer P}` ? StringToTuple : A; ``` ### 😊 implement LengthOfTuple ```ts type A = LengthOfTuple<['B', 'F', 'E']> // 3 type B = LengthOfTuple<[]> // 0 // 实现 type LengthOfTuple = R['length'] extends T['length'] ? R['length'] : LengthOfTuple ``` ### 😊 implement LastItem ```ts type A = LastItem<[string, number, boolean]> // boolean type B = LastItem<['B', 'F', 'E']> // 'E' type C = LastItem<[]> // never // 实现LastItem type LastItem = T extends [...infer P, infer Q] ? Q : never; ``` ### 😊 implement FirstItem ```ts type A = FirstItem<[string, number, boolean]> // string type B = FirstItem<['B', 'F', 'E']> // 'B' // 实现FirstItem type FirstItem = T extends [infer P, ...infer Q] ? P : never; ``` ### 😊 implement FirstChar ```ts type A = FirstChar<'BFE'> // 'B' type B = FirstChar<'dev'> // 'd' type C = FirstChar<''> // never // 实现FirstChar type FirstChar = T extends `${infer P}${infer Q}` ? P : never; ``` ### 😊 implement Pick ```ts type Foo = { a: string b: number c: boolean } type A = MyPick // {a: string, b: number} type B = MyPick // {c: boolean} type C = MyPick // Error // 实现MyPick type MyPick = { [Key in K]: T[Key] } ``` ### 😊 implement Readonly ```ts type Foo = { a: string } const a:Foo = { a: 'BFE.dev', } a.a = 'bigfrontend.dev' // OK const b:MyReadonly = { a: 'BFE.dev' } b.a = 'bigfrontend.dev' // Error // 实现MyReadonly type MyReadonly = { readonly [K in keyof T]: T[K] } ``` ### 😊 implement Record ```ts type Key = 'a' | 'b' | 'c' const a: Record = { a: 'BFE.dev', b: 'BFE.dev', c: 'BFE.dev' } a.a = 'bigfrontend.dev' // OK a.b = 123 // Error a.d = 'BFE.dev' // Error type Foo = MyRecord<{a: string}, string> // Error // 实现MyRecord type MyRecord = { [Key in K]: V } ``` ### 😊 implement Exclude ```ts type Foo = 'a' | 'b' | 'c' type A = MyExclude // 'b' | 'c' type B = MyExclude // 'a' | 'b type C = MyExclude // 'a' | 'b' type D = MyExclude // never // 实现 MyExclude type MyExclude = T extends K ? never : T; ``` ### 😊 implement Extract ```ts type Foo = 'a' | 'b' | 'c' type A = MyExtract // 'a' type B = MyExtract // 'a' | 'b' type C = MyExtract // 'b' | 'c' type D = MyExtract // never // 实现MyExtract type MyExtract = T extends U ? T : never ``` ### 😊 implement Omit ```ts type Foo = { a: string b: number c: boolean } type A = MyOmit // {c: boolean} type B = MyOmit // {a: string, b: number} type C = MyOmit // {a: string, b: number} // 实现MyOmit type MyOmit = { [Key in Exclude]: T[Key] } type MyOmit = Pick> ``` ### 😊 implement NonNullable ```ts type Foo = 'a' | 'b' | null | undefined type A = MyNonNullable // 'a' | 'b' // 实现NonNullable type MyNonNullable = T extends null | undefined ? never : T; ``` ### 😊 implement Parameters ```ts type Foo = (a: string, b: number, c: boolean) => string type A = MyParameters // [a:string, b: number, c:boolean] type B = A[0] // string type C = MyParameters<{a: string}> // Error // 实现MyParameters type MyParameters any> = T extends (...params: [...infer P]) => any ? P : never ``` ### 😊 implement ConstructorParameters ```ts class Foo { constructor (a: string, b: number, c: boolean) {} } type C = MyConstructorParameters // [a: string, b: number, c: boolean] // 实现MyConstructorParameters type MyConstructorParameters any> = T extends new (...params: [...infer P]) => any ? P : never ``` ### 😊 implement ReturnType ```ts type Foo = () => {a: string} type A = MyReturnType // {a: string} // 实现MyReturnType type MyReturnType any> = T extends (...params: any[]) => infer P ? P : never; ``` ### 😊 implement InstanceType ```ts class Foo {} type A = MyInstanceType // Foo type B = MyInstanceType<() => string> // Error // 实现MyInstanceType type MyInstanceType any> = T extends new (...params: any[]) => infer P ? P : never; ``` ### 😊 implement ThisParameterType ```ts function Foo(this: {a: string}) {} function Bar() {} type A = MyThisParameterType // {a: string} type B = MyThisParameterType // unknown // 实现MyThisParameterType type MyThisParameterType any> = T extends (this: infer P, ...params: any[]) => any ? P : unknown; ``` ### 😊 implement TupleToUnion ```ts type Foo = [string, number, boolean] type Bar = TupleToUnion // string | number | boolean // 实现TupleToUnion type TupleToUnion = T extends [infer P, ...infer Q] ? TupleToUnion : R; // 其他回答 type TupleToUnion = T[number] ``` ### 😊 implement Partial ```ts type Foo = { a: string b: number c: boolean } // below are all valid const a: MyPartial = {} const b: MyPartial = { a: 'BFE.dev' } const c: MyPartial = { b: 123 } const d: MyPartial = { b: 123, c: true } const e: MyPartial = { a: 'BFE.dev', b: 123, c: true } // 实现MyPartial type MyPartial = { [K in keyof T]?: T[K] } ``` ### 😊 Required ```ts // all properties are optional type Foo = { a?: string b?: number c?: boolean } const a: MyRequired = {} // Error const b: MyRequired = { a: 'BFE.dev' } // Error const c: MyRequired = { b: 123 } // Error const d: MyRequired = { b: 123, c: true } // Error const e: MyRequired = { a: 'BFE.dev', b: 123, c: true } // valid // 实现MyRequired type MyRequired = { [K in keyof T]-?: T[K] } ``` ### 😊 implement LastChar ```ts type A = LastChar<'BFE'> // 'E' type B = LastChar<'dev'> // 'v' type C = LastChar<''> // never // 实现FirstChar type LastChar = T extends `${infer P}${infer Q}` ? LastChar : A extends [...infer L, infer R] ? R : never ; ``` ### 😊 implement IsNever ```ts // https://stackoverflow.com/questions/53984650/typescript-never-type-inconsistently-matched-in-conditional-type // https://www.typescriptlang.org/docs/handbook/advanced-types.html#v type A = IsNever // true type B = IsNever // false type C = IsNever // false // 实现IsNever type IsNever = [T] extends [never] ? true : false; ``` ### 😊 implement KeysToUnion ```ts type A = KeyToUnion<{ a: string; b: number; c: symbol; }> // 'a' | 'b' | 'c' // 实现KeyToUnion type KeyToUnion = { [K in keyof T]: K; }[keyof T] ``` ### 😊 implement ValuesToUnion ```ts type A = ValuesToUnion<{ a: string; b: number; c: symbol; }> // string | number | symbol // ValuesToUnion type ValuesToUnion = T[keyof T] ``` ### FindIndex > https://bigfrontend.dev/zh/typescript/Search ```ts type IsAny = 0 extends (T & 1) ? true : false; type IsNever = [T] extends [never] ? true : false; type TwoAny = IsAny extends IsAny ? IsAny : false; type TwoNever = IsNever extends IsNever ? IsNever : false; type SingleAny = IsAny extends true ? true : IsAny type SingleNever = IsNever extends true ? true : IsNever type FindIndex = T extends [infer P, ...infer Q] ? TwoAny extends true ? A['length'] : TwoNever extends true ? A['length'] : SingleAny extends true ? FindIndex : SingleNever extends true ? FindIndex : P extends E ? A['length'] : FindIndex : never ``` ### implement Trim ```ts type A = Trim<' BFE.dev'> // 'BFE' type B = Trim<' BFE. dev '> // 'BFE. dev' type C = Trim<' BFE . dev '> // 'BFE . dev' type StringToTuple = T extends `${infer K}${infer P}` ? StringToTuple : A; type TupleToString = A['length'] extends T['length'] ? S : TupleToString type Trim> = A extends [infer P, ...infer Q] ? P extends ' ' ? Trim : A extends [...infer M, infer N] ? N extends ' ' ? Trim : TupleToString : '' : ''; ```