【手を動かしながら学ぶTypeScript】 Chapter02 基本的なシンタックス

study/typescript/02_grammer/interface.js

@@ -0,0 +1,5 @@
+var dog = {
+    name: 'Don',
+    age: 3
+};
+console.log(dog.name); // Don

study/typescript/02_grammer/interface.ts

@@ -0,0 +1,11 @@
+interface  Animal {
+  name: string,
+  age: number
+}
+
+const dog: Animal = {
+  name: 'Don',
+  age: 3
+};
+
+console.log(dog.name) // Don

study/typescript/02_grammer/sum.js

@@ -0,0 +1,4 @@
+function sum(a, b) {
+    return a + b;
+}
+sum(2, 4); // 5

study/typescript/02_grammer/sum.ts

@@ -0,0 +1,5 @@
+function sum(a: number, b: number): number {
+    return a + b;
+}
+
+sum(2, 4); // 5

study/typescript/README.md

@@ -0,0 +1,217 @@
+## 手を動かしながら学ぶTypeScript
+
+手を動かしながら学ぶことは、プログラミングの習得において非常に重要です。以下は、TypeScriptを学ぶための具体的なステップです。
+
+### サンプルコード
+
+```typescript
+function greet(name: string): string {
+    return `Hello, ${name}!`;
+}
+const userName: string = "Alice";
+console.log(greet(userName));
+```
+
+tscコマンドを使用してTypeScriptファイルをコンパイルし、JavaScriptに変換します。
+
+```bash
+tsc greet.ts
+```
+
+ `--target` オプションを使用して、出力するJavaScriptのバージョンを指定できます。
+
+```bash
+tsc greet.ts --target ES6
+```
+
+### TypeScriptでの基本的な型
+
+TypeScriptでは、以下の基本的な型が用意されています。
+
+- `number`: 数値型
+- `string`: 文字列型
+- `boolean`: 真偽値型
+- `any`: 任意の型
+- `void`: 戻り値がない関数の型
+- `null`: null値
+- `undefined`: 未定義の値
+etc...
+
+型をあてる方法
+
+```typescript
+let num: number = 42;
+let str: string = "Hello, TypeScript!";
+```
+
+基本的には `let` や `const` を使用して変数を宣言し、その次に変数名を書き、コロン `:` の後に型を指定します。
+この `:number` の部分が型アノテーションと呼ばれます。
+
+
+#### nullとundefined
+TypeScriptでは、`null` と `undefined` は特別な型として扱われます。
+
+```typescript
+let nullableValue: null = null;
+let undefinedValue: undefined = undefined;
+```
+
+このように、`null` と `undefined` を明示的に型として指定することができます。
+大きな違いとしては
+
+- `null` は「値が存在しない」ことを示すために使用されます。
+  - 意図して値が存在しないことを示すために使用されます。
+- `undefined` は「値が未定義」であることを示すために使用されます。
+  - 意図して値が設定されていないことを示すために使用されます。
+
+またこれら基本的に型と組み合わせる事でunion型を作成することができます。
+
+```typescript
+let value: string | null = null; // string型またはnull型
+let anotherValue: number | undefined = undefined; // number型またはundefined型
+``` 
+
+#### strictNullChecksについて
+
+TypeScriptのコンパイラオプションの一つに `strictNullChecks` があります。
+このオプションを有効にすると、`null` と `undefined` が型システムにおいてより厳密に扱われます。
+これにより、`null` や `undefined` が許可されていない型に対しては、明示的に型アノテーションを指定する必要があります。
+
+例えば strictNullChecksが有効な場合、以下のようなコードはエラーになります。
+
+```typescript
+let value: string = null; // エラー: 'null' は 'string' 型に割り当てられません
+```
+一方、strictNullChecksが無効な場合は、`null` や `undefined` が暗黙的に許可されます。
+
+```typescript
+let value: string = null; // 問題なし
+```
+
+つまりは、`tsconfig.json` ファイルで `strictNullChecks` をfalseにしてしまうと、`null` や `undefined` が許可されてしまい、型安全性が低下します。
+
+#### 関数型
+
+TypeScriptでは、関数の型も定義できます。関数の引数や戻り値の型を指定することで、より安全なコードを書くことができます。
+
+```typescript
+// 関数の型としては nameをstring型で受取う、戻り値をstring型とする
+const sayHello: (name: string) => string = (name: string) => {
+    return `Hello, ${name}!`;
+};
+
+/* これを省略なしでかくと
+```typescript
+const sayHello = (name: string): string => {
+    return `Hello, ${name}!`;
+};
+*/
+
+console.log(sayHello("TypeScript"));  // Hello, TypeScript!
+```　
+
+### オブジェクト型
+
+TypeScriptでは、オブジェクトの型も定義できます。オブジェクトのプロパティやメソッドの型を指定することで、より明確なコードを書くことができます。
+
+```typescript
+// オブジェクトの型を定義
+interface User {
+    name: string;
+    age: number;
+    greet(): string;
+}
+// オブジェクトを作成
+const user: User = {
+    name: "Alice",
+    age: 30,
+    greet() {
+        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
+    }
+};
+console.log(user.greet());  // Hello, my name is Alice and I am 30 years old.
+```
+
+オブジェクト型では`オプショナルプロパティ`も定義できます。オプショナルプロパティは、オブジェクトに存在しない可能性があるプロパティです。
+
+```typescript
+
+interface User {
+    name: string;
+    age?: number; // オプショナルプロパティ
+}
+const user: User = {
+    name: "Bob"
+    // ageは省略可能
+};
+```
+
+#### readonlyプロパティ
+
+TypeScriptでは、オブジェクトのプロパティを`readonly`として定義することができます。これにより、そのプロパティは読み取り専用となり、変更できなくなります。
+
+```typescript
+interface User {
+    readonly id: number; // 読み取り専用プロパティ
+    name: string;
+}
+const user: User = {
+    id: 1,
+    name: "Charlie"
+};
+// user.id = 2; // エラー: 'id' は読み取り専用プロパティです
+console.log(user.id); // 1
+```
+
+#### any型
+
+`any`型は、TypeScriptで最も柔軟な型であり、どんな値でも受け入れることができます。ただし、`any`型を多用すると、型安全性が失われるため、注意が必要です。
+
+```typescript
+let value: any = "Hello, TypeScript!";
+value = 42; // 数値も許可される
+value = { message: "This is an object" }; // オブジェクトも許可される
+console.log(value);
+```
+
+any型は、特に外部ライブラリやAPIとの連携時に便利ですが、可能な限り具体的な型を使用することが推奨されます。
+なぜなら、`any`型を使用すると、TypeScriptの型チェックの利点が失われ、ランタイムエラーのリスクが高まるからです。
+
+#### interface
+
+`interface`は、TypeScriptでオブジェクトの構造を定義するための方法です。`interface`を使用すると、オブジェクトのプロパティやメソッドの型を明確に指定できます。
+
+```typescript
+interface  Animal {
+  name: string,
+  age: number
+}
+
+const dog: Animal = {
+  name: 'Don',
+  age: 3
+};
+
+console.log(dog.name) // Don
+
+```
+### 型推論という概念の紹介
+
+TypeScriptは、変数や関数の型を自動的に推論する機能を持っています。これにより、明示的に型を指定しなくても、TypeScriptが適切な型を推測してくれます。
+
+```typescript
+let message = "Hello, TypeScript!";
+let count = 42;
+function greet(name: string) {
+    return `Hello, ${name}!`;
+}
+```
+
+この例では、`message`は自動的に`string`型として推論され、`count`は`number`型として推論されます。また、`greet`関数の引数`name`も`string`型として推論されます。
+これは
+
+
+### 参考
+
+- [TypeScript公式ドキュメント](https://www.typescriptlang.org/docs/)
+- [手を動かしながら学ぶTypeScript](https://www.c-r.com/book/detail/1429)