Typescript best practices (一)

• As we all know, JavaScript is a very flexible programming language. This flexibility makes it one of the most popular programming languages on the one hand, but also leads to variable code quality, high maintenance costs, and runtime errors.

• TypeScript is JavaScript with the type system added. is suitable for projects of any size. TypeScript's type system largely compensates for JavaScript's shortcomings.
• The type system is divided into dynamic type and static type according to 「type check time」 :
  • Dynamic typing means that type checking is performed only at runtime. This language's type errors often result in runtime errors. The familiar JavaScript is dynamically typed. It is an interpreted language with no compile phase.
  • Static typing means that the type of each variable can be determined at compile time. Type errors in this language often result in syntax errors. TypeScript is static because it needs to be compiled to JavaScript before it can be run, and TypeScript is typed at compile time.
• Beginners may think that using TypeScript requires extra code and makes development less efficient. What they may not know is that TypeScript enhances the IDE, including code completion, interface hints, jump to definitions, code refactoring, and more, which greatly improves development efficiency. TypeScript's type system brings greater maintainability and fewer bugs to large projects.
• To improve development happiness, here's how to use TypeScript well in your projects.

Type annotation

We can comment the interface so that the editor prompts automatically. For example:

/** person information **/
interface User {
  name: string;
  age: number;
}
const person: User = {
  name: "John",
  age: 30,
};

so the editor eg vscode will show the interface information when you hover the mouse on the variable.

Type expansion

TypeScript defines types in two ways: interfac and type alias. In the following example, the types defined are the same except for the syntax:

Both interface and type aliases can be extended:

Interface and type aliases are not mutually exclusive, that is, interfaces can extend type aliases, and type aliases can extend interfaces:

When to use?

• Use interface when defining a public API (such as editing a library), so that users can easily inherit the interface;
• When defining component properties (Props) and states (State), it is recommended to use type because type is more restrictive;
• type cannot be edited twice, while interface can be extended at any time.

Declaration file

Declaration files must be suffixed with .d.ts. Typically, TypeScript parses all *.ts files in a project, and therefore includes declaration files ending in .d.ts.

Third Party Declaration Document

• When using a third-party library in a TypeScript project, we need to reference its declaration file to get code completion, interface hints, etc.
• For most third-party libraries, the community has already defined their declaration files for us to download and use. It is recommended to use @types to manage the declaration files of third-party libraries in a unified manner. The use of @types is very simple. You can directly install the corresponding declaration module using npm or yarn. Take lodash for example:

Custom declaration file

When a third party library does not provide a declaration file, we need to write our own declaration file. For example, antd-dayjs-webpack-plugin，this is a third-party library, but it does not provide a declaration file.

Add a declare Module antd-dayjs-webpack-plugin，add the following to 'typing. D. ts' mentioned earlier:

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/typescript-best-pratices

Buy me a coffee