Section9

section9/src/App.tsx

@@ -1,24 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import { Practice1 } from "./practices/Practice1";
+import { Practice2 } from "./practices/Practice2";
+import { Practice3 } from "./practices/Practice3";
+import { Practice4 } from "./practices/Practice4";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Practice1 />
+      <Practice2 />
+      <Practice3 />
+      <Practice4 />
     </div>
   );
 }

section9/src/practices/Practice1.tsx

@@ -0,0 +1,15 @@
+export const Practice1 = () => {
+  const calcTotalFree = (num: number) => {
+    const total = num * 1.1;
+    console.log(total);
+  };
+
+  const onClickPractice = () => calcTotalFree(1000);
+
+  return (
+    <div>
+      <p>練習問題:引数の型指定</p>
+      <button onClick={onClickPractice}>練習問題1を実行</button>
+    </div>
+  );
+};

section9/src/practices/Practice2.tsx

@@ -0,0 +1,14 @@
+export const Practice2 = () => {
+  const getTotalFree = (num: number): number => {
+    return num * 1.1;
+  };
+
+  const onClickPractice = () => console.log(getTotalFree(1000));
+
+  return (
+    <div>
+      <p>練習問題:返却値の型指定</p>
+      <button onClick={onClickPractice}>練習問題2を実行</button>
+    </div>
+  );
+};

section9/src/practices/Practice3.tsx

@@ -0,0 +1,18 @@
+export const Practice3 = () => {
+  const getTotalFree = (num: number): number => {
+    return num * 1.1;
+  };
+
+  const onClickPractice = () => {
+    let total: number = 0;
+    total = getTotalFree(1000);
+    alert(total);
+  };
+
+  return (
+    <div>
+      <p>練習問題:変数の型指定</p>
+      <button onClick={onClickPractice}>練習問題3を実行</button>
+    </div>
+  );
+};

section9/src/practices/Practice4.tsx

@@ -0,0 +1,15 @@
+export const Practice4 = () => {
+  const calcTotalFree = (num: number) => {
+    const total = num * 1.1;
+    console.log(total);
+  };
+
+  const onClickPractice = () => calcTotalFree(1000);
+
+  return (
+    <div>
+      <p>練習問題:設定ファイルを触ってみる</p>
+      <button onClick={onClickPractice}>練習問題4を実行</button>
+    </div>
+  );
+};

section9/src/typeList.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+// TypeScriptの基本の型
+
+// boolean
+let bool: boolean = true;
+
+// number 数値
+let num: number = 0;
+
+// string 文字
+let str: string = "A";
+
+// Array 配列
+let arr1: Array<Number> = [0, 1, 2];
+let arr2: number[] = [0, 1, 2];
+
+// tuple
+let tuple: [number, string] = [0, "A"];
+
+// any
+let any1: any = false;
+
+// void
+const funcA = (): void => {
+  const test = "TEST";
+};
+
+// null
+let null1: null = null;
+
+// undefined
+let undefined1: undefined = undefined;
+
+// object
+let obj1: Object = {};
+let obj2: { id: number; name: string } = { id: 0, name: "AAAA" };

section9/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,11 +12,9 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
+    // "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }