Бесплатно научите ТипеСцрипт помоћу овог интерактивног курса Сцримба

Банер за ТипеСцрипт курсКликните на слику да бисте прешли на курс Сцримба

ТипеСцрипт стиче велику популарност међу програмерима ЈаваСцрипт-а у последњих неколико година. И није чудо, јер ТипеСцрипт код има тенденцију да буде мање подложан грешкама, читљивији и лакши за одржавање.

Тако смо се удружили са еминентним онлајн инструктором Диланом Ц. Исраел-ом и креирали бесплатан ТипеСцрипт курс о Сцримби. Курс садржи 22 лекције и намењен је људима који већ знају ЈаваСцрипт, али желе брзи увод у ТипеСцрипт.

Овде похађајте курс бесплатно.

Погледајмо сада свако предавање на курсу.

1. део: Увод

У уводном приказу екрана, Дилан даје преглед зашто бисте требали научити ТипеСцрипт и како је курс постављен. Такође вам говори мало о себи, тако да сте га упознали пре него што ускочите у кодирање.

Део 2: Типови променљивих

Провера времена компајлирања је једна од најважнијих карактеристика ТипеСцрипт-а. Омогућава нам да ухватимо грешке повезане са врстама података током компајлирања. Ова лекција објашњава типове података доступне у ТипеСцрипт-у.

let firstName: string; let age: number; let isMarried: boolean; 

Можете видети како имамо типове повезане са свим променљивим. Ако покушамо да ставимо вредност низа уместо променљиве типа броја, ТипеСцрипт ће је ухватити у време компајлирања.

3. део: Више типова

У ТипеСцрипт-у држимо један тип за променљиву, али то није могуће сваки пут. Дакле, уместо тога, ТипеСцрипт нам пружа anyтип. То значи да једној променљивој можемо доделити више врста вредности.

let myVariable: any = 'Hello World'; myVariable = 10; myVariable = false; 

Изнад смо се изјаснили myVariableса anyтипе. Прво смо му доделили низ, затим број и на крају логичку вредност. То је могуће због anyтипа.

Део 4: Подтипови

Подтипови се користе када нисмо свесни вредности променљиве. ТипеСцрипт нам пружа два подтипа: nullи undefined. Ова лекција објашњава када би требало да користимо било који од њих.

let myVariable: number = undefined; 

Променљивој myVariableје додељена вредност undefinedјер у овом тренутку не знамо шта ће бити. Овде такође можемо користити null.

Део 5: Имплицитно или експлицитно куцање

Пети део говори о разлици између имплицитног и експлицитног куцања. У горњим примерима видели смо експлицитне типове где смо поставили тип променљиве. С друге стране, имплицитно куцање врши компајлер, а да ми нисмо навели тип променљиве.

let myVariable = 'Hello World'; 

У овом примеру променљивој нисмо доделили ниједан тип. Тип ове променљиве можемо проверити помоћу typeofфункције. Ово ће показати да myVariableје stringтип, јер се компајлер побринуо за куцање.

Део 6: Провера типова

У овој лекцији ћемо научити како можемо проверити тип променљиве и ухватити било какву грешку или извршити било коју операцију. Користи пример у којем тестирамо да ли је наша променљива типа Bear(где Bearје а class). Ако желимо да проверимо тип наше променљиве, можемо користити instanceofметоду.

