Kamran Ahmed
2 years ago
parent
a4dddfb19b
commit
659bd93094
89 changed files with 1116 additions and 1150 deletions
@ -1,30 +1,11 @@ |
||||
# Compiler Options |
||||
|
||||
Compiler options in TypeScript are a set of configuration settings that control how the TypeScript compiler compiles your code. Here are some commonly used compiler options with examples: |
||||
TypeScript compiler accepts a number of command line options that allow you to customize the compilation process. These options can be passed to the compiler using the `--` prefix, for example: |
||||
|
||||
1. target |
||||
2. module |
||||
3. strict |
||||
4. outDir |
||||
5. rootDir |
||||
6. exclude |
||||
|
||||
Have a look at the following example tsconfig.json: |
||||
|
||||
``` |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "es5", |
||||
"module": "commonjs", |
||||
"strict": true, |
||||
"outDir": "./dist", |
||||
"rootDir": "./src", |
||||
"exclude": ["node_modules"] |
||||
} |
||||
} |
||||
```bash |
||||
tsc --target ES5 --module commonjs |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html#compiler-options) |
||||
- [TypeScript Compiler Options](https://www.youtube.com/watch?v=I1ZFsPK0Q-Y&vl=en) |
||||
- [Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) |
||||
@ -1,8 +1,6 @@ |
||||
# Ts Node |
||||
# ts-node |
||||
|
||||
TypeScript is a statically-typed language that can be used with the Flutter framework to build cross-platform mobile apps. TypeScript offers features such as type checking, classes, interfaces, and more, which can help improve the development process and catch errors early. It can be used in Flutter by integrating it with the Dart programming language through a tool called dart2ts. This allows developers to use TypeScript with Flutter and take advantage of its benefits while still using Dart for the underlying runtime. |
||||
ts-node is a TypeScript execution and REPL for node.js, with source map and native ESM support. Learn more from the following links: |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [TypeScript Node Explained *ts-node*](https://www.youtube.com/watch?v=22MpfOmemzY) |
||||
- [ts-node - GitHub Project](https://github.com/TypeStrong/ts-node) |
||||
- [How To Run TypeScript Scripts with ts-node](https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node) |
||||
@ -1,6 +1,6 @@ |
||||
# Ts playground |
||||
# TS Playground |
||||
|
||||
A TypeScript playground in Flutter refers to a development environment or an online tool that allows you to write, run, and debug TypeScript code in a Flutter environment. It's a way to test TypeScript code snippets and see the results immediately, without having to set up a full development environment or project. Some popular online TypeScript playgrounds for Flutter include Repl.it, CodeSandbox, and StackBlitz. These platforms provide an interactive development environment with all the necessary tools and features to write, test, and debug TypeScript code. |
||||
The TypeScript Playground is a great tool to learn TypeScript. It allows you to write TypeScript code and see the JavaScript output. It also allows you to share your code with others. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,14 +1,12 @@ |
||||
# Boolean |
||||
# boolean |
||||
|
||||
`boolean` is a primitive data type in TypeScript that represents a truth value, either true or false. |
||||
`boolean` is a primitive data type in TypeScript that represents a boolean value i.e. either true or false. Given below is an example of a boolean variable declaration: |
||||
|
||||
For example: |
||||
|
||||
``` |
||||
let isTrue: boolean = true; |
||||
let isFalse: boolean = false; |
||||
``` |
||||
```typescript |
||||
let isTrue: boolean = true; |
||||
let isFalse: boolean = false; |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) |
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) |
||||
@ -1,16 +1,12 @@ |
||||
# Number |
||||
# number |
||||
|
||||
It is a primitive data type in TypeScript that represents numeric values. It includes both integer and floating-point values. |
||||
|
||||
For example: |
||||
|
||||
``` |
||||
let intValue: number = 42; |
||||
let floatValue: number = 3.14; |
||||
``` |
||||
|
||||
In TypeScript, numbers can be assigned to variables, passed as arguments to functions, and returned from functions. They are also compatible with arithmetic operators such as +, -, *, /, and % (modulus). |
||||
```typescript |
||||
let intValue: number = 42; |
||||
let floatValue: number = 3.14; |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) |
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) |
||||
@ -1,13 +1,11 @@ |
||||
# String |
||||
# string |
||||
|
||||
In TypeScript, the string is sequence of char values and also considered as an object. |
||||
It is a primitive data type in TypeScript that represents textual data. It is a set of elements of the 16-bit Unicode character set. |
||||
|
||||
Syntax: |
||||
|
||||
``` |
||||
var var_name = new String(string); |
||||
```typescript |
||||
let name: string = 'John Doe'; |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
Learn more from the following link |
||||
|
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) |
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#the-primitives-string-number-and-boolean) |
||||
@ -1,18 +1,18 @@ |
||||
# Void |
||||
# void |
||||
|
||||
Void is used where there is no data. For example, if a function does not return any value then you can specify void as return type. |
||||
`void` represents the return value of functions which don’t return a value. It’s the inferred type any time a function doesn’t have any `return` statements, or doesn’t return any explicit value from those return statements: |
||||
|
||||
Example: |
||||
|
||||
``` |
||||
function sayHi(): void { |
||||
console.log('Hi!') |
||||
} |
||||
```typescript |
||||
// The inferred return type is void |
||||
function noop() { |
||||
return; |
||||
} |
||||
``` |
||||
|
||||
In JavaScript, a function that doesn’t return any value will implicitly return the value `undefined`. However, `void` and `undefined` are not the same thing in TypeScript. There are further details at the end of this chapter. |
||||
|
||||
let speech: void = sayHi(); |
||||
console.log(speech); //Output: undefined |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [void](https://www.typescriptlang.org/docs/handbook/2/functions.html#void) |
||||
- [void - TypeScript Docs](https://www.typescriptlang.org/docs/handbook/2/functions.html#void) |
||||
@ -1,19 +1,22 @@ |
||||
# Undefined |
||||
# undefined |
||||
|
||||
In TypeScript, undefined is a built-in type that represents the absence of a value. It can be assigned to variables, properties, or function return values when there is no meaningful value to return. |
||||
JavaScript has two primitive values used to signal absent or uninitialized value: `null` (absent) and `undefined` (unintialized). |
||||
|
||||
For example: |
||||
TypeScript has two corresponding *types* by the same names. How these types behave depends on whether you have the `strictNullChecks` option on. |
||||
|
||||
``` |
||||
let x: undefined; |
||||
x = undefined; // valid |
||||
x = null; // not valid |
||||
With `strictNullChecks` off, values that might be `null` or `undefined` can still be accessed normally, and the values `null` and `undefined` can be assigned to a property of any type. This is similar to how languages without `null` checks (e.g. C#, Java) behave. The lack of checking for these values tends to be a major source of bugs; TypeScript always recommend people turn `strictNullChecks` on if it’s practical to do so in the codebase. |
||||
|
||||
function doSomething(): undefined { |
||||
// ... |
||||
return undefined; |
||||
With `strictNullChecks` on, when a value is `null` or `undefined`, you will need to test for those values before using methods or properties on that value. Just like checking for `undefined` before using an optional property, we can use narrowing to check for values that might be `null`: |
||||
|
||||
```typescript |
||||
function doSomething(x: string | null) { |
||||
if (x === null) { |
||||
// do nothing |
||||
} else { |
||||
console.log("Hello, " + x.toUpperCase()); |
||||
} |
||||
``` |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,13 +1,23 @@ |
||||
# Null |
||||
# null |
||||
|
||||
In TypeScript, both undefined and null actually have their types named undefined and null respectively. Much like void, they’re not extremely useful on their own: |
||||
JavaScript has two primitive values used to signal absent or uninitialized value: `null` (absent) and `undefined` (unintialized). |
||||
|
||||
``` |
||||
// Not much else we can assign to these variables! |
||||
let u: undefined = undefined; |
||||
let n: null = null; |
||||
TypeScript has two corresponding *types* by the same names. How these types behave depends on whether you have the `strictNullChecks` option on. |
||||
|
||||
With `strictNullChecks` off, values that might be `null` or `undefined` can still be accessed normally, and the values `null` and `undefined` can be assigned to a property of any type. This is similar to how languages without `null` checks (e.g. C#, Java) behave. The lack of checking for these values tends to be a major source of bugs; TypeScript always recommend people turn `strictNullChecks` on if it’s practical to do so in the codebase. |
||||
|
||||
With `strictNullChecks` on, when a value is `null` or `undefined`, you will need to test for those values before using methods or properties on that value. Just like checking for `undefined` before using an optional property, we can use narrowing to check for values that might be `null`: |
||||
|
||||
```typescript |
||||
function doSomething(x: string | null) { |
||||
if (x === null) { |
||||
// do nothing |
||||
} else { |
||||
console.log("Hello, " + x.toUpperCase()); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Null and Undefined](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined) |
||||
- [null and undefined](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined) |
||||
@ -1,6 +1,10 @@ |
||||
# Array |
||||
|
||||
To specify the type of an array like [1, 2, 3], you can use the syntax number[]; this syntax works for any type (e.g. string[] is an array of strings, and so on). You may also see this written as `Array<number>`, which means the same thing. We’ll learn more about the syntax T<U> when we cover generics. |
||||
To specify the type of an array like `[1, 2, 3]`, you can use the syntax `number[]`; this syntax works for any type (e.g. `string[]` is an array of strings, and so on). You may also see this written as `Array<number>`, which means the same thing. |
||||
|
||||
```typescript |
||||
const numbers: number[] = [1, 2, 3]; |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,19 +1,21 @@ |
||||
# Any |
||||
|
||||
With `any` you can access any properties of it (which will in turn be of type any), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal: |
||||
TypeScript has a special type, `any`, that you can use whenever you don’t want a particular value to cause typechecking errors. |
||||
|
||||
``` |
||||
let obj: any = { x: 0 }; |
||||
// None of the following lines of code will throw compiler errors. |
||||
// Using `any` disables all further type checking, and it is assumed |
||||
// you know the environment better than TypeScript. |
||||
obj.foo(); |
||||
obj(); |
||||
obj.bar = 100; |
||||
obj = "hello"; |
||||
const n: number = obj; |
||||
``` |
||||
When a value is of type `any`, you can access any properties of it (which will in turn be of type `any`), call it like a function, assign it to (or from) a value of any type, or pretty much anything else that’s syntactically legal: |
||||
|
||||
```typescript |
||||
let obj: any = { x: 0 }; |
||||
// None of the following lines of code will throw compiler errors. |
||||
// Using `any` disables all further type checking, and it is assumed |
||||
// you know the environment better than TypeScript. |
||||
obj.foo(); |
||||
obj(); |
||||
obj.bar = 100; |
||||
obj = "hello"; |
||||
const n: number = obj; |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [any](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) |
||||
- [any type in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any) |
||||
|
||||
@ -1,19 +1,19 @@ |
||||
# Object |
||||
|
||||
To define an object type, we simply list its properties and their types. |
||||
To define an `object` type, we simply list its properties and their types. |
||||
|
||||
For example, here’s a function that takes a point-like object: |
||||
|
||||
``` |
||||
// The parameter's type annotation is an object type |
||||
function printCoord(pt: { x: number; y: number }) { |
||||
```typescript |
||||
// The parameter's type annotation is an object type |
||||
function printCoord(pt: { x: number; y: number }) { |
||||
console.log("The coordinate's x value is " + pt.x); |
||||
console.log("The coordinate's y value is " + pt.y); |
||||
} |
||||
printCoord({ x: 3, y: 7 }); |
||||
``` |
||||
} |
||||
|
||||
printCoord({ x: 3, y: 7 }); |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Number, String, Boolean, Symbol and Object](https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#number-string-boolean-symbol-and-object) |
||||
- [Object Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types) |
||||
- [Object Types in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#object-types) |
||||
@ -1,19 +1,18 @@ |
||||
# Unknown |
||||
|
||||
The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value: |
||||
`unknown` is the type-safe counterpart of any. Anything is assignable to `unknown`, but `unknown` isn’t assignable to anything but itself and `any` without a type assertion or a control flow based narrowing. Likewise, no operations are permitted on an `unknown` without first asserting or narrowing to a more specific type. |
||||
|
||||
``` |
||||
function f1(a: any) { |
||||
```typescript |
||||
function f1(a: any) { |
||||
a.b(); // OK |
||||
} |
||||
function f2(a: unknown) { |
||||
a.b(); |
||||
Object is of type 'unknown'. |
||||
} |
||||
``` |
||||
} |
||||
|
||||
This is useful when describing function types because you can describe functions that accept any value without having any values in your function body. |
||||
function f2(a: unknown) { |
||||
// Error: Property 'b' does not exist on type 'unknown'. |
||||
a.b(); |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Unknown](https://www.typescriptlang.org/docs/handbook/2/functions.html#unknown) |
||||
- [Unknown Type in TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#new-unknown-top-type) |
||||
|
||||
@ -1,27 +1,27 @@ |
||||
# Never |
||||
|
||||
The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be true. |
||||
The `never` type represents the type of values that never occur. For instance, `never` is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns. Variables also acquire the type never when narrowed by any type guards that can never be `true`. |
||||
|
||||
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never. |
||||
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, `never` (except `never` itself). Even any isn’t assignable to `never`. |
||||
|
||||
Examples of functions returning never: |
||||
|
||||
``` |
||||
// Function returning never must not have a reachable end point |
||||
function error(message: string): never { |
||||
```typescript |
||||
// Function returning never must not have a reachable end point |
||||
function error(message: string): never { |
||||
throw new Error(message); |
||||
} |
||||
} |
||||
|
||||
// Inferred return type is never |
||||
function fail() { |
||||
// Inferred return type is never |
||||
function fail() { |
||||
return error("Something failed"); |
||||
} |
||||
} |
||||
|
||||
// Function returning never must not have a reachable end point |
||||
function infiniteLoop(): never { |
||||
// Function returning never must not have a reachable end point |
||||
function infiniteLoop(): never { |
||||
while (true) {} |
||||
} |
||||
``` |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,23 +1,59 @@ |
||||
# Satisfies Keyword |
||||
# satisfies Keyword |
||||
|
||||
TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes. |
||||
|
||||
For example: |
||||
|
||||
``` |
||||
// Each property can be a string or an RGB tuple. |
||||
const palette = { |
||||
```typescript |
||||
// Each property can be a string or an RGB tuple. |
||||
const palette = { |
||||
red: [255, 0, 0], |
||||
green: "#00ff00", |
||||
bleu: [0, 0, 255] |
||||
// ^^^^ sacrebleu - we've made a typo! |
||||
}; |
||||
// We want to be able to use array methods on 'red'... |
||||
const redComponent = palette.red.at(0); |
||||
// or string methods on 'green'... |
||||
const greenNormalized = palette.green.toUpperCase(); |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
// ^^^^ sacrebleu - we've made a typo! |
||||
}; |
||||
|
||||
// We want to be able to use array methods on 'red'... |
||||
const redComponent = palette.red.at(0); |
||||
|
||||
// or string methods on 'green'... |
||||
const greenNormalized = palette.green.toUpperCase(); |
||||
``` |
||||
|
||||
Notice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property. |
||||
|
||||
```typescript |
||||
type Colors = "red" | "green" | "blue"; |
||||
type RGB = [red: number, green: number, blue: number]; |
||||
|
||||
const palette: Record<Colors, string | RGB> = { |
||||
red: [255, 0, 0], |
||||
green: "#00ff00", |
||||
bleu: [0, 0, 255] |
||||
// ~~~~ The typo is now correctly detected |
||||
}; |
||||
// But we now have an undesirable error here - 'palette.red' "could" be a string. |
||||
const redComponent = palette.red.at(0); |
||||
``` |
||||
|
||||
The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`: |
||||
|
||||
```typescript |
||||
type Colors = "red" | "green" | "blue"; |
||||
type RGB = [red: number, green: number, blue: number]; |
||||
|
||||
const palette = { |
||||
red: [255, 0, 0], |
||||
green: "#00ff00", |
||||
bleu: [0, 0, 255] |
||||
// ~~~~ The typo is now caught! |
||||
} satisfies Record<Colors, string | RGB>; |
||||
|
||||
// Both of these methods are still accessible! |
||||
const redComponent = palette.red.at(0); |
||||
const greenNormalized = palette.green.toUpperCase(); |
||||
``` |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Satisfies Keyword](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) |
||||
@ -1,24 +1,23 @@ |
||||
# Type Compatibility |
||||
|
||||
Type compatibility in TypeScript refers to the compatibility between different types in TypeScript. TypeScript uses structural typing to determine type compatibility. This means that two types are considered compatible if they have the same structure, regardless of their names. |
||||
TypeScript uses structural typing to determine type compatibility. This means that two types are considered compatible if they have the same structure, regardless of their names. |
||||
|
||||
Here's an example of type compatibility in TypeScript: |
||||
|
||||
``` |
||||
interface Point { |
||||
x: number; |
||||
y: number; |
||||
} |
||||
```typescript |
||||
interface Point { |
||||
x: number; |
||||
y: number; |
||||
} |
||||
|
||||
let p1: Point = { x: 10, y: 20 }; |
||||
let p2: { x: number; y: number } = p1; |
||||
let p1: Point = { x: 10, y: 20 }; |
||||
let p2: { x: number; y: number } = p1; |
||||
|
||||
console.log(p2.x); // Output: 10 |
||||
``` |
||||
console.log(p2.x); // Output: 10 |
||||
``` |
||||
|
||||
In this example, `p1` has the type `Point`, while `p2` has the type `{ x: number; y: number }`. Despite the fact that the two types have different names, they are considered compatible because they have the same structure. This means that you can assign a value of type `Point` to a variable of type `{ x: number; y: number }`, as we do with `p1` and `p2` in this example. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Type Compatibility](https://www.typescriptlang.org/docs/handbook/type-compatibility.html) |
||||
- [Tutorial - Type Compatibility in TypeScript](youtube.com/watch?v=wqm5ibtCSf0) |
||||
@ -1,16 +1,15 @@ |
||||
# Union Types |
||||
|
||||
Union Types in TypeScript allow you to specify multiple possible types for a single variable or parameter. A union type is written as a vertical bar (|) separated list of types. |
||||
Union Types in TypeScript allow you to specify multiple possible types for a single variable or parameter. A union type is written as a vertical bar `|` separated list of types. |
||||
|
||||
For example, consider a function that takes either a string or a number as an argument: |
||||
|
||||
``` |
||||
function combine(input1: string | number, input2: string | number) { |
||||
```typescript |
||||
function combine(input1: string | number, input2: string | number) { |
||||
return input1 + input2; |
||||
} |
||||
``` |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Unions Types](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) |
||||
- [Union Types in TypeScript](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html) |
||||
- [Union Types in TypeScript](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) |
||||
@ -1,22 +1,17 @@ |
||||
# Intersection Types |
||||
|
||||
Intersection Types in TypeScript allow you to combine multiple types into a single type. An intersection type is written as an ampersand (&) separated list of types. |
||||
An intersection type creates a new type by combining multiple existing types. The new type has all features of the existing types. |
||||
|
||||
For example, consider an object that has both a name property and a email property: |
||||
To combine types, you use the `&` operator as follows: |
||||
|
||||
``` |
||||
interface User { |
||||
name: string; |
||||
email: string; |
||||
} |
||||
```typescript |
||||
type typeAB = typeA & typeB; |
||||
``` |
||||
|
||||
const user: User = { |
||||
name: 'John Doe', |
||||
email: 'johndoe@example.com' |
||||
}; |
||||
``` |
||||
The `typeAB` will have all properties from both typeA and typeB. |
||||
|
||||
Note that the union type uses the `|` operator that defines a variable which can hold a value of either `typeA` or `typeB` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Intersection Types](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types) |
||||
- [Implement Intersection Types in the Typescript](https://www.youtube.com/watch?v=adr7W5uyIMk) |
||||
- [Intersection Types in TypeScript](https://www.typescripttutorial.net/typescript-tutorial/typescript-intersection-types/) |
||||
@ -1,22 +1,20 @@ |
||||
# Keyof Operator |
||||
# keyof Operator |
||||
|
||||
The keyof operator in TypeScript is used to get the union of keys from an object type. |
||||
Here's an example of how it can be used: |
||||
The `keyof` operator in TypeScript is used to get the union of keys from an object type. Here's an example of how it can be used: |
||||
|
||||
``` |
||||
interface User { |
||||
```typescript |
||||
interface User { |
||||
name: string; |
||||
age: number; |
||||
location: string; |
||||
} |
||||
} |
||||
|
||||
type UserKeys = keyof User; // "name" | "age" | "location" |
||||
const key: UserKeys = "name"; |
||||
``` |
||||
type UserKeys = keyof User; // "name" | "age" | "location" |
||||
const key: UserKeys = "name"; |
||||
``` |
||||
|
||||
In this example, `UserKeys` is a type that represents the union of keys from the `User` interface, which is `"name"` | `"age"` | `"location"`. And a constant named `key` with the type `UserKeys` is declared with the value `"name"`. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Keyof Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html#handbook-content) |
||||
- [Typescript Generics - Understanding the keyof Operator](https://www.youtube.com/watch?v=uy6fw4znJF4) |
||||
@ -1 +1,17 @@ |
||||
# Typeof operator |
||||
# typeof Operator |
||||
|
||||
The `typeof` operator is used to check the type of a variable. It returns a string value representing the type of the variable. |
||||
|
||||
```typescript |
||||
let value: string | number = "hello"; |
||||
|
||||
if (typeof value === "string") { |
||||
console.log("value is a string"); |
||||
} else { |
||||
console.log("value is a number"); |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Type Guards and Differentiating Types](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#typeof-type-guards) |
||||
@ -1 +1,27 @@ |
||||
# Instanceof operator |
||||
# instanceOf operator |
||||
|
||||
The `instanceof` operator is a way to narrow down the type of a variable. It is used to check if an object is an instance of a class, interface, or type. |
||||
|
||||
```typescript |
||||
class Bird { |
||||
fly() { |
||||
console.log('flying...'); |
||||
} |
||||
layEggs() { |
||||
console.log('laying eggs...'); |
||||
} |
||||
} |
||||
|
||||
const pet = new Bird(); |
||||
|
||||
// instanceof |
||||
if (pet instanceof Bird) { |
||||
pet.fly(); |
||||
} else { |
||||
console.log('pet is not a bird'); |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [instanceOf Operator](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#instanceof-narrowing) |
||||
@ -1 +1,22 @@ |
||||
# Equality |
||||
|
||||
TypeScript also uses switch statements and equality checks like `===`, `!==`, `==`, and `!=` to narrow types. For example: |
||||
|
||||
```typescript |
||||
function example(x: string | number, y: string | boolean) { |
||||
if (x === y) { |
||||
// We can now call any 'string' method on 'x' or 'y'. |
||||
x.toUpperCase(); |
||||
y.toLowerCase(); |
||||
} else { |
||||
console.log(x); |
||||
console.log(y); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
When we checked that `x` and `y` are both equal in the above example, TypeScript knew their types also had to be equal. Since string is the only common type that both `x` and `y` could take on, TypeScript knows that `x` and `y` must be a string in the first branch. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Equality Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#equality-narrowing) |
||||
@ -1 +1,19 @@ |
||||
# Truthiness |
||||
|
||||
Truthiness might not be a word you’ll find in the dictionary, but it’s very much something you’ll hear about in JavaScript. |
||||
|
||||
In JavaScript, we can use any expression in conditionals, `&&`s, `||`s, `if` statements, Boolean negations (`!`), and more. As an example, if statements don’t expect their condition to always have the type boolean. |
||||
|
||||
```typescript |
||||
function getUsersOnlineMessage(numUsersOnline: number) { |
||||
if (numUsersOnline) { |
||||
return `There are ${numUsersOnline} online now!`; |
||||
} |
||||
|
||||
return "Nobody's here. :("; |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Truthiness Narrowing](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#truthiness-narrowing) |
||||
@ -1 +1,22 @@ |
||||
# Type predicates |
||||
# Type Predicates |
||||
|
||||
Type predicates are functions that return a boolean value. They are used to narrow the type of a variable. Type predicates are used in type guards. |
||||
|
||||
```typescript |
||||
function isString(value: unknown): value is string { |
||||
return typeof value === 'string'; |
||||
} |
||||
|
||||
function example(x: unknown) { |
||||
if (isString(x)) { |
||||
// We can now call any 'string' method on 'x'. |
||||
x.toUpperCase(); |
||||
} else { |
||||
console.log(x); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Type Guards and Differentiating Types](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates) |
||||
@ -1 +1,7 @@ |
||||
# Type guards |
||||
# Type Guards |
||||
|
||||
Type guards are a way to narrow down the type of a variable. This is useful when you want to do something different depending on the type of a variable. |
||||
|
||||
Learn more from the following resources: |
||||
|
||||
- [Type Guards - TypeScript Docs](https://www.typescriptlang.org/docs/handbook/2/narrowing.html#typeof-type-guards) |
||||
@ -1,21 +1,21 @@ |
||||
# 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. |
||||
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 { |
||||
```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) |
||||
- [Extending Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html) |
||||
@ -1,16 +1,15 @@ |
||||
# Constructor Params |
||||
|
||||
In TypeScript, constructor parameters can be declared with access modifiers (e.g. public, private, protected) and/or type annotations. The parameters are then automatically assigned to properties of the same name within the constructor, and can be accessed within the class. For example: |
||||
In TypeScript, constructor parameters can be declared with access modifiers (e.g. `public`, `private`, `protected`) and/or type annotations. The parameters are then automatically assigned to properties of the same name within the constructor, and can be accessed within the class. For example: |
||||
|
||||
``` |
||||
class Example { |
||||
```typescript |
||||
class Example { |
||||
constructor(private name: string, public age: number) {} |
||||
} |
||||
``` |
||||
} |
||||
``` |
||||
|
||||
In this example, the constructor has two parameters: name and age. name has a private access modifier, so it can only be accessed within the Example class. age has a public access modifier, so it can be accessed from outside the class as well. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [TypeScript - Construct](https://www.typescriptlang.org/docs/handbook/2/classes.html#constructors) |
||||
- [TypeScript - Methods and constructors](https://www.youtube.com/watch?v=d9IJyMOmJoE) |
||||
@ -1,15 +1,14 @@ |
||||
# Non Nullable |
||||
|
||||
Nun Nullable constructs a type by excluding null and undefined from Type. |
||||
Non-Nullable constructs a type by excluding `null` and `undefined` from Type. |
||||
|
||||
``` |
||||
type T0 = NonNullable<string | number | undefined>; |
||||
```typescript |
||||
type T0 = NonNullable<string | number | undefined>; |
||||
// type T0 = string | number |
||||
|
||||
type T0 = string | number |
||||
type T1 = NonNullable<string[] | null | undefined>; |
||||
|
||||
type T1 = string[] |
||||
``` |
||||
type T1 = NonNullable<string[] | null | undefined>; |
||||
// type T1 = string[] |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,43 +1,39 @@ |
||||
# Return type |
||||
# ReturnType |
||||
|
||||
Return type constructs a type consisting of the return type of function Type. |
||||
|
||||
``` |
||||
declare function f1(): { a: number; b: string }; |
||||
type T0 = ReturnType<() => string>; |
||||
```typescript |
||||
type T0 = ReturnType<() => string>; |
||||
// type T0 = string |
||||
|
||||
type T0 = string |
||||
type T1 = ReturnType<(s: string) => void>; |
||||
type T1 = ReturnType<(s: string) => void>; |
||||
// type T1 = void |
||||
|
||||
type T1 = void |
||||
type T2 = ReturnType<<T>() => T>; |
||||
type T2 = ReturnType<<T>() => T>; |
||||
// type T2 = unknown |
||||
|
||||
type T2 = unknown |
||||
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; |
||||
type T3 = ReturnType<<T extends U, U extends number[]>() => T>; |
||||
// type T3 = number[] |
||||
|
||||
type T3 = number[] |
||||
type T4 = ReturnType<typeof f1>; |
||||
declare function f1(): { a: number; b: string }; |
||||
type T4 = ReturnType<typeof f1>; |
||||
// type T4 = { |
||||
// a: number; |
||||
// b: string; |
||||
// } |
||||
|
||||
type T4 = { |
||||
a: number; |
||||
b: string; |
||||
} |
||||
type T5 = ReturnType<any>; |
||||
type T5 = ReturnType<any>; |
||||
// type T5 = any |
||||
|
||||
type T5 = any |
||||
type T6 = ReturnType<never>; |
||||
type T6 = ReturnType<never>; |
||||
// type T6 = never |
||||
|
||||
type T6 = never |
||||
type T7 = ReturnType<string>; |
||||
Type 'string' does not satisfy the constraint '(...args: any) => any'. |
||||
type T7 = ReturnType<string>; |
||||
// ^ Type 'string' does not satisfy the constraint '(...args: any) => any'. |
||||
|
||||
type T7 = any |
||||
type T8 = ReturnType<Function>; |
||||
Type 'Function' does not satisfy the constraint '(...args: any) => any'. |
||||
Type 'Function' provides no match for the signature '(...args: any): any'. |
||||
|
||||
type T8 = any |
||||
``` |
||||
type T8 = ReturnType<Function>; |
||||
// ^ Type 'Function' does not satisfy the constraint '(...args: any) => any'. |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,33 +1,28 @@ |
||||
# Instance type |
||||
|
||||
# InstanceType |
||||
|
||||
This type constructs a type consisting of the instance type of a constructor function in Type. |
||||
|
||||
``` |
||||
class C { |
||||
```typescript |
||||
class C { |
||||
x = 0; |
||||
y = 0; |
||||
} |
||||
|
||||
type T0 = InstanceType<typeof C>; |
||||
} |
||||
|
||||
type T0 = C |
||||
type T1 = InstanceType<any>; |
||||
type T0 = InstanceType<typeof C>; |
||||
// type T0 = C |
||||
|
||||
type T1 = any |
||||
type T2 = InstanceType<never>; |
||||
type T1 = InstanceType<any>; |
||||
// type T1 = any |
||||
|
||||
type T2 = never |
||||
type T3 = InstanceType<string>; |
||||
Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'. |
||||
type T2 = InstanceType<never>; |
||||
// type T2 = never |
||||
|
||||
type T3 = any |
||||
type T4 = InstanceType<Function>; |
||||
Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'. |
||||
Type 'Function' provides no match for the signature 'new (...args: any): any'. |
||||
type T3 = InstanceType<string>; |
||||
// ^ Type 'string' does not satisfy the constraint 'abstract new (...args: any) => any'. |
||||
|
||||
type T4 = any |
||||
``` |
||||
type T4 = InstanceType<Function>; |
||||
// ^ Type 'Function' does not satisfy the constraint 'abstract new (...args: any) => any'. |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,20 +1,17 @@ |
||||
# Awaited |
||||
|
||||
This type is meant to model operations like await in async functions, or the .then() method on Promises - specifically, the way that they recursively unwrap Promises. |
||||
This type is meant to model operations like await in async functions, or the `.then()` method on Promises - specifically, the way that they recursively unwrap Promises. |
||||
|
||||
``` |
||||
type A = Awaited<Promise<string>>; |
||||
```typescript |
||||
type A = Awaited<Promise<string>>; |
||||
// type A = string |
||||
|
||||
type A = string |
||||
type B = Awaited<Promise<Promise<number>>>; |
||||
// type B = number |
||||
|
||||
type B = Awaited<Promise<Promise<number>>>; |
||||
|
||||
type B = number |
||||
|
||||
type C = Awaited<boolean | Promise<number>>; |
||||
|
||||
type C = number | boolean |
||||
``` |
||||
type C = Awaited<boolean | Promise<number>>; |
||||
// type C = number | boolean |
||||
``` |
||||
|
||||
Learn more from the following links: |
||||
|
||||
|
||||
@ -1,20 +1,8 @@ |
||||
# Formatting |
||||
|
||||
Formatting in TypeScript refers to the way code is indented, spaced, and arranged to make it easier to read and understand. Consistent formatting helps to ensure that code is readable, maintainable, and consistent across multiple developers and projects. |
||||
Prettier is an opinionated code formatter with support for JavaScript, HTML, CSS, YAML, Markdown, GraphQL Schemas. By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. |
||||
|
||||
Here's an example of basic formatting in TypeScript: |
||||
Visit the following resources to learn more: |
||||
|
||||
``` |
||||
function add(a: number, b: number): number { |
||||
return a + b; |
||||
} |
||||
|
||||
const result = add(3, 5); |
||||
console.log(result); // Output: 8 |
||||
``` |
||||
|
||||
In this example, the code is indented with two spaces, and each line of code is separated by a line break. The opening brace `{` is placed on the same line as the function declaration, and the closing brace } is indented on a new line. This is a common style for formatting code in TypeScript. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [How to format strings in TypeScript?](https://www.tutorialspoint.com/how-to-format-strings-in-typescript) |
||||
- [Prettier Website](https://prettier.io) |
||||
- [Why Prettier](https://prettier.io/docs/en/why-prettier.html) |
||||
|
||||
@ -1,32 +1,9 @@ |
||||
# Linting |
||||
|
||||
With ESLint you can impose the coding standard using a certain set of standalone rules. |
||||
|
||||
Linting in TypeScript refers to the process of using a linter to analyze your code and find potential problems or issues. Linters can help you enforce a consistent coding style, catch syntax errors, and identify problematic patterns in your code. |
||||
Visit the following resources to learn more: |
||||
|
||||
Here's an example of how you can use TSLint, a popular TypeScript linter, in your TypeScript project: |
||||
|
||||
``` |
||||
// Step 1: Install TSLint |
||||
npm install tslint |
||||
|
||||
// Step 2: Create a TSLint configuration file (tslint.json) |
||||
{ |
||||
"extends": [ |
||||
"tslint:recommended" |
||||
], |
||||
"rules": { |
||||
"semicolon": [true, "always"], |
||||
"quotemark": [true, "double"] |
||||
} |
||||
} |
||||
|
||||
// Step 3: Run TSLint on your TypeScript code |
||||
./node_modules/.bin/tslint myFile.ts |
||||
``` |
||||
|
||||
In this example, we first install TSLint using the npm package manager. Next, we create a TSLint configuration file, "tslint.json", that extends the recommended TSLint rules and sets specific rules for semicolons and quotes. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [Linting TypeScript](https://www.youtube.com/watch?v=020KjoCox70) |
||||
- [Linting in TypeScript using ESLint and Prettier](https://blog.logrocket.com/linting-typescript-eslint-prettier/) |
||||
- [ESLint Official Website](https://eslint.org/) |
||||
- [Introduction to ESLint](https://dev.to/shivambmgupta/eslint-what-why-when-how-5f1d) |
||||
- [ESLint Quickstart - find errors automatically](https://www.youtube.com/watch?v=qhuFviJn-es) |
||||
|
||||
@ -1,49 +1,11 @@ |
||||
# Useful Packages |
||||
|
||||
There are many useful packages available for TypeScript that can help you improve your development workflow and add new functionality to your projects. Here are a few popular packages to consider using in your TypeScript projects: |
||||
|
||||
1. Lodash: A utility library that provides a wide range of helpful functions for working with arrays, objects, and other data structures. |
||||
|
||||
``` |
||||
// Step 1: Install Lodash |
||||
npm install lodash |
||||
|
||||
// Step 2: Import Lodash in your TypeScript code |
||||
import * as _ from "lodash"; |
||||
|
||||
// Step 3: Use Lodash in your code |
||||
const result = _.map([1, 2, 3], (num) => num * 3); |
||||
console.log(result); // Output: [3, 6, 9] |
||||
``` |
||||
|
||||
2. Axios: A popular HTTP client for making REST API requests. |
||||
|
||||
``` |
||||
// Step 1: Install Axios |
||||
npm install axios |
||||
|
||||
// Step 2: Import Axios in your TypeScript code |
||||
import axios from "axios"; |
||||
|
||||
// Step 3: Use Axios in your code |
||||
axios.get("https://jsonplaceholder.typicode.com/posts") |
||||
.then((response) => { |
||||
console.log(response.data); |
||||
}); |
||||
``` |
||||
|
||||
3. Moment.js: A library for working with dates and times. |
||||
|
||||
``` |
||||
// Step 1: Install Moment.js |
||||
npm install moment |
||||
|
||||
// Step 2: Import Moment.js in your TypeScript code |
||||
import * as moment from "moment"; |
||||
|
||||
// Step 3: Use Moment.js in your code |
||||
const date = moment().format("MMMM Do YYYY, h:mm:ss a"); |
||||
console.log(date); // Output: "February 1st 2023, 2:00:00 pm" |
||||
``` |
||||
|
||||
These are just a few examples of the many useful packages available for TypeScript. By using these and other packages, you can improve your development workflow and add new functionality to your projects. |
||||
TypeScript has a large ecosystem of packages that can be used to extend the language or to add functionality to your project. Here is the list of some of the most useful packages. |
||||
|
||||
- [zod](https://zod.dev/): A TypeScript-first data validation library |
||||
- [ts-morph](https://github.com/dsherret/ts-morph): A TypeScript-first API for manipulating TypeScript code |
||||
- [ts-node](https://typestrong.org/ts-node/): A TypeScript execution and REPL for node.js |
||||
- [ts-jest](https://github.com/kulshekhar/ts-jest): A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript. |
||||
- [typesync](https://github.com/jeffijoe/typesync): Install missing TypeScript typings for dependencies in your package.json. |
||||
- [tsd](https://github.com/SamVerschueren/tsd) - TypeScript Definition Manager |
||||
- [type-fest](https://github.com/sindresorhus/type-fest) - A collection of essential TypeScript types |
||||
@ -1,13 +1,16 @@ |
||||
# Build Tools |
||||
|
||||
Build tools are used to compile and bundle your TypeScript code into a format that can be run in a browser or other environment. Some popular build tools for TypeScript include: |
||||
Task runners automatically execute commands and carry out processes behind the scenes. This helps automate your workflow by performing mundane, repetitive tasks that you would otherwise waste an egregious amount of time repeating yourself. |
||||
|
||||
- Webpack: A popular module bundler that can compile and bundle TypeScript code, as well as other assets such as CSS, images, and more. |
||||
- Babel: A popular JavaScript compiler that can be used to compile TypeScript code into a format that is compatible with older browsers and environments. |
||||
- Rollup: A module bundler that can be used to compile and bundle TypeScript code for small to medium-sized projects. |
||||
- Parcel: A fast and efficient zero-configuration bundler that can compile and bundle TypeScript code. |
||||
Common usages of task runners include numerous development tasks such as: spinning up development servers, compiling code (ex. SCSS to CSS), running linters, serving files up from a local port on your computer, and many more! |
||||
|
||||
Learn more from the following links: |
||||
Visit the following resources to learn more: |
||||
|
||||
- [Integrating with Build Tools](https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html#handbook-content) |
||||
- [TypeScript Build Tools](https://www.javatpoint.com/typescript-build-tools) |
||||
- [webpack is a static module bundler for modern JavaScript applications](https://webpack.js.org/) |
||||
- [Vite Next Generation Frontend Tooling](https://vitejs.dev) |
||||
- [Parcel is a zero configuration build tool for the web](https://parceljs.org/) |
||||
- [esbuild is an extremely fast JavaScript bundler and minifier](https://esbuild.github.io/) |
||||
- [swc is a super-fast compiler written in Rust](https://swc.rs/) |
||||
- [tsup is a zero-config TypeScript build tool](https://tsup.egoist.sh/) |
||||
- [Rollup is a module bundler for JavaScript](https://rollupjs.org/guide/en/) |
||||
- [tsdx is a zero-config CLI for TypeScript package development](https://tsdx.io/) |
||||
@ -1,24 +1,3 @@ |
||||
# Ecosystem |
||||
|
||||
The TypeScript ecosystem refers to the set of tools, libraries, and packages that are available to support the development of applications using TypeScript. Here are a few examples of the components that make up the TypeScript ecosystem: |
||||
|
||||
1. TypeScript Compiler |
||||
|
||||
``` |
||||
// Example: Compiling TypeScript code using the TypeScript compiler |
||||
tsc index.ts |
||||
``` |
||||
|
||||
2. TypeScript Definition Files |
||||
|
||||
``` |
||||
// Example: Installing TypeScript definition files for the Lodash library |
||||
npm install @types/lodash |
||||
``` |
||||
|
||||
3. TypeScript Plugins for Editor Environments |
||||
4. TypeScript-based Frameworks and Libraries |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [tsc, the TypeScript compiler](https://www.typescriptlang.org/docs/handbook/2/basic-types.html#tsc-the-typescript-compiler) |
||||
Have a look at the linked nodes for different tools and frameworks that you can use to build your projects. |
||||
Loading…
Reference in new issue