Location>code7788 >text

Start quickly

Popularity：713 ℃/2025-03-27 12:45:13

Environment installation

In order to learn how to use TypeScript, you first need to install the TypeScript compilation tool into your local environment. OpenterminalExecute the following command:

npm install -g typescript

Tips: If you can't use itnpmCommand, make sure that you have the Node environment installed locally. Mac computers may need to usesudoOrder.

After the installation is complete, you can usetsc -vThe command further confirms whether TypeScript is installed successfully. Normally, it will output the information about the TypeScript version you are currently installing.

Writing code

After the environment is ready, you can try to open the editor and create a new content like the followingdocument:

function greet(what) {
    (`hello ${ what }`);
}

greet("world");

Then switch the terminal command line to the file directory and executetsc Compile commands. If it's your first timeCompilationThis file, the directory will output a directory with the same namedocument. Otherwise, the compiler will update the file.

Type annotation

Perhaps you have noticed that the above code is the same as JavaScript. Next, let's update this file:

function greet(what: string) {
    (`hello ${ what }`);
}

greet({ name: "world" });

You've seen herewhat: stringIt is a unique writing method of TypeScript, and is calledType annotation. It is a lightweight addition to functions or variablesconstraintThe syntax structure is<target>:<type>,intargertIt is a constraint target, which can be any JavaScript value such as objects, functions, etc.

Type constraints

Recompile this updated file and you will see that the compiler terminal reports an error to you.

Argument of type '{ name: string; }' is not assignable to parameter of type 'string'.

This is what TypeScript provides for JavaScript - type constraints.

Now we assumegreet()It is provided by a third partyapi, you can't modify it. To fix the above compilation error, you must givegreet()Pass in onestringParameters of type.

Of course, if the situation allows you to modifygreet()You can reconstruct the definition ofgreet()as follows:

function greet(what: { name: string }) {
    (`hello ${  }`);
}

Now,greet({ name: "world" })There will be no compilation errors.

Constraint variables

Similarly, you can add a type of usage contract for the variable when declaring it.

let isOk: boolean;
let student: {
    name: string;
    age: number;
};

After this, you cannot assign values ​​to variables casually, and the assignment must conform to the defined type structure.

isOk = true; // Okay

 student = { name: "Xiao Ming" }; // Error
 student = { name: "Xiao Ming", age: 20 }; // Okay
<Previous Next>