What is meant by typescript

TypeScript for JavaScript Programmers

TypeScript stands in an unusual relationship to JavaScript. TypeScript offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.

For example, JavaScript provides language primitives like string and number , but it doesn’t check that you’ve consistently assigned these. TypeScript does.

This means that your existing working JavaScript code is also TypeScript code. The main benefit of TypeScript is that it can highlight unexpected behavior in your code, lowering the chance of bugs.

This tutorial provides a brief overview of TypeScript, focusing on its type system.

TypeScript knows the JavaScript language and will generate types for you in many cases. For example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type.

By understanding how JavaScript works, TypeScript can build a type-system that accepts JavaScript code but has types. This offers a type-system without needing to add extra characters to make types explicit in your code. That’s how TypeScript knows that helloWorld is a string in the above example.

You may have written JavaScript in Visual Studio Code, and had editor auto-completion. Visual Studio Code uses TypeScript under the hood to make it easier to work with JavaScript.

You can use a wide variety of design patterns in JavaScript. However, some design patterns make it difficult for types to be inferred automatically (for example, patterns that use dynamic programming). To cover these cases, TypeScript supports an extension of the JavaScript language, which offers places for you to tell TypeScript what the types should be.

For example, to create an object with an inferred type which includes name: string and id: number , you can write:

You can explicitly describe this object’s shape using an interface declaration:

You can then declare that a JavaScript object conforms to the shape of your new interface by using syntax like : TypeName after a variable declaration:

If you provide an object that doesn’t match the interface you have provided, TypeScript will warn you:

Since JavaScript supports classes and object-oriented programming, so does TypeScript. You can use an interface declaration with classes:

You can use interfaces to annotate parameters and return values to functions:

There is already a small set of primitive types available in JavaScript: boolean , bigint , null , number , string , symbol , and undefined , which you can use in an interface. TypeScript extends this list with a few more, such as any (allow anything), unknown (ensure someone using this type declares what the type is), never (it’s not possible that this type could happen), and void (a function which returns undefined or has no return value).

You’ll see that there are two syntaxes for building types: Interfaces and Types. You should prefer interface . Use type when you need specific features.

With TypeScript, you can create complex types by combining simple ones. There are two popular ways to do so: with unions, and with generics.

With a union, you can declare that a type could be one of many types. For example, you can describe a boolean type as being either true or false :

Note: If you hover over MyBool above, you’ll see that it is classed as boolean . That’s a property of the Structural Type System. More on this below.

A popular use-case for union types is to describe the set of string or number literals that a value is allowed to be:

Unions provide a way to handle different types too. For example, you may have a function that takes an array or a string :

To learn the type of a variable, use typeof :

Type	Predicate
string	typeof s === «string»
number	typeof n === «number»
boolean	typeof b === «boolean»
undefined	typeof undefined === «undefined»
function	typeof f === «function»
array	Array.isArray(a)

For example, you can make a function return different values depending on whether it is passed a string or an array:

Generics provide variables to types. A common example is an array. An array without generics could contain anything. An array with generics can describe the values that the array contains.

ts
type StringArray = Arraystring>;
type NumberArray = Arraynumber>;
type ObjectWithNameArray = Array< name: string >>;

You can declare your own types that use generics:

One of TypeScript’s core principles is that type checking focuses on the shape that values have. This is sometimes called “duck typing” or “structural typing”.

In a structural type system, if two objects have the same shape, they are considered to be of the same type.

The point variable is never declared to be a Point type. However, TypeScript compares the shape of point to the shape of Point in the type-check. They have the same shape, so the code passes.

The shape-matching only requires a subset of the object’s fields to match.

There is no difference between how classes and objects conform to shapes:

If the object or class has all the required properties, TypeScript will say they match, regardless of the implementation details.

This was a brief overview of the syntax and tools used in everyday TypeScript. From here, you can:

The TypeScript docs are an open source project. Help us improve these pages by sending a Pull Request ❤

Источник

What is meant by typescript

TypeScript is a language from Microsoft which builds on JavaScript.
This post is a non-technical overview of what JavaScript is, how TypeScript extends JavaScript and what problems it solves.

What is JavaScript?

Because TypeScript extends JavaScript, this makes it a good starting point. JavaScript is commonly used to create websites. When building a website, you work with three languages: HTML, CSS and JavaScript (JS). Broadly speaking: HTML defines the content which will appear on the page, CSS defines the visual style of the page, and JS defines the interactive behaviors of the page.

We describe having these sets of skills as being a «front-end» developer. You use three languages to create pages inside a web browser like Safari, Firefox, Edge or Chrome. Given how popular the web is for commerce and information sharing, there is a massive demand for people who are good at using these three languages.

