The following questions are from the discussion with company partners and net friends, sorted into chapters, hoping to provide another way of thinking (to avoid stepping on the pit) to solve the problem.
Function overloading
TypeScript provides function overloading to handle scenarios where the return type of a function is different depending on its parameters. You only need to define multiple types for the same function, as shown below:
declare function test(a: number) :number;
declare function test(a: string) :string;
const resS = test('Hello World'); // resS is inferred to be of type string;
const resN = test(1234); // resN is inferred to be of type number;
Copy the codeIt can also be used in scenarios with different parameters and the same return value type, so we just need to know which parameters can be used under which function type definition.
Consider the following example:
interface User {
name: string;
age: number;
}
declare function test(para: User | number, flag? :boolean) :number;
Copy the codeIn the test function, we probably intended to pass no flag when para is User and flag when para is number. TypeScript doesn’t know this. Flag also allows you to pass in para as User:
const user = {
name: 'Jack',
age: Awesome!
}
// No error reported, but against the idea
const res = test(user, false);
Copy the codeUsing function overloading can help us achieve:
interface User {
name: string;
age: number;
}
declare function test(para: User) :number;
declare function test(para: number, flag: boolean) :number;
const user = {
name: 'Jack',
age: Awesome!
};
// bingo
// Error: Parameter mismatch
const res = test(user, false);
Copy the codeIn a real project, you might want to write a few more steps, as in class:
interface User {
name: string;
age: number;
}
const user = {
name: 'Jack',
age: 123
};
class SomeClass {
/** * note 1 */
public test(para: User): number;
/** * note 2 */
public test(para: number, flag: boolean) :number;
public test(para: User | number, flag? :boolean) :number {
// Implement it
return 11; }}const someClass = new SomeClass();
// ok
someClass.test(user);
someClass.test(123.false);
// Error
someClass.test(123);
someClass.test(user, false);
Copy the codeMapping type
Mapping types have been refined and enhanced since TypeScript 2.1 came out. In version 2.1, you can use keyof to get the key type of an object, and built-in Partial, Readonly, Record, and Pick mappings. ThisType added in version 2.3; Version 2.8 added Exclude, Extract, NonNullable, ReturnType, InstanceType; At the same time, add conditional types and enhance keyof capabilities in this version; Version 3.1 supports mapping tuples to arrays. All of this means that mapping types play an important role in TypeScript.
ThisType, which does not appear in the official documentation, is mainly used to type this in object literals:
// Compile with --noImplicitThis
typeObjectDescriptor<D, M> = { data? : D; methods? : M & ThisType<D & M>;// Type of 'this' in methods is D & M
}
function makeObject<D.M> (desc: ObjectDescriptor<D, M>) :D & M {
let data: object = desc.data || {};
let methods: object = desc.methods || {};
return{... data, ... methods }as D & M;
}
let obj = makeObject({
data: { x: 0, y: 0 },
methods: {
moveBy(dx: number, dy: number) {
this.x += dx; // Strongly typed this
this.y += dy; // Strongly typed this}}}); obj.x =10;
obj.y = 20;
obj.moveBy(5.5);
Copy the codeThisType is the reason Vue 2.5 has enhanced TypeScript support.
There are many mapping types built in, but in many cases we need to customize the mapping type for our own project:
For example, you might want to retrieve function types from interface types:
type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T];
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;
interface Part {
id: number;
name: string;
subparts: Part[];
updatePart(newName: string) :void;
}
type T40 = FunctionPropertyNames<Part>; // "updatePart"
type T42 = FunctionProperties<Part>; // { updatePart(newName: string): void }
Copy the codeFor example, you might alias a method that belongs to one property somewhere else in some way for convenience.
For example, SomeClass has an attribute value = [1, 2, 3]. You might add this functionality to your class in Decorators: When you call this.find() in SomeClass, you’re actually calling this.value.find(), but TypeScript doesn’t know that:
class SomeClass {
value = [1.2.3];
someMethod() {
this.value.find(/ *... * /); // ok
this.find(/ *... * /); // Error: SomeClass does not have a find method.}}Copy the codeWith the help of mapping types and interface + class declarations, we can achieve our objectives:
type ArrayMethodName = 'filter' | 'forEach' | 'find';
type SelectArrayMethod<T> = {
[K in ArrayMethodName]: Array<T>[K]
}
interface SomeClass extends SelectArrayMethod<number> {}
class SomeClass {
value = [1.2.3];
someMethod() {
this.forEach(/ *... * /) // ok
this.find(/ *... * /) // ok
this.filter(/ *... * /) // ok
this.value // ok
this.someMethod() // ok}}const someClass = new SomeClass();
someClass.forEach(/ *... * /) // ok
someClass.find(/ *... * /) // ok
someClass.filter(/ *... * /) // ok
someClass.value // ok
someClass.someMethod() // ok
Copy the codeIt can also be used when exporting the SomeClass class.
Where it might be a bit of a weakness, in this code interface SomeClass extends SelectArrayMethod
{} you need to manually add the specific type of the stereotype (I haven’t thought of a better way yet).
Types of assertions
Type assertions are used to explicitly tell TypeScript the specific type of a value, and are used wisely to reduce our workload.
For example, if a variable has no initial value, but we know its type information (it may be returned from the back end), how can we deduce the type information correctly and still function correctly? One online recommendation is to set the initial value and then use Typeof to retrieve the type (which may be used elsewhere). However, I may be lazy and don’t like setting initial values, so using type assertions can solve this problem:
interface User {
name: string;
age: number;
}
export default class NewRoom extends Vue {
private user = {} as User;
}
Copy the codeBy adding an assertion when setting initialization, we don’t need to add an initial value and the editor will prompt the code as usual. If you have a lot of user attributes, you can take care of a lot of unnecessary work and define interfaces that can be used elsewhere.
Enumerated type
Enumerations are divided into numeric types and string types. Enumerations of numeric types can be used as flags:
// https://github.com/Microsoft/TypeScript/blob/master/src/compiler/types.ts#L3859
export const enum ObjectFlags {
Class = 1 << 0.// Class
Interface = 1 << 1.// Interface
Reference = 1 << 2.// Generic type reference
Tuple = 1 << 3.// Synthesized generic tuple type
Anonymous = 1 << 4.// Anonymous
Mapped = 1 << 5.// Mapped
Instantiated = 1 << 6.// Instantiated anonymous or mapped type
ObjectLiteral = 1 << 7.// Originates in an object literal
EvolvingArray = 1 << 8.// Evolving array type
ObjectLiteralPatternWithComputedProperties = 1 << 9.// Object literal pattern with computed properties
ContainsSpread = 1 << 10.// Object literal contains spread operation
ReverseMapped = 1 << 11.// Object contains a property from a reverse-mapped type
JsxAttributes = 1 << 12.// Jsx attributes type
MarkerType = 1 << 13.// Marker type used for variance probing
JSLiteral = 1 << 14.// Object type declared in JS - disables errors on read/write of nonexisting members
ClassOrInterface = Class | Interface
}
Copy the codeThe TypeScript SRC/Compiler /types source code defines a number of enumerations of constants based on numeric types as shown above. They are an efficient way to store and represent a set of Boolean values.
An example of how to use TypeScript is provided in Understanding TypeScript:
enum AnimalFlags {
None = 0,
HasClaws = 1 << 0,
CanFly = 1 << 1,
HasClawsOrCanFly = HasClaws | CanFly
}
interface Animal {
flags: AnimalFlags;
[key: string] :any;
}
function printAnimalAbilities(animal: Animal) {
var animalFlags = animal.flags;
if (animalFlags & AnimalFlags.HasClaws) {
console.log('animal has claws');
}
if (animalFlags & AnimalFlags.CanFly) {
console.log('animal can fly');
}
if (animalFlags == AnimalFlags.None) {
console.log('nothing'); }}var animal = { flags: AnimalFlags.None };
printAnimalAbilities(animal); // nothing
animal.flags |= AnimalFlags.HasClaws;
printAnimalAbilities(animal); // animal has claws
animal.flags &= ~AnimalFlags.HasClaws;
printAnimalAbilities(animal); // nothing
animal.flags |= AnimalFlags.HasClaws | AnimalFlags.CanFly;
printAnimalAbilities(animal); // animal has claws, animal can fly
Copy the code| = in the example code used to add a logo, & = and ~ used to delete logo, | to merge.