Introducing declarative types in JavaScript and TypeScript

There are two key points in rewriting from JavaScript syntax to TypeScript syntax. One is that class member variables (Field) need to be declared, and the other is that types must be declared for various things (variables, parameters, functions/methods, etc.).
When rewriting from ES6 syntax to TypeScript syntax, there are two important knowledge points, one is to declare class members, and the other is to declare types. Neither of these syntax features exist in JavaScript. These two points directly lead to two key questions, what types are there? How to declare?

Type

Before talking about TypeScript types, let’s review the seven types of JavaScript:

undefined

function

boolean

number

string

object

symbol

These seven types can be calculated through the typeof operator. But there are no common types such as Array, null, and Date—because they are actually objects.
One of the important features of TypeScript is type, so the types in TypeScript are much more particular. In addition to the types in JavaScript, some others (incomplete list) are also defined

Array8742468051c85b06f0a0af9e3e506b5c , or T[], represents an array of type T

null, empty type, its function is related to the strictNullChecks compilation parameter

Tuple (tuple), in the form of [Number, String]

enum T, defines the enumeration type T, which can be understood as centralized naming of numerical constants

interface T, interface, T is an interface type

class T, class, T is a type

any, representing any type

void, indicating no type, used to declare function types

never, indicating a magical type that the function cannot return

......

The specific types will not be described in detail here. The Basic Type, Interfaces, Classes, Enum, and Advanced Types sections of the official Handbook are very clear.
However, there is still a type-related feature that must be mentioned - generics. If we just talk about data types, pure JSers can still understand. After all, types are not a new thing, they just expand the types. But pure JSers may have no idea about generics.
Generics mainly use a symbol to represent some types. As long as it is a type that meets the constraint conditions (default unconstrained), this type symbol can be replaced and used, such as

function test8742468051c85b06f0a0af9e3e506b5c (v: T) {
console.log(v);}
test78180fd7e2f5f09e138c95a71ada14e6(true); // Explicitly specify T and replace test("hello") with boolean; // Infer (implicitly) ) T is replaced by string test(123);                                                  // Inference (implicit) Simply use some symbol instead of type. The name generics itself may not be easy to understand, but if you borrow the concept of "template" from C++, it will be easier to understand. For example, the above generic function can be interpreted as three functions according to subsequent calls, which is equivalent to applying a template and replacing T with the actual type:
function test(v: boolean) { ... }function test( v: string) { ... }function test(v: number) { ... }

For more detailed information about generics, please refer to the Generic section of the Handbook.
Types are briefly described here. Simple types can be understood at a glance. More advanced types will be discussed in detail later. However, since you choose to use TypeScript, you will inevitably use its static type features, so you must strengthen your awareness of identifying types and develop this habit. For pure JSers, this is a huge challenge.


Declaration type

Declaration type mainly refers to the types of variables/constants, functions/methods and class members. Use var to declare a variable in JS, and ES6 extends let and const. These types of declarations are supported by TypeScript. It is also very simple to specify a type for a variable or constant, just add a colon after the variable/constant name, and then specify the type. For example,

// # typescript
 // 声明函数 pow 是 number 类型，即返回值是 number 类型// 声明参数 n 是 number 类型function pow(n: number): number {
    return n * n;}
 // 声明 test 是无返回值的function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }}

This code demonstrates the function type and parameter type and variable type declaration. This seems to be more complicated than JavaScript code. But think about it, if we accidentally call pow somewhere like this:

// # javascript
 let n = "a";let r = pow(n);     // 这里存在一个潜在的错误

JavaScript will not check for errors in advance. It will only assign a value to r when r = pow(n) is executed. NaN. Then if r is used elsewhere, it may cause chain errors, and it may take a while of debugging to find the problem.

However, the above two lines of code cannot be translated in TypeScript. It will report a type mismatch error:

Argument of type 'string' is not assignable to parameter of type 'number'.


Declare class members

Now let’s look at a piece of JavaScript code

// # javascript (es6)
 class Person {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name;
    }}

If this JavaScript code is translated into TypeScript code, it will look like this

// # typescript
 class Person {
    private _name: string;
 
    public constructor(name: string) {
        this._name = name;
    }
 
    public get name(): string {
        return this._name;
    }}

注意到 private _name: string，这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的，对 this._name 赋值，它自然就有了，但在 TypeScript 里如果不声明，就会报告属性不存在的错误： 
Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点，但是我也能理解 TypeScript 的苦衷。如果没有这些声明，tsc 就搞不清楚你在使用 obj.xxxx 或者this.xxxx 的时候，这个 xxxx 到底确实是你想要添加的属性名称呢，还是你不小心写错了的呢？ 
另外要注意到的是 private 和 public 修饰符。JavaScript 中存在私有成员，为了实现私有，大家都想了不少办法，比如闭包。 
TypeScript 提供了 private 来修饰私有成员，protected 修改保护(子类可用)成员，public 修饰公共成员。如果不添加修饰符，默认作为 public，以兼容 JavaScript 的类成员定义。不过特别需要注意的是，这些修饰符只在 TypeScript 环境(比如转译过程)有效，转译成 JavaScript 之后，仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码，其 _name 属性在外部仍可访问。 
当然在 TypeScript 代码中，如果外部访问了 _name，tsc 是会报告错误的 
Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题，但是如果你写的东西需要做为第三方库发布，那就要想一些手段来进行“私有化”了，其手段和 JavaScript 并没什么不同。 


小结 

从 JavaScript 语法改写 TypeScript 语法，我们来做个简单的总结：

类成员需要声明。

变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型，工作量还是满大的，所以我建议：就接口部分声明类型。也就是说，类成员、函数/方法的参数和返回类型要声明类型，便于编辑器进行语法提示，局部使用的变量或者箭头函数，在能明确推导出其类型的时候，可以不声明类型。 

The above is the detailed content of Introducing declarative types in JavaScript and TypeScript. For more information, please follow other related articles on the PHP Chinese website!