Posts

Showing posts from February, 2024

#12 Optional Chaining (Advanced Types)

 In optional Chaining, we perform a certain action only if it is true or valid else we do not The function gets optional. Like in Example; type boy={weight: number} function Ram(id: number): boy | null{     return id===0? null : {weight: 11} } let Employee=Ram(0); console.log(Employee?.weight); In above example, in function Ram, the type of function is given boy OR null. A variable Employee calls the function Ram with value 0 which results to null. In console, Employee?.weight signifies that If there is a value of Employee and the result is not null then show weight else ignore. In a way it is optional if the value of employee is null.

#11 Nullable Type (Advanced Types)

 Null cannot be used like we use in JS. Null is hardly used and we we must use we should modify the function itself like; function name(first=string | null){console.log("Hi")} name(null); Here we defined that the value may also be a null for null to act without errors.

#10 Literal Types (Advanced Types)

 We can have a constant with two values types. Like in example; Let quantity:50 | 100=100 Here, the quantity is assigned to 50 or 100. So the value of quantity can only be 50 or 100 else it shows an error. It can also be used for strings.

#9 Intersection Type (Advanced Types)

 It is used where there is a constant which is of two or more types. It is denoted by &. It can be written as; type work={()=>void} type worker={()=>console.log("hi")} const office:{work & woker}={    work:()=>{}, worker:()=>{} } In this way, we can use both the types at the same object constant by using &

#8 Union Type (Advanced Types)

 When we need a value that may be of either types like string or number, then we may use union type. It can be written as; function( weight: number | string ){      if(typeof weight === "number"){          return weight * 2;}      else{          return parseInt(weight)*2;} Here, the weight may either be number or a string. To make the weight act as a number, we use IF where if the (type of weight === number) so that the weight can act as a number ELSE it shall act as a string.

#7 Type Alias (Advanced Types)

 When we need a same values of type for different constants, instead of repeating the code, we can simply do as example; type Employee={name: string, id: number} let user: Employee={name:"Ram",id:10} Here, we use *type* to create  an object type that can be used for other constants without repeating the code.

#6 Objects (Fundamentals of TS)

 In object in TS, it can be written as, let User:{name: string , id: number}={name: "", id:10} User.name="Ram"; Like in JS, we can modify the object. But we need to specify an empty variable inside the object prior. we can modify as given above.  OR, let User:{name?:string , id: number}={id:10} User.name="Hari" In this approach, we specify the type of the variable *if* it exists and do not have to specify an empty variable. The first approach is preferable. ________________________________________________________________________________ If we want to make a variable read only, So we dont accidently modify it, We can say as, let User:{readonly name: string , id: number}={name: "", id:10} User.name="Ram";(CANNOT BE DONE) By using readonly to a variable in an object, we then cannot modify that variable later on.

#5 Functions (Fundamentals of TS)

 While writing a function in a TypeScript, give type for the function as well as the prop. Example: function User(age: number, id: number ):number {     if(age>20){           return id+2;}     else{          return id-2} User(2,5);

#4 Built in Types in TS (Fundamentals of TS)

 There are different Types in TS which includes of JS and extends to: number    string      boolean    null    undefined    object    any    unknown    never    enum    tuple Example: Let age : number= 18; here number is the type for age. ANY TYPE If we write just age; it becomes an any  type automatically because the type of the variable is not given. The type "any" is mainly avoided because due to this, the purpose of a typescript loses its value. While in arrays; Use; let num : number[]= [1,2,3,4]; TUPLES Type If we need to have an array with different types then tuples is used. It can be used as: Example: let user:[number, string]=[2,"hello"] It is usually used for  2 values of array. If the elements of an array exceeds the elements of type then there cause an error. Example: let user:[number, string]=[2,"hello",5] ENUMS Type If we need to add more than one co...

#3 Debugging in TS

 In typescript, *Debugging is used to check if the code is working properly by going through the each line of code* A breakpoint is a location in code where the execution is paused for debugging purposes. A breakpoint is placed in VS code by clicking on the red dot left side of the lines of code. We create a launch.json by clicking the debug option and new debug. We modify the launch,json by adding a preLaunchTask to "tsc : build - tsconfig.json". We go to the debug section and press F5 or click on launch icon. We do the stepOver or F10 ko run the next line of code until the code is executed. We can look for the real time results in variables or watch section by adding the variable to look for.

#2 First TypeScript program

 Created a file index.ts In terminal ; tsc.cmd index.ts to create a js file with the code in js of index.ts. (In typeScript the name of the variable and constant should be proper like age, num and cannot be like a, x.) In typeScript once the type of a variable is given, it cannot be modified in the next line. Example: let age:number=10; age="hello"; (this is incorrect). _____________________________________________________________________________________ We use tsc.cmd --init to create a TS config file. Emit means to convert all the TS files to JS files. When a TS file is saved, the TS compiler emits an JS file corresponding to the JS code. In config file, we modified some of the configurations. =>Set rootDir to "./src" (Changes the root directory) =>Set outDir to :./Dist" (Creates an output folder for all emitted files) =>Set removeComments to "true" (Removes all the comments when emitting an JS file) => Set noEmitOnError to true (Disable...

#1 Introduction to typeScript

 Typescript is a static typing where we need to declare the type of each constant and such. Setting Up the typeScript. Installed nodeJs then in terminal ; npm i -g typescript.