Typescriptreact

cotrEntry

TypeScript Entry Point

// TypeScript Entry Point
// To run this program, use: `ts-node filename.ts`
// Note: Ensure you have ts-node installed globally (`npm install -g ts-node`)

console.log('Hello, World!');

cotrNotEqual

TypeScript Not Equal To

!==

cotrTypesBoolFalse

TypeScript Boolean False

false

cotrAny

TypeScript Dynamic Type

any

cotrVar

TypeScript Create Variable

let ${1:myVar} = $2;

cotrSwitch

TypeScript Switch Statement

switch (${1:variable}) {
  case ${2:value1}:
    ${3:// Your code here}
    break;
  case ${4:value2}:
    ${5:// Your code here}
    break;
  default:
    ${6:// Your code here}
}

cotrFuncArrow

TypeScript Arrow Function

const ${2:myFunction} = (${3:parameters}): ${1:void} => {
  ${4:// Your code here}
};

cotrTernary

TypeScript Ternary Operator

${1:condition} ? ${2:trueValue} : ${3:falseValue}

cotrOperatorsBool

TypeScript Boolean Operators

// TypeScript Boolean Operators
// Logical AND: &&
// Logical OR: ||
// Logical NOT: !
// Equality: ==
// Strict Equality: ===
// Inequality: !=
// Strict Inequality: !==
// Greater than: >
// Less than: <
// Greater than or equal to: >=
// Less than or equal to: <=

cotrGenMap

TypeScript Generate Object Map

const ${1:myMap} = Object.fromEntries(
  Array.from({ length: ${2:length} }, (_, index) => [`key${index}`, `value${index}`])
);

cotrTypesNum

TypeScript Number Type

number

cotrVarString

TypeScript Create String Variable

let ${1:myString}: string = ${2:'myValue'};

cotrVarMapClass

TypeScript Create Map Variable (Map Class)

let ${1:myMap} = new Map<string, ${2:type}>([
  ['${3:key1}', ${4:'value1'}],
  ['${5:key2}', ${6:'value2}']
]);

cotrFunc

TypeScript Function

function ${2:myFunction}(${3:parameters}): ${1:void} {
  ${4:// Your code here}
}

cotrCommentMulti

TSX Multi-Line Comment

{/*
  ${1:Your comment here}
  ${2:Your comment here}
  ${3:Your comment here}
*/}

cotrTypeConvert

TypeScript Type Conversion

// TypeScript Type Conversion:

// Implicit conversions (TypeScript performs automatically):
// - Can be unpredictable, especially with loose equality (==).

// Explicit conversions:
// - variable as Type  // Type assertion (can throw an error if conversion fails)
// - <Type>variable  // Type casting (can throw an error if conversion fails)

// Note:
// - Be aware of implicit conversions and use explicit conversions when necessary for clarity and control.

cotrVarDate

TypeScript Create Date Variable

let ${1:myDate}: Date = new Date(${2:year}, ${3:month} - 1, ${4:day});

cotrPrintMulti

TypeScript Print Multi

console.log(`
${1:Line 1}
${2:Line 2}
${3:Line 3}
`);

cotrVarNullable

TypeScript Create Nullable Variable

let ${1:myVar}: ${2:Type} | null = $3;

cotrFuncArgs

TypeScript Function Args

// In TypeScript, functions can have arguments with default values.
function ${2:myFunction}(${3:arg1}: ${4:type1}, ${5:arg2}: ${6:type2} = ${7:defaultValue}): ${1:void} {
  ${8:// Your code here}
}

cotrTypesBoolTrue

TypeScript Boolean True

true

cotrTypesList

TypeScript List Type

Array<${1:Type}>

cotrVarBool

TypeScript Create Boolean Variable

let ${1:myBoolean}: boolean = ${2:true};

cotrComment

TSX Comment

{/* ${1:Your comment here} */}

cotrTypesBool

TypeScript Boolean Type

boolean

cotrVarNumber

TypeScript Create Number Variable

let ${1:myNumber}: number = ${2:0};

cotrVarStatic

TypeScript Static Variable

static ${3:myStaticVar}: ${2:type} = ${4:value};

// Access the static variable
// MyClass.${3:myStaticVar}

cotrFuncArgsNamed

TypeScript Function Named Args

function ${2:myFunction}({${3:arg1}, ${4:arg2}}: {${3:arg1}: ${5:type1}, ${4:arg2}: ${6:type2}}): ${1:void} {
  ${7:// Your code here}
}

cotrIfElse

TypeScript If Else Statement

if (${1:condition}) {
  ${2:// Your code here}
} else if (${3:condition}) {
  ${4:// Your code here}
} else {
  ${5:// Your code here}
}

cotrEqual

TypeScript Equal To

===

cotrTypeCheck

TypeScript Type Check

typeof ${1:variable}  // Note: This checks the runtime type.

cotrTypesString

TypeScript String Type

string

cotrGenList

TypeScript Generate Array

const ${1:myList} = Array.from({ length: ${2:length} }, (_, index) => ${3:'item'} + index);

cotrTryCatch

TSX Try Catch

try {
  ${1:// Your code here}
} catch (${2:exception}) {
  ${3:// Your code here}
}

cotrIf

TypeScript If Statement

if (${1:condition}) {
  ${2:// Your code here}
}

cotrNull

TypeScript Null Type

null

cotrVarTyped

TypeScript Create Typed Variable

let ${1:myVar}: ${2:Type} = $3;

cotrVarList

TypeScript Create List Variable

let ${1:myList}: ${2:type}[] = [
  ${3:'item1'},
  ${4:'item2'},
  // Add more items here
];

cotrForOfLoop

TypeScript For…Of Loop

for (const item of ${1:iterable}) {
  ${2:// Your code here}
}

cotrThrow

TSX Throw Exception

throw new Error('Your message here');

cotrTypes

TypeScript Types

$BLOCK_COMMENT_START
Basic types in TypeScript:
- number: Numeric data type
- string: Textual data type
- boolean: True or false value
- array: Array of values
- tuple: Fixed-length array of values
- enum: Enumeration of named values
- any: Any data type
- void: Absence of a value
- null: Null value
- undefined: Undefined value
- never: Represents values that never occur
- object: Non-primitive data type
$BLOCK_COMMENT_END

cotrVarSyntax

Variable Declaration Syntax

// TypeScript Variable Declaration Syntax:

// - var: (Scope: Function or Global)
//   - Can be reassigned and redeclared within its scope.
//   - Use with caution due to potential scoping issues.

// - let: (Scope: Block)
//   - Can be reassigned but not redeclared within its scope.
//   - Preferred for variables that need to be reassigned.

// - const: (Scope: Block)
//   - Cannot be reassigned or redeclared.
//   - Use for values that should remain constant.

// Note:
// - Use 'let' for most variable declarations.
// - Use 'const' for values that should not change.

cotrVarStringMulti

TypeScript Create Multi-Line String Variable

let ${1:myString}: string = `
${2:Line 1}
${3:Line 2}
${4:Line 3}
`;

cotrConst

TypeScript Create Constant

const ${1:myConst} = $2;

cotrForLoop

TypeScript For Loop

for (let ${1:i} = 0; $1 < ${2:10}; $1++) {
  // Your code here
}

cotrWhileLoop

TypeScript While Loop

while (${1:condition}) {
  ${2:// Your code here}
}

cotrOperators

TypeScript Mathematical Operators

// TypeScript Mathematical Operators
// Addition: +
// Subtraction: -
// Multiplication: *
// Division: /
// Modulus (Remainder): %
// Exponentiation: **
// Increment: Use ++ or +=
// Decrement: Use -- or -=
// Assignment: =
// Addition assignment: +=
// Subtraction assignment: -=
// Multiplication assignment: *=
// Division assignment: /=
// Modulus assignment: %=
// Exponentiation assignment: **=

cotrTypeCompare

TypeScript Type Comparison

// Check if two variables have the same type:
if (typeof ${1:variable1} === typeof ${2:variable2}) {
  // Your code here
}

cotrTypesDate

TypeScript Date Type

Date

cotrNow

TypeScript Date Now

new Date()

cotrInterpolate

TypeScript Interpolate String

`Hello, ${1:name}!`

cotrClass

TypeScript Class

class ${1:MyClass} {
  ${2:// Your code here}
}

cotrStructure

TypeScript with React Project Structure (High-Level)

// Recommended High-Level TypeScript with React Project Structure:

// - public/
//   - Contains the HTML file and static assets like images and fonts.

// - src/
//   - App.tsx: The root React component.
//   - index.tsx: Entry point that renders the React app.
//   - /components/
//     - Reusable UI components.
//   - /containers/
//     - Components connected to the Redux store or context providers.
//   - /hooks/
//     - Custom React hooks.
//   - /pages/
//     - Components representing pages or routes.
//   - /utils/
//     - Utility functions and helpers.
//   - /services/
//     - API calls, data fetching, and other services.
//   - /store/
//     - Redux store, actions, and reducers.
//   - /styles/
//     - CSS/SCSS files or styled-components.

// - .env files
//   - Environment-specific configurations.

// - tsconfig.json
//   - Configuration for the TypeScript compiler.

// - package.json
//   - Project metadata and dependencies.

// Note:
// - This structure is common for larger React applications and can be scaled according to the project size.
// - Smaller projects might not need separate directories for hooks, services, or containers.

cotrTypesMap

TypeScript Map Type

Map<${1:KeyType}, ${2:ValueType}>

cotrConcat

TypeScript Concatenate Strings

'Hello, ' + ${1:name} + '!'

cotrVarMap

TypeScript Create Map Variable

let ${1:myMap}: { [key: string]: ${2:type} } = {
  ${3:'key1'}: ${4:'value1'},
  ${5:'key2'}: ${6:'value2'},
  // Add more key-value pairs here
};

cotrFuncLambda

TypeScript Lambda

const ${1:myLambda} = (${2:parameters}) => ${3:expression};

cotrFuncSyntax

TypeScript Function Syntax

// TypeScript Function Syntax
// Basic function: function functionName(parameters): ReturnType { ... }
// Function with arguments: function functionName(arg1: Type1, arg2: Type2, ...): ReturnType { ... }
// Function with named arguments: function functionName({arg1, arg2, ...}: {arg1: Type1, arg2: Type2, ...}): ReturnType { ... }

cotrInfo

TypeScript Info

Typing: Statically typed (superset of JavaScript)
Paradigm: Multi-paradigm: event-driven, functional, imperative, object-oriented
Compilation: Transpiled to JavaScript
Concurrency: Inherits JavaScript's event loop model for asynchronous programming

cotrPrint

TypeScript Print

console.log(${1:'Your message here'});

cotrFuncAnon

TypeScript Anonymous Function

(${1:parameters}): ${2:void} => {
  ${3:// Your code here}
};

cotrEnum

TypeScript Enum

enum ${1:MyEnum} {
  ${2:value1},
  ${3:value2},
  // Add more values here
}