Related to the role of being a «front-end» developer is the set of skills for the «back-end» developers, which are to create computer services that communicate either to a web browser (by passing it HTML/CSS/JS) or to another service (by sending data more directly.) You don’t need to use HTML, CSS or JS to write this type of code, but it’s usually an end-product of your work because it is likely to be presented in a web browser.

What do Programming Languages do?

Programming languages are a way for humans and computers to communicate. People read code many, many multiples of times more than they write it — so developers create programming languages which are good at solving particular problems with a small amount of code. Here’s an example using JavaScript:

var name = "Danger" console.log("Hello, " + name)

The first line makes a variable (effectively a box you can store other things in) and then the second line outputs text to the console (for example DOS, or the terminal) «Hello, Danger» .

JavaScript is designed to work as a scripting language, which means the code starts at the top of the file and then goes through line by line downwards running that code. To provide some contrast, here is the same behavior in Java, which is built with different language constraints:

To get to the key point though, there is one standout line I’d like us to compare:

// JavaScript var name = "Danger" // Java String name = "Danger";

Both of these lines declare variables called name which contain the value «Danger» .

In JavaScript you use the abbreviation var to declare a variable. Meanwhile, in Java you need to say what kind of data the variable contains. In this case the variable contains a String . (A string is a programming term for a collection of characters. They «look like this» . This 5m video is a good primer if you want to learn more.)

Both of these variables contain a string, but the difference is that in Java the variable can only ever contain a string, because that’s what we said when we created the variable. In JS, the variable can change to be anything, like a number, or a list of dates.

// Before in JS var name = "Danger" // Also OK var name = 1 var name = false var name = ["2018-02-03", "2019-01-12"] // Before in Java String name = "Danger"; // Not OK, the code wouldn't be accepted by Java String name = 1; String name = false String name = new String[];

These trade-offs make sense in the context for which these languages were built back in 1995. JavaScript was originally designed to be a small programming language which handled simple interactions on websites. Java on the other hand was built specifically to make complex apps which could run on any computer. They expected to be used to build codebases of different scales, so the language required programmers write different types of code.

Java required programmers to be more explicit with the values of their variables because the programs they expected people to build were more complex. While JavaScript opted for ease of reading by omitting information about the specifics, and expected codebases to be significantly smaller.

What is TypeScript?

TypeScript is a programming language — it contains all of JavaScript, and then a bit more. Using our example above, let’s compare the scripts for «Hello, Danger» in JavaScript vs TypeScript:

// JavaScript var name = "Danger" console.log("Hello, " + name) // TypeScript var name = "Danger" console.log("Hello, " + name) // Yep, you're not missing something, there's no difference

Due to TypeScript’s goal of only extending JavaScript, the existing JavaScript code we saw works as TypeScript. The extensions which TypeScript adds to JavaScript are intended to help you be more explicit about what kinds of data are used in your code, a bit like Java.

Here is the same sample, but using TypeScript to be more explicit about what the variable is:

var name: string = "Danger" console.log("Hello, " + name)

This extra : string allow the reader to be certain that name will only be a string. Annotating your variables in this way also gives TypeScript the chance to verify that these match. This is very useful, because keeping track of changes like the type of value in a variable seems easy when it’s one or two, but once it starts hitting the hundreds, that’s a lot to keep track of. Writing types help programmers be more confident about their code because types catch mistakes.

Simply speaking, we call these annotations «Types». Hence the name TypeScript. One of the tag-lines for TypeScript is «JavaScript which scales» which is a statement that these extra type annotations allows you to work on bigger projects. This is because you can verify up-front how correct your code is. This means you have less need to understand how every change affects the rest of the program.

In the 90s, and maybe until a 5-10 years ago the trade-off for not having types in your JavaScript application was fine because the size and complexities of the programs being built were constrained to just the front-end of websites. Today though, JavaScript is being used almost everywhere, to build almost anything which runs on a computer. A large amount of mobile and desktop apps use JavaScript and web technology under the hood.

These are all considerably more complicated to build and understand, adding types drastically reduces the complexity of making improvements to those programs.

What Problems Can TypeScript Solve?

Typically, the need to ensure there are no bugs in your code can be handled by writing automated tests, then by manually verifying that the code works as you expect and finally having another person validate that it seems correct.

Not many companies are the size of Microsoft, however a lot of all problems writing JavaScript in large codebases are the same. Many JavaScript apps are made up of hundreds of thousands of files. A single change to one individual file can affect the behaviour of any number of other files, like throwing a pebble into a pond and causing ripples to spread out to the bank.

Validating the connections between every part of your project can get time consuming quickly, using a type-checked language like TypeScript can handle that automatically and provide instant feedback during development.

These features allows TypeScript to help developers feel more confident in their code, and save considerable amounts time in validating that they have not accidentally broken the project.

Источник