!a.typscript.ts

/* 
all kind of typscript functions
*/

asConst.ts

let framework = 'Angular' as const;
framework = 'AngularJS'; 

// Type '"AngularJS"' is not assignable to type '"Angular"'.ts (2322)

const developer = {
  language: 'Typescript',
  company: {
    name: 'Google'
  }
} as const;

developer.company.name = 'Alphabet';

// Cannot assign to 'name' because it is a read-only property.ts(2540)

assignableProps.ts

/*
Extend an Interface from Record<Keys, Type> in typescript to declare an Object that has both
defined properties, and also dynamically assignable properties.
*/
  
interface MyCustom extends Record<string, any> {
  prop_a: string;
  
  prop_b: string;
  
  prop_c: Array<number>;
}  

declareWindow.ts

/*
How to declare a custom property on the Window object in typescript.
*/


declare global {
  interface Window { MyValue: string; }
}

window.MyValue = 'Hello World';

extractt.tsx

/*
TypeScript Tip 💡

TypeScript allows us a lot of flexibility when using their inbuilt Utility Types.

For instance, we can use "Extract" to create a new type containing
only properties that are assignable to a given type. 
*/

interface User{
  id:string;
  username:string;
  followers?:number;
  isBlocked?:boolean;
}

// We can use Extract to create  a new type containing only properties that are strings
const logUser = (user: Extract<User, string) => {
  // 'User' only contains properties that are strings
  Object.values(user).forEach(u => logUser(u));
}
  
const logUser = (prop:string) => {
  console.log(prop);
}

generic.tsx

/*
reactjs hack for declaring a const variable as a generic 
function using typescript in a TSX file. typescript confuses
generic consts in a TSX file with JSX elements. 
You can get around this by adding a trailing comma.
*/


const foo = <T>(x: T) => x;
// ERROR : unclosed `T` tag
  
const foo = <T,>(x: T) => x;
// FIXED!

readOnlyArray.ts

/*
TypeScript Tip 💡 TypeScript comes with a utility type, 'ReadonlyArray<T>'. 
It's equivalent to 'Array<T>', but with all mutating methods removed. 
In this way, you can make sure you don’t change your arrays after creation.
*/
  
// Create a readonly version of your array using 
// TYpescript's ReadonlyArray<T>

const foo = [1, 2, 3, 4, 5];
const bar = ReadonlyArray<number> = [...foo];
  
// Now, all mutating methods are removed and will throw a compile-time error.
  
 bar[0] = 42; // error!
 bar.push(100); // error!
 var.length = 3; // error !

record.tsx

/*
TypeScript Tip 💡 Use the utility type 'Record' to make an object 
indexable, instead of typing it out manually. 
It's cleaner and becomes handy if you want to map the properties of one type to another.
*/

// Use record to make an object indexable

// WRONG ----------------------
interface User { name: string };
const users : { [key: string]: User } = {};

// TRUE -----------------------
interface User { name: string }; 
const users : Record<string, user> = {};