Learn Utility Type

AdrianMiftahulH · AdrianMiftahulH · commit b898dfebe9b9 · 2023-02-22T11:04:19.000+07:00
diff --git a/Lesson07/src/main.ts b/Lesson07/src/main.ts
@@ -140,4 +140,4 @@ store.state = "Adrian"
 
 const myState = new StateObject<(string | number | boolean)[]>([15])
 myState.state = (['Adrian', 19, true])
-console.log(myState.state);
+console.log(myState.state);
diff --git a/Lesson08/build/index.html b/Lesson08/build/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Copyright</title>
+    <style>
+        body{
+            background: #000;
+            margin: 0;
+            min-height: 100vh;
+            display: grid;
+            place-content: center;
+            font-size: 3rem;
+            color: #fff;
+        }
+    </style>
+    <script src="js/main.js" defer></script>
+</head>
+<body>
+    <p>Copyright &copy;<span id="year"></span></p>
+</body>
+</html>
diff --git a/Lesson08/build/js/main.js b/Lesson08/build/js/main.js
@@ -0,0 +1,92 @@
+"use strict";
+// Learn Utility Types
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const updateAssignment = (assign, propsToUpdate) => {
+    return Object.assign(Object.assign({}, assign), propsToUpdate);
+};
+const assign1 = {
+    studentId: "smkcmi2",
+    title: "Final Project",
+    grade: 0
+};
+console.log(updateAssignment(assign1, {
+    grade: 95
+}));
+const assignGraded = updateAssignment(assign1, {
+    grade: 95
+});
+// Required  and Readonly
+const recordAssignment = (assign) => {
+    // send to database, etx
+    return assign;
+};
+const assignVerified = Object.assign(Object.assign({}, assignGraded), { verified: true });
+recordAssignment(Object.assign(Object.assign({}, assignGraded), { verified: true }));
+// Record
+const hexColorMap = {
+    red: "FF0000",
+    green: "00FF00",
+    blue: "0000FF"
+};
+const finalGrades = {
+    Adriana: "A",
+    Della: "B"
+};
+const gradesData = {
+    Adriana: {
+        assign1: 90,
+        assign2: 95
+    },
+    Della: {
+        assign1: 93,
+        assign2: 91
+    },
+};
+const score = {
+    studentId: "smkcmi201",
+    grade: 89
+};
+const preview = {
+    studentId: "smkcmi201",
+    title: "Final Project",
+};
+// ReturnType
+// type newAssign = {
+//     title: string,
+//     points: number
+// }
+const createNewAssign = (title, points) => {
+    return {
+        title,
+        points
+    };
+};
+const tsAssign = createNewAssign("Utility Types", 100);
+console.log(tsAssign);
+const assignArgs = [
+    "Generics",
+    100
+];
+const tsAssign2 = createNewAssign(...assignArgs);
+console.log(tsAssign2);
+const fetchUsers = () => __awaiter(void 0, void 0, void 0, function* () {
+    const data = yield fetch('https://jsonplaceholder.typicode.com/users').then(res => {
+        return res.json();
+    }).catch(err => {
+        if (err instanceof Error) {
+            console.log(err.message);
+        }
+    });
+    return data;
+});
+fetchUsers().then(users => {
+    console.log(users);
+});
diff --git a/Lesson08/src/main.ts b/Lesson08/src/main.ts
@@ -0,0 +1,168 @@
+// Learn Utility Types
+
+// Partial
+
+interface Assignment {
+    studentId: string,
+    title: string,
+    grade: number,
+    verified?: boolean
+}
+
+const updateAssignment = ( assign: Assignment, propsToUpdate:Partial<Assignment>): Assignment => {
+    return {
+        ...assign,
+        ...propsToUpdate
+    }
+}
+
+const assign1: Assignment = {
+    studentId: "smkcmi2",
+    title: "Final Project",
+    grade: 0
+}
+console.log(updateAssignment(assign1, {
+    grade: 95
+}));
+
+const assignGraded: Assignment = updateAssignment(assign1, {
+    grade: 95
+})
+
+
+// Required  and Readonly
+
+const recordAssignment = (assign: Required<Assignment>): Assignment => {
+    // send to database, etx
+    return assign
+}
+
+const assignVerified: Readonly<Assignment> = {
+    ...assignGraded, 
+    verified: true
+}
+
+recordAssignment({
+    ...assignGraded,
+    verified: true
+})
+
+// Record
+const hexColorMap: Record<string, string> = {
+    red: "FF0000",
+    green: "00FF00",
+    blue: "0000FF"
+}
+
+type Students = "Adriana" | "Della"
+type LetterGrades = "A" | "B" | "C" | "D" | "U"
+
+const finalGrades: Record<Students, LetterGrades> = {
+    Adriana: "A",
+    Della: "B"
+}
+
+interface Grades {
+    assign1: number,
+    assign2: number
+}
+
+const gradesData: Record<Students, Grades> = {
+    Adriana: {
+        assign1: 90,
+        assign2: 95
+    },
+    Della: {
+        assign1: 93,
+        assign2: 91
+    },
+}
+
+// Pick and Omit
+
+type AssignResult = Pick<Assignment, "studentId" | "grade">
+
+const score: AssignResult = {
+    studentId: "smkcmi201",
+    grade: 89
+}
+
+type AssignPreview = Omit<Assignment, "grade" | "verified">
+
+const preview: AssignPreview = {
+    studentId: "smkcmi201",
+    title: "Final Project",
+}
+// Exlude and Extract
+
+type adjustedGrade = Exclude<LetterGrades, "U">
+
+type highGrade = Extract<LetterGrades, "A" | "B">
+
+// Nonnullable
+
+type AllPossibleGrades = "Faiza" | "Saskia" | null | undefined
+
+type NameOnly = NonNullable<AllPossibleGrades>
+
+// ReturnType
+
+// type newAssign = {
+//     title: string,
+//     points: number
+// }
+
+const createNewAssign = (
+    title: string,
+    points: number
+) => {
+    return {
+        title,
+        points
+    }
+}
+
+type NewAssign = ReturnType<typeof createNewAssign>
+
+const tsAssign: NewAssign = createNewAssign("Utility Types", 100)
+console.log(tsAssign);
+
+// Parameters
+
+type AssignParams = Parameters<typeof createNewAssign>
+
+const assignArgs: AssignParams = [
+    "Generics",
+    100
+]
+
+const tsAssign2: NewAssign = createNewAssign(...assignArgs)
+console.log(tsAssign2);
+
+// Awaited - helped us with the ReturnType of a Promite
+
+interface User {
+    id: number,
+    name: string,
+    username: string,
+    email: string
+}
+
+const fetchUsers = async (): Promise<User[]> => {
+    const data = await fetch(
+        'https://jsonplaceholder.typicode.com/users'
+    ).then(res => {
+        return res.json()
+    }).catch(err => {
+        if (err instanceof Error) {
+            console.log(err.message);
+        }
+    })
+    return data
+}
+
+type FetchUsersReturnType = Awaited<ReturnType<typeof fetchUsers>>
+
+fetchUsers().then(users => {
+    console.log(users);
+})
diff --git a/Lesson08/tsconfig.json b/Lesson08/tsconfig.json
