變數宣告及型別定義

怎麼寫？

原本在 JS 的時候宣告變數會是長這樣

const num = 1; 
const str = "mike";
const arr = [1, 2, 3];
const arr10 = [
  { id: 1, name: "mike" },
  { id: 2, name: "jane" },
];

寫 TS 的話，在宣告時加上資料的型別，資料長什麼樣就怎麼寫型別

const num: number = 1;
const str: string = "mike";
const arr: number[] = [1, 2, 3];
const arr10: {id: number; name: string}[] = [
  { id: 1, name: "mike" },
  { id: 2, name: "jane" },
];

提示

• number, string, boolean 都是小寫
• Array 是大寫，可以寫成 Array<number> 或 number[]
• object 只要寫 {} 就好，並且物件的每一個屬性也都需要定義
• 同時包含不同型別的話，就使用 |
• 如果 object 有可選屬性 name?:string

練習為以下變數添加型別

Result

const num: number = 1;
const str: string = "mike";
const bool: boolean = true;
const arr1: Array<number> = [1, 2, 3];
const arr2: number[] = [1, 2, 3];
const arr3: Array<string> = ["a", "b", "c"];
const arr4: string[] = ["a", "b", "c"];
const arr5: Array<boolean> = [true, false, true];
const arr6: boolean[] = [true, false, true];
const arr7: Array<number | string> = [1, "a"];
const arr8: Array<Array<number>> = [
  [1, 2],
  [3, 4],
];
const arr9: number[][] = [
  [1, 2],
  [3, 4],
];
const arr10: Array<Array<number | string>> = [
  [1, "a"],
  [2, "b"],
];
const arr11: Array<{ id: number; name: string }> = [
  { id: 1, name: "mike" },
  { id: 2, name: "jane" },
];
const arr12: Array<{ id: number; name?: string }> = [{ id: 1, name: "mike" }, { id: 2 }];

const arr13: { id: number; name: string | null | undefined }[] = [
  { id: 1, name: "mike" },
  { id: 2, name: null },
  { id: 3, name: undefined },
];

const obj1: { id: number; name: string } = { id: 1, name: "mike" };
const obj2: { id: number } = { id: 1 };
const obj3: { id: number; name: string | undefined } = { id: 1, name: undefined };
const obj4: { id: number; name: string | null | undefined } = { id: 1, name: null };
const obj5: { id: number; name?: string | null | undefined } = { id: 1 };

其他 Tip

TS 如果沒有排版的話，記得到 .vscode -> settings.json -> 添加 TypeScript