translation from 11.05

Author: vmorkhat

description.en.yml

@@ -0,0 +1,24 @@
+---
+title: |
+  TypeScript course: free training for developers
+header: Typescript
+description: |
+  In modern development, TypeScript has not just taken a firm place, but has replaced JavaScript in many places. Knowledge of TypeScript has become essential for any developer who works with either Node.js or the browser
+seo_description: |
+  Sharpen your knowledge in a free Typescript course | Interactive exercises right in your browser | Free TypeScript course from CodeBasics
+
+keywords:
+  - typescript
+  - typoscript
+  - type script
+  - тайпскрипт
+  - ts
+  - тс
+  - тайп скрипт
+  - онлайн курс
+  - бесплатный курс
+  - программирование
+  - code basics
+  - online course
+  - free course
+  - programming

modules/40-generics/20-generic-types/en/EXERCISE.md

@@ -0,0 +1,14 @@
+
+Implement a description of the generalized type `MySet`, which is an analog of the JavaScript set `Set`. An example of using an object of this type:
+
+```typescript
+const s: MySet<number> = ...;
+// Adding an item returns the number of items
+s.add(1); // 1
+s.add(10); // 2
+
+s.has(1); // true
+s.has(8); // false
+```
+
+The type includes two methods: `add()` and `has()`. The data inside must be stored in the `items` property.

modules/40-generics/20-generic-types/en/README.md

@@ -0,0 +1,87 @@
+
+In this lesson we will talk more about Generic Types. Let's take an array as an example.
+
+An array is a container type that stores values of any specified type inside it. The logic of array operation does not depend on the type of data stored inside. This definition automatically indicates that we are dealing with a generalized type.
+
+To work with such a type, we need to instantiate the internal type at the moment when we want to start working with data of this type:
+
+```typescript
+const numbers: Array<number> = [];
+numbers.push(1);
+
+const strings: Array<string> = [];
+numbers.push('hexlet');
+```
+
+The type that is specified inside the angle brackets is called **type parameter**. This name was chosen for a reason - specifying a parameter looks like a function call. Below we will see that this way of looking at generics helps us to better understand how they work.
+
+Let's imagine that we want to define our own collection, which works like an array, but with additional features. Such collections are often made in ORMs to work with data loaded from a database. Let's first describe a specific version of this type that works only with numbers and a couple of standard methods:
+
+```typescript
+type MyColl = {
+  data: Array<number>;
+  forEach(callback: (value: number, index: number, array: Array<number>) => void): void;
+  at(index: number): number | undefined;
+}
+```
+
+Here we see that the collection data is stored in a numeric array. There are two methods defined in the type, one of which (`forEach`) passes the elements of the collection to the colback, and the other (`at`) returns the elements of the collection at the specified index. One possible implementation of this type might look like this:
+
+```typescript
+// The types can be omitted as they are specified in `MyColl`
+const coll: MyColl = {
+  data: [1, 3, 8],
+  forEach(callback) {
+    this.data.forEach(callback);
+  },
+  at(index) {
+    return this.data.at(index); // target >= ES2022
+  },
+}
+
+coll.at(-1); // 8
+```
+
+Now let's try to generalize this type, i.e. make it generic. To do this, we need to do one simple thing: for elements of the collection, instead of `number` write `T` (or any other name starting with a capital letter) and add `T` as a type parameter to the definition:
+
+```typescript
+type MyColl<T> = {
+  data: Array<T>;
+  forEach(callback: (value: T, index: number, array: Array<T>) => void): void;
+  at(index: number): T | undefined;
+}
+```
+
+This type definition can be viewed as a kind of function definition. When a specific type is specified, for example, `MyColl<string>`, then `T` in this situation is replaced by `string` inside the type definition. And if other generics are used inside the type, they "call" the type further. That is, it all works like nested function calls.
+
+## Limitations of generics
+
+Generics can have limitations. For example, we can say that the type that is passed to a generic must implement some interface. This is done using the `extends` keyword. Suppose we can make our `MyColl` type work only with types that implement the `HasId` interface:
+
+```typescript
+interface HasId {
+  id: number;
+}
+
+type MyColl<T extends HasId | number> = {
+  data: Array<T>;
+  forEach(callback: (value: T, index: number, array: Array<T>) => void): void;
+  at(index: number): T | undefined;
+}
+```
+
+This allows us to use the `MyColl` type only with types that implement the `HasId` interface. For example, such code will not work:
+
+```typescript
+const coll: MyColl<number> = {
+  data: [1, 3, 8],
+  forEach(callback) {
+    this.data.forEach(callback);
+  },
+  at(index) {
+    return this.data.at(index); // target >= ES2022
+  },
+}
+```
+
+Generics themselves are found everywhere in the code of libraries and frameworks. For example, in `React` component types are wrapped in generics so that you can specify props types. Generics can be used to create more generic types that can work with different data types, which we will explore in the next lessons.

modules/40-generics/20-generic-types/en/data.yml

@@ -0,0 +1,6 @@
+---
+name: Generics (Types)
+tips:
+  - >
+    [Generic
+    constraints](https://www.typescriptlang.org/docs/handbook/2/generics.html#generic-constraints)

modules/40-generics/30-generic-functions/en/EXERCISE.md

@@ -0,0 +1,14 @@
+
+Implement a description of a generic `MyArray` type that represents an analog of an array from JavaScript. Example of using an object of this type:
+
+```typescript
+const coll: MyArray<number> = ...;
+coll.push(1); // 1
+coll.push(10); // 2
+coll.push(99); // 3
+
+const newColl = coll.filter((value) => value % 2 == 0);
+console.log(newColl.items); // [10]
+```
+
+The type includes two methods: [push()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) and [filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), matching the signature of Array methods. The data inside should be stored in the `items` property. For `push()`, accept the convention that the method takes only one parameter. Ignore the other parameters.

modules/40-generics/30-generic-functions/en/README.md

@@ -0,0 +1,59 @@
+
+Let's imagine that generics have disappeared from the language. Then code duplication will occur. We will have to describe the same algorithm for different data types many times.
+
+Let's take for example the `last()` function returning the last element of an array. Below is its generalized version:
+
+```typescript
+function last<T>(coll: T[]): T {
+  return coll[coll.length - 1];
+}
+```
+
+Generics can also be used in arrow functions:
+
+```typescript
+const last = <T>(coll: T[]): T => {
+  return coll[coll.length - 1];
+};
+```
+
+Now let's try to implement the same behavior, but without using generics. To do this, we will have to create one function for each type. And the name of the function must be unique:
+
+```typescript
+function lastForNumberType(coll: number[]): number {
+  return coll[coll.length - 1];
+}
+
+function lastForStringType(coll: string[]): string {
+  return coll[coll.length - 1];
+}
+
+// Here are definitions for all other types
+```
+
+If there are several types, the number of functions to be defined will be defined as the product of the number of all possible types by the number of type parameters.
+
+Implementing a generic using an overloaded function simplifies the task. Then you won't have to create new names:
+
+```typescript
+function last(coll: number[]): number;
+function last(coll: string[]): string;
+// Here are definitions for all other types
+
+function last(coll: any[]): any {
+  return coll[coll.length - 1];
+}
+```
+
+In the case of TypeScript, the logic will not even be duplicated, but this is a peculiarity of TypeScript. In other statically typed languages, the logic will have to be duplicated as well.
+
+Whichever implementation we choose, two things must be observed:
+
+* Values passed internally are not used in any way. They are only moved from one place to another
+* The logic always remains the same. There are no conditional constructs on data type
+
+In Computer Science, the property of a function that allows values of different types to be processed in one way (using one algorithm) is called parametric polymorphism. That is, generics are TypeScript's implementation of parametric polymorphism.
+
+Parametric polymorphism plays an important role in statically typed languages, where functions have to explicitly specify types. Almost all high-level statically typed languages have it. In Java and C# it is also called generics. C++ uses the name templates, but the meaning doesn't change, although templates in C++ are more than parametric polymorphism.
+
+In contrast to statically typed languages, generics are not needed in dynamically typed languages such as JavaScript, Python, Ruby, PHP. In such languages, any generalized algorithm automatically works for all data types.

modules/40-generics/30-generic-functions/en/data.yml

@@ -0,0 +1,6 @@
+---
+name: Generics (Functions)
+tips:
+  - >
+    [TypeScript 
+    Generic Functions](https://www.geeksforgeeks.org/typescript-generic-functions/)

modules/40-generics/40-many-parameters/en/EXERCISE.md

@@ -0,0 +1,13 @@
+
+Implement a description of the generalized type `MyMap`, which is an analog of the associative array from JavaScript. Example of using an object of this type:
+
+```typescript
+const map: MyMap<string, number> = ...;
+map.set('one', 1);
+map.set('two', 2);
+
+map.get('one'); // 1
+map.get('two'); // 2
+```
+
+The type includes two methods `set()` and `get()`. The first method accepts two generic parameters: a key and a value. The second method accepts the key and returns the value. Values are stored inside the object as a JavaScript built-in class [Map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map).

modules/40-generics/40-many-parameters/en/README.md

@@ -0,0 +1,40 @@
+
+Generics, like ordinary functions, can have several type parameters. In this lesson, we will analyze such generics.
+
+The principle of generics does not change from the number of parameters. The only thing you need to keep an eye on is the names:
+
+```typescript
+type Double<T, U> = {
+  first: T;
+  second: U;
+}
+
+const value: Double<string, number> = {
+  first: 'code-basics',
+  second: 1,
+}
+```
+
+## Type inference from function arguments
+
+Let's imagine that we need to call a function with several parameters. The arguments are represented by generics.
+
+For example, the function `join()` can be described as follows:
+
+```typescript
+function join<T, U>(coll1: (T | U)[], coll2: U[]): (T | U)[] {
+  return coll1.concat(coll2);
+};
+
+join<number, string>([1, 2], ['one', 'two']); // [1, 2, 'one', 'two']
+```
+
+But TypeScript allows us to do this more easily and not have to specify types for all parameters:
+
+```typescript
+join([1, 2], ['one', 'two']); // [1, 2, 'one', 'two']
+```
+
+TypeScript will infer the types for the function parameters itself. This is called type inference from function arguments. In this case, TypeScript will infer the types `number` and `string` for the parameters `T` and `U` respectively.
+
+In the following lessons, we will learn about TypeScript's built-in generics that have two parameters. In real programming, such generics are often found in application code, such as in React.

modules/40-generics/40-many-parameters/en/data.yml

@@ -0,0 +1,6 @@
+---
+name: Generics with multiple parameters
+tips:
+  - >
+    [Typescript Generics
+    Explained](https://rossbulat.medium.com/typescript-generics-explained-15c6493b510f)