Typescript Handbook(2): Interfaces

typescript-handbook/src/interfaces/excess-property-checks.ts

@@ -0,0 +1,25 @@
+/**
+ * Excess Property Checks
+ */
+interface SquareConfig {
+  color?: string;
+  width?: number;
+  // [propName:string]: any;
+}
+
+function createSquare(config: SquareConfig): { color: string; area: number } {
+
+  // ...
+}
+
+// error
+let mySquare = createSquare({ colour: 'red', width:100 });
+
+// 回避方法1
+let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
+
+// 回避方法2 は、 SquareConfig に [propName:string]: any を追加する
+
+// 回避方法3
+let squreOptions = { colour: 'red', width:100 };
+let mySquare = createSquare(squreOptions);

typescript-handbook/src/interfaces/optional-properties.ts

@@ -0,0 +1,22 @@
+/**
+ * Optional Properties
+ */
+
+interface SquareConfig {
+  color?: string;
+  width?: number;
+}
+
+function createSquqre(config: SquareConfig): {color: string; area: number} {
+  let newSquare = {color: 'white', area: 100};
+  if (config.color) {
+    newSquare.color = config.color;
+  }
+
+  if (config.width) {
+    newSquare.area = config.width * config.width;
+  }
+  return newSquare;
+}
+
+let mySquare = createSquqre({color: 'black'});

typescript-handbook/src/interfaces/our-first-interface.ts

@@ -0,0 +1,26 @@
+/**
+ * Our First Interface
+ */
+
+/* interface を使わない例 */
+function printLabel(labelledObj: { label: string }) {
+  console.log(labelledObj.label);
+}
+
+// `label` があるかどうかだけをチェックするので、
+// 他のプロパティが含まれていてもエラーにならない
+let myObj = { size: 10, label: 'Size 10 Object' };
+printLabel(myObj);
+
+/* interface を使った例 */
+interface LabelledValue {
+  label: string;
+}
+
+function printLabel2(labelledObj: LabelledValue) {
+  console.log(labelledObj.label);
+}
+
+// interface に定義されているプロパティがあるかだけをチェックする
+let myObj2 = { size: 10, label: 'Size 10 Object' };
+printLabel2(myObj2);

typescript-handbook/src/interfaces/readonly-properties.ts

@@ -0,0 +1,20 @@
+/**
+ * Readonly properties
+ */
+interface Point {
+  readonly x: number;
+  readonly y: number;
+}
+
+let p1: Point = { x: 10, y: 20 };
+p1.x = 5; // error!
+
+let a: number[] = [1, 2, 3, 4];
+let ro: ReadonlyArray<number> = a;
+ro[0] = 12; // error!
+ro.push(5); // error!
+ro.length = 100; // error!
+a = ro; // error!
+
+// readonly vs const
+// variables には const, properties には readonly を使う