{"id":26565,"date":"2020-07-15T00:00:00","date_gmt":"2020-07-14T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/angular-10-cose-cambiato-negli-ultimi-tre-mesi\/"},"modified":"2021-05-20T18:24:00","modified_gmt":"2021-05-20T16:24:00","slug":"angular-10-what-has-changed-in-the-last-three-months","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/angular-10-what-has-changed-in-the-last-three-months\/","title":{"rendered":"Angular 10: what has changed in the last three months?"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

A few months after the version 9 release (described here<\/a>), the Angular team surprised us with the version 10, trying to bridge the delays and promising the release of version 11 for the end of fall.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In its development dependencies, Typescript moved to version 3.9.5. In my opinion, there is a tendency to give little importance to the detail of the version of a language, but it is undeniable that an average developer learned Typescript 3-4 years ago, when the ng cli used a 2.something version. Today\u2019s language is entirely different and more sophisticated and people should study it again and fill the gap. The risk is to consult Angular documentation, find a bizarre copy snippet, and copy it into your project with no idea of what\u2019s going on.<\/p>\n\n\n\n

I want to show you some examples (not related to the 3.9.4 version of Typescript).
Let\u2019s start from the two following interfaces:<\/p>\n\n\n

\nexport interface Student {\n    id: number;\n    age: number;\n    name: string;\n    surname: string;\n}\n  \nexport interface Worker {\n    companyId: number;\n    salary: number;\n}\n<\/pre><\/div>\n\n\n
We can define a new type that can be a Student or a Worker!<\/p>\n\n\n
\nexport type MyUnionType = Student | Worker;\n<\/pre><\/div>\n\n\n
What happens if we need to know if a variable is a Student or a Worker? We can write a function returning a type predicate:<\/p>\n\n\n
\nisStudent(person: MyUnionType): person is Student {\n\u00a0\u00a0\u00a0\u00a0return (person as Student).name !== undefined;\n}\n<\/pre><\/div>\n\n\n
and then using it in the code<\/p>\n\n\n
\nif (this.isStudent(person)) {\n\u00a0\u00a0\u00a0\u00a0console.log(person.name);\n} else {\n\u00a0\u00a0\u00a0\u00a0\/\/ ....\n}\n<\/pre><\/div>\n\n\n
It\u2019s interesting to point out that in the else<\/strong> we have a Worker explicitly.<\/p>\n\n\n\n
We can also define a type as a combination of two or more types.<\/p>\n\n\n
\nexport type MyIntersectionType = Student & Worker;\n<\/pre><\/div>\n\n\n
There are other more advanced generic types. Consider, for example, Partial<T>.<\/p>\n\n\n\n
Suppose to writing a function updating a Worker:<\/p>\n\n\n
\nconst updateWorker = (id: number, worker: Worker) => {};\nupdateWorker(1, { salary: 1000});\n<\/pre><\/div>\n\n\n
This code does not compile because companyId lacks in the object we passed to the function. We can correct the code in the following way:<\/p>\n\n\n
\nconst updateWorker = (id: number, worker: Partial<Worker>) => {};\n<\/pre><\/div>\n\n\n
and the error is removed.<\/p>\n\n\n\n
We also have other utility types, such as Record<K,T>. Let\u2019s define an alias type called<\/p>\n\n\n\n
Headquarter and associate to each headquarter a Worker.<\/p>\n\n\n
\nexport type Headquarter = 'Napoli' | 'Roma' | 'Milano';\nconst x: Record<Headquarter, Worker> = {\n\u00a0\u00a0\u00a0\u00a0Napoli: { companyId: 3, salary: 3000 },\n\u00a0\u00a0\u00a0\u00a0Roma: { companyId: 4, salary: 3000 },\n\u00a0\u00a0\u00a0\u00a0Milano: { companyId: 5, salary: 3000 },\n};\n<\/pre><\/div>\n\n\n
What if I wanted to create a new type starting from Student but choosing only some of its properties?<\/p>\n\n\n
\nexport type StudentPreview = Pick<Student, 'id' | 'surname'>;\n<\/pre><\/div>\n\n\n
If you are interested in learning more about Composition in Typescript, I suggest the following video<\/a>, besides the official documentation.<\/p>\n\n\n\n
Let\u2019s come back to Angular 10 with a new option available for the command ng new creating a new project: ng new –script.<\/p>\n\n\n\n
We not only improve the maintainability of the project by finding bugs as quickly as possible, but, above all, we allow the CLI to perform advanced optimizations on our app. In details:<\/p>\n\n\n\n