From 7bac3c34443d68c42e3cb68bb0e30bd4baf28334 Mon Sep 17 00:00:00 2001 From: syedmouaazfarrukh Date: Wed, 1 Feb 2023 01:48:30 -0800 Subject: [PATCH] Adding content to 107-interfaces --- .../107-interfaces/100-types-vs-interfaces.md | 37 ++++++++++++++++++- .../101-extending-interfaces.md | 30 ++++++++++++++- .../102-interface-declaration.md | 22 ++++++++++- .../107-interfaces/103-hybrid-types.md | 24 +++++++++++- .../content/107-interfaces/index.md | 25 ++++++++++++- 5 files changed, 133 insertions(+), 5 deletions(-) diff --git a/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md b/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md index a76c14a78..6ab12d9c7 100644 --- a/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md +++ b/src/roadmaps/typescript/content/107-interfaces/100-types-vs-interfaces.md @@ -1 +1,36 @@ -# Types vs interfaces \ No newline at end of file +# Types vs Interfaces + +In TypeScript, both types and interfaces can be used to define the structure of objects and enforce type checks. However, there are some differences between the two. + +Types are used to create a new named type based on an existing type or to combine existing types into a new type. They can be created using the type keyword. For example: + + ``` + type Person = { + name: string; + age: number; + }; + + const person: Person = { + name: "John Doe", + age: 30 + }; + ``` + +Interfaces, on the other hand, are used to describe the structure of objects and classes. They can be created using the interface keyword. For example: + + ``` + interface Person { + name: string; + age: number; + } + + const person: Person = { + name: "John Doe", + age: 30 + }; + ``` + +Learn more from the following links: + +- [Interfaces vs. Type Aliases](https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases) +- [Interfaces vs Types in TypeScript](https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md b/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md index fd36772cd..08878ccfd 100644 --- a/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md +++ b/src/roadmaps/typescript/content/107-interfaces/101-extending-interfaces.md @@ -1 +1,29 @@ -# Extending interfaces \ No newline at end of file +# Extending Interfaces + +In TypeScript, you can extend an interface by creating a new interface that inherits from the original interface using the "extends" keyword. The new interface can include additional properties, methods, or redefine the members of the original interface. + +Here is an example: + + ``` + interface Shape { + width: number; + height: number; + } + + interface Square extends Shape { + sideLength: number; + } + + let square: Square = { + width: 10, + height: 10, + sideLength: 10 + }; + ``` + +In this example, the Square interface extends the Shape interface and adds an additional property sideLength. A variable of type Square must have all the properties defined in both Shape and Square interfaces. + +Learn more from the following links: + +- [Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) +- [TypeScript - Extending Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html#extending-interfaces) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md b/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md index a149e028e..fbcd69667 100644 --- a/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md +++ b/src/roadmaps/typescript/content/107-interfaces/102-interface-declaration.md @@ -1 +1,21 @@ -# Interface declaration \ No newline at end of file +# Interface Declaration + +An interface in TypeScript is a blueprint for creating objects with specific structure. An interface defines a set of properties, methods, and events that a class or object must implement. The interface is a contract between objects and classes and can be used to enforce a specific structure for objects in your code. + +Here is an example of an interface declaration in TypeScript: + + ``` + interface Person { + firstName: string; + lastName: string; + age?: number; + getFullName(): string; + } + ``` + +In this example, the Person interface defines four properties: `firstName`, `lastName`, `age`, and a method `getFullName()`. The age property is optional, indicated by the `?` symbol. Any class or object that implements the `Person` interface must have these properties and method. + +Learn more from the following links: + +- [Introduction - Declaration Files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) +- [Find and Install Declaration Files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html#find-and-install-declaration-files) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md b/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md index 6872ae1aa..693cbbebf 100644 --- a/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md +++ b/src/roadmaps/typescript/content/107-interfaces/103-hybrid-types.md @@ -1 +1,23 @@ -# Hybrid types \ No newline at end of file +# Hybrid Types + +In TypeScript, a hybrid type is a type that combines multiple types into a single type. The resulting type is considered a union of those types. This allows you to specify that a value can have multiple types, rather than just one. + +For example, you can create a hybrid type that can accept either a string or a number: + + ``` + type StringOrNumber = string | number; + ``` + +Now, a value of type StringOrNumber can be either a string or a number: + + ``` + let value: StringOrNumber = 'Hello, world!'; + value = 42; + ``` + +You can also use hybrid types to create more complex types that can represent a combination of several different types of values. + +Learn more from the following links: + +- [TypeScript - Interface Hybrid Types](https://www.logicbig.com/tutorials/misc/typescript/interface-hybrid-types.html) +- [What is Hybrid types in typescript?](https://www.youtube.com/watch?v=eYAq1A4BsuI) \ No newline at end of file diff --git a/src/roadmaps/typescript/content/107-interfaces/index.md b/src/roadmaps/typescript/content/107-interfaces/index.md index ae1d147ef..182d44bb0 100644 --- a/src/roadmaps/typescript/content/107-interfaces/index.md +++ b/src/roadmaps/typescript/content/107-interfaces/index.md @@ -1 +1,24 @@ -# Interfaces \ No newline at end of file +# Interfaces + +Interfaces in TypeScript provide a way to define a contract for a type, which includes a set of properties, methods, and events. It's used to enforce a structure for an object, class, or function argument. Interfaces are not transpiled to JavaScript and are only used by TypeScript at compile-time for type-checking purposes. + +Here's an example of defining and using an interface in TypeScript: + + ``` + interface User { + name: string; + age: number; + } + + const user: User = { + name: 'John Doe', + age: 30 + }; + ``` + +In this example, the User interface defines the structure of the user object with two properties, name and age. The object is then typed as User using a type-assertion : User. + +Learn more from the following links: + +- [TypeScript - Interfaces](https://www.typescriptlang.org/docs/handbook/interfaces.html) +- [TypeScript Tutorial - Interfaces](https://www.youtube.com/watch?v=VbW6vWTaHOY) \ No newline at end of file