TS examples

Author: YousefMohsen

TSexamples/Main.ts

@@ -0,0 +1,30 @@
+//TS exmples. Visit localhost:3000/playground to see the slogs
+const main = (log:any):void=>{
+
+type level = 'shitty' | 'superPlayer' | 'god'; 
+
+interface Player{
+   name:string,
+   shirtnumber: number
+   age: number,
+   level: level
+}
+type PlayerPreveiw = Pick<Player, "name" | "level">; //define a new type with name and level properties
+
+
+
+const toString =(player: Partial<Player>)=>{
+return player.name +' - '+player.shirtnumber;
+} 
+const printPartialPlayer = (p: Partial<Player>) =>{
+   log(p.name+', age: '+p.age)
+}
+
+const player1:Partial<Player> = {name:'Messi', level:'god', shirtnumber:10}; //Partial utility types if only parts of the object are required
+const prevPlayer: PlayerPreveiw = {name:"Xavi",level:'god'};
+printPartialPlayer({name: 'Test', age:1});
+log(toString(player1));
+
+
+}
+export {main}

pages/playground.tsx

@@ -0,0 +1,28 @@
+import type { NextPage } from "next";
+import { useEffect, useState } from "react";
+import styles from "../styles/Home.module.css";
+import { main } from "../TSexamples/Main";
+
+const Playground: NextPage = () => {
+  const [logs, setLogs] = useState<string[]>([]);
+
+
+  let logItem: Function; //Function type
+  logItem = (item: any): void => {
+    const newAr: string[] = [...logs, JSON.stringify(item)];
+    setLogs(newAr);
+  };
+  useEffect(()=>{
+    main(logItem);
+  },[0])
+
+  return (
+    <div className={styles.container}>
+      <h1>Det nye-nye-bibliotek.dk - WorkPage </h1>
+      <button onClick={()=>setLogs([])}>Clear</button>
+      {logs.map(l=><p>{l}</p>)}
+    </div>
+  );
+};
+
+export default Playground;