May 07, 2021 TypeScript
TypeScript is a free and open source programming language developed by Microsoft.
TypeScript is a superset of JavaScript, starting with the syntax and semantics familiar to millions of JavaScript developers today. You can use existing JavaScript code, including the popular JavaScript library, and call TypeScript code from JavaScript code.
TypeScript compiles pure, concise JavaScript code and can run on any browser, node.js environment, and any JavaScript engine that supports ECMAScript 3 (or later).
TypeScript has the advantage of having more rules and type restrictions, more predictability, controllability, ease of maintenance and debugging, and easier organization of code development for large, complex programs with support for modules, namespaces, and object-oriented applications.
In addition, TypeScript's compilation steps capture errors before they run.
Next, let's start building a simple web application with TypeScript.
There are two main ways to get TypeScript tools.
Visual Studio 2015 and Visual Studio 2013 Update 2 include TypeScript by default. If you don't have Visual Studio installed with TypeScript, you can still download .
Developers using NPM:
npm install -g typescript
Create a
greeter.ts
editor and enter the following JavaScript code:
function greeter ( person) {
return "Hello, " + person;
}
var user = "Jane User" ;
document .body.innerHTML = greeter(user);
Although we
.ts
as the file extension, the code is just JavaScript code.
You can copy and paste code directly into an existing JavaScript application.
Run the TypeScript compiler on the command line:
tsc greeter .ts
As a result, you get a greeter file with the
greeter.js
code.
Use TypeScript in the JavaScript application we started and run.
Now we can start taking advantage of the new tools provided by TypeScript.
Add the function parameter 'person':
: string
type annotation, as follows:
function greeter ( person: string ) {
return "Hello, " + person;
}
var user = "Jane User" ;
document .body.innerHTML = greeter(user);
Type annotations are an easy way to record function or variable constraints in TypeScript. I n this example, we want to pass in a string type argument when we call the greeter function. We can try to change to an array when the greeter function is called:
functiongreeter(person: string){
return"Hello, " + person;
}
var user = [0, 1 , 2];
document.body.innerHTML = greeter(user);
Recompile and you'll see an error:
greeter.ts(7,26): Supplied parameters do not match any signature of call target
Similarly, when you call the greeter function, you try not to pass in any arguments. T ypeScript will tell you that you need to bring an argument when you call this function. In both examples, TypeScript provides static analysis based on your code structure and type annotations.
Note that despite the error, the file that
greeter.js
E
ven if there are errors in your code, you can still use TypeScript.
But in this case, TypeScript warns that your code may not work as you might expect.
Let's further develop our demo. H
ere we use an interface that describes objects with firstName and lastName fields. I
n TypeScript, if two types are compatible with their internal structures, they are compatible.
This allows us to implement an interface that requires only the necessary structural shapes without having to
implements
clause.
interface Person {
firstName: string ;
lastName: string ;
}
function greeter ( person: Person ) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane" , lastName: "User" };
document .body.innerHTML = greeter(user);
Finally, let's use the class for the last time to continue developing demo. TypeScript supports new JavaScript features, such as class-based object-oriented programming.
Here, we create a Student class with constructors and some
Student
fields.
Note: The good use of classes and interfaces determines a programmer's level of abstraction.
In addition, using public in
public
is a short form that automatically creates properties with that name.
class Student {
fullName: string ;
constructor( public firstName, public middleInitial, public lastName) {
this .fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string ;
lastName: string ;
}
function greeter ( person : Person ) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student( "Jane" , "M." , "User" );
document.body.innerHTML = greeter(user);
Run
tsc greeter.ts
you'll see the resulting JavaScript code as before.
The classes in TypeScript are simply short those that often use the same prototype-based object-oriented in JavaScript.
Now enter
greeter.html
the greeter:
<!DOCTYPE html>
< html >
< head > < title > TypeScript Greeter </ title > </ head >
< body >
< script src = "greeter.js" > </ script >
</ body >
</ html >
Open the
greeter.html
to run the first TypeScript web application demo!
Optional: Open
greeter.ts
or copy the code to TypeScript Learning Park. Y
ou can hover over the identifier to see the type. N
ote that in some cases these types are automatically inferred for you. R
e-enter the last line to see the completion list and parameter help based on the DOM element type. P
lace the cursor where the greeter function is referenced and press F12 to go to the definition.
Also note that you can right-click on the symbol to rename it with refactoring.
The types of information and tools provided, as well as JavaScript, work together in the application. Examples of more possibilities for TypeScript, please visit the web site's Case.