import { Bear } from 'somefile.ts'; let bear = new Bear(3); if (bear instanceof Bear) { //perform some operation } 

Део 7: Тврдње о типу

Утврђивање типа значи да можемо пребацити променљиву на било који одређени тип и кажемо ТипеСцрипт-у да обрађује ту променљиву користећи тај тип. Покушајмо то да разумемо на примеру:

let variable1: any = 'Hello World'; if ((variable1 as string).length) { //perform some operation } 

variable1има тип any. Али, ако желимо да проверимо његову дужину, производиће грешку све док не кажемо ТипеСцрипт-у да је обрађује као низ. Ова лекција објашњава више детаља о овом концепту.

Део 8: Низови

Овај део курса објашњава ТипеСцрипт низове. У ЈаваСцрипт-у, када доделимо вредности низу, можемо ставити различите врсте предмета. Али, са ТипеСцрипт-ом, можемо декларирати низ и са типовима.

let array1: number[] = [1, 2, 3, 4, 5]; 

У горњем примеру, прогласили смо низ бројева додељивањем numberтипа. Сада ће ТипеСцрипт осигурати да низ садржи само бројеве.

Део # 9: Кортели

Понекад морамо да похранимо више врста вредности у једну колекцију. Низови у овом случају неће служити. ТипеСцрипт нам даје тип података корице. Користе се за чување вредности више типова.

let tuple_name = [10, 'Hello World']; 

Овај пример показује да у једној колекцији можемо имати ставке података типа типова бројева и низова. Ова лекција детаљније објашњава концепт торти.

Део # 10: Енум

У овој лекцији ћемо научити о енумима у ТипеСцрипт-у. Енуми се користе за дефинисање скупа именованих константи који се могу користити за документовање намере или за стварање низа различитих случајева.

**enum** Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT" } 

Ево основног примера како су енуми декларисани и како се унутар њих стварају различита својства. Остали детаљи су објашњени у овом одељку курса.

Део # 11: Објекат

In JavaScript, objects have a pretty major role in how language has been defined and has evolved. This lesson talks about objects in TypeScript — how to declare an object, and which kinds of values can fit inside the object type.

Part #12: Parameters

Using TypeScript, we can also assign types to the parameters of a function. In this section of the course, Dylan explains how we can add types to parameters. This is a very useful way to handle errors regarding data type in a function.

const multiply = (num1: number, num2: number) => { return num1 * num2; } 

We have declared a function multiply which takes two parameters and returns the value from multiplying them. We added a type of number to both the parameters so that no other value except a number can be passed to them.

Part #13: Return types

Like parameters, we can also add type-checking to the return value of a function. This way we can make sure that the return value from a function has an expected type. This part of the course explains the concept in detail.

const multiply = (num1: number, num2: number): number => { return num1 * num2; } 

We have added a return type of number to the function. Now, if we return anything except a number, it will show us an error.

Part #14: Custom types

In TypeScript, we can create a custom type using the keyword of type. We can then type-check objects on the basis of that type.

type person = {firstName: string}; const example3: person = {firstName: 'Dollan'}; 

This feature is almost deprecated in TypeScript, so you should rather use interface or class for this purpose. However, it’s important that you get to know it, as you might come across custom types when you start to dive into TS code.

Part #15: Interfaces

In TypeScript, the core focus is on type-checking which enforces the use of a particular type. Interfaces are a way of naming these types. It’s basically a group of related methods and properties that describe an object. This part of the course explains how to create and use interfaces.

interface Person { firstName: string, lastName: string, age: number } 

In the example above, we have an interface Person which has some typed properties. Note that we don’t initiate data in interfaces, but rather define the types that the parameters will have.

Part #16: Barrels

A barrel is a way to rollup exports from multiple modules into a single module. A barrel is, itself, a module, which is exporting multiple modules from one file. This means that a user has to import just one module instead of all the modules separately.

// Without barrel import { Foo } from '../demo/foo'; import { Bar } from '../demo/bar'; import { Baz } from '../demo/baz';` 

Instead of using these multiple lines separately to import these modules, we can create a barrel. The barrel would export all these modules and we import only that barrel.

// demo/barrel.ts export * from './foo'; // re-export all of its exportsexport * from './bar'; // re-export all of its exportsexport * from './baz'; // re-export all of its exports 

We can simply create a TypeScript file and export the modules from their respective file. We can then import this barrel wherever we need it.

import { Foo, Bar, Baz } from '../demo'; // demo/barrel.ts 

Part #17: Models

When using interfaces, we often face a number of problems. For example, interfaces can’t seem to enforce anything coming from the server side, and they can't keep the default value. To solve this issue, we use the concept of models classes. These act as an interface, and also may have default values and methods added to them.

Part #18: Intersection types

In this section, we’ll talk about intersection types. These are the ways we can use multiple types to a single entity or class. Sometimes we need to use multiple types to map one entity and, at that time, this feature comes in very handy.

import { FastFood, ItalianFood, HealthyFood} from ‘./interfaces’; let food1: FastFood | HealthyFood; let food2: ItalianFood; let food3: FastFood; let food4: FastFood & ItalianFood; 

In the example above, we have three interfaces and we are creating different objects from them. For example, food1 is going to be either FastFoodorHealthyFood. Similarly, food4 is going to be FastFoodas well asItalianFood.

Part #19: Generics

In short, generics is a way to create reusable components which can work on a variety of data types rather than a single one.

The concept of generics is actually not available in JavaScript so far, but is widely used in popular object-oriented languages such as C# or Java. In this lesson, we’ll learn how to use generics in TypeScript, and look at its key benefits.

Part #20: Access modifiers

The idea of access modifiers is relatively new in the arena of JavaScript and TypeScript, but they have been available in other object-oriented languages for a long time. Access modifiers control the accessibility of the members of a class.

In TypeScript, there are two access modifiers: public and private. Every member of a class defaults to public until you declare it otherwise.

class Customer { customerId: number; public companyName: string; private address: string; } 

customerId is a default public member, so it’s always available to the outside world. We have specifically declared companyName aspublic, so it will also be available outside of class. address is marked as private, therefore it won’t be accessible outside the class.

Part #21: Local setup

In this lesson, we’ll learn the steps to install and run TypeScript on local computers. Those steps generally involve installing Node and TypeScript, and then compiling “.ts” files.

Кликните на слику да бисте дошли до курса

Click the image to get to the course.

Part #22: TSLint and — great job!

Yay! You’ve completed the course. In the last part of the video, Dylan will give some tips on how to take this learning further and improve the code we write today.

У овој лекцији он такође описује како можете да користите невероватни ТСЛинт. Овај алат вам помаже да напишете бољи код производног нивоа користећи најбоље праксе и конвенције. Долазе са неким основним подешавањима која можете изменити у складу са својим потребама.

Дакле, наставите и пођите данас на овај бесплатни курс!

Хвала за читање! Зовем се Пер Борген, суоснивач сам Сцримбе - најлакшег начина да научим да кодирам. Ако желите да научите да правите модерну веб страницу на професионалном нивоу, требало би да проверите наш боотцамп за прилагодљиви веб дизајн.