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: |
||||
|
||||
``` |
||||
```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: |
||||
|
||||
``` |
||||
```typescript |
||||
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). |
||||
|
||||
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; |
||||
} |
||||
|
||||
let speech: void = sayHi(); |
||||
console.log(speech); //Output: undefined |
||||
``` |
||||
|
||||
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. |
||||
|
||||
|
||||
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,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,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: |
||||
|
||||
``` |
||||
```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 }); |
||||
``` |
||||
|
||||
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. |
||||
|
||||
``` |
||||
```typescript |
||||
function f1(a: any) { |
||||
a.b(); // OK |
||||
} |
||||
|
||||
function f2(a: unknown) { |
||||
// Error: Property 'b' does not exist on type '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. |
||||
|
||||
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,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: |
||||
|
||||
```typescript |
||||
type typeAB = typeA & typeB; |
||||
``` |
||||
interface User { |
||||
name: string; |
||||
email: string; |
||||
} |
||||
|
||||
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 +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,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