皆さん、こんにちは。私は最近 TypeScript の旅を始め、Programming Hero の上級 Web 開発コースを進めています。 TypeScript の基本的な知識はありましたが、詳しくは調べていませんでした。私のコースは、TypeScript を深く掘り下げることから始まりました。 1週間が経ち、私の学習は大きく進歩しました。ここでは、私が理解した主要な概念の簡略化した概要を示します。
TypeScript は、言語にオプションの静的型付けを追加する JavaScript のスーパーセットです。これは、変数、関数パラメータ、戻り値の型を宣言できることを意味し、開発プロセスの早い段階で潜在的なエラーを検出するのに役立ちます。
TypeScript を使用する利点
プリミティブ データ型は単一の値を表し、メモリに直接保存されます。 typescript
で使用されるプリミティブ データ型の一部を次に示します。let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
この例でわかるように、変数に型を割り当てるには、変数名を定義してから型を定義した後にコロン ( : ) 記号を使用する必要があります。
非プリミティブ データ型は参照型とも呼ばれ、複雑なデータ構造を表し、メモリ位置への参照として保存されます。 TypeScript は、次の非プリミティブ データ型をサポートしています:
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
TypeScript の型エイリアスは、既存の型に新しい名前を付ける方法です。これにより、特に複雑な型を扱う場合に、コードがより読みやすく、保守しやすくなります。
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
この例では、 person は、名前と年齢のプロパティを持つオブジェクトを表す型エイリアスです。
TypeScript の和集合型と交差型
共用体型は、複数の型のいずれかの値を表します。 | を使用して定義されます。演算子。
交差タイプは、複数のタイプを 1 つのタイプに結合します。 & 演算子を使用して定義されます。
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
never 型は、決して発生しない値を表します。
不明な型は任意の値を表します。型が不明な値を使用する前に型チェックまたはアサーションを実行する必要があるため、any 型よりも安全です。
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
型アサーションは、型について実際よりも詳しいことを TypeScript コンパイラーに伝える方法です。変数の型を明示的に指定する方法です
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
型ガードを使用すると、特定の条件に基づいて変数の型を絞り込むことができます。変数のプロパティやメソッドにアクセスする前に変数の型をチェックすることで、潜在的な実行時エラーを回避できます。
// Defining a type alias for a person object
type Person = {
name: string;
age: number;
};
// Using the type alias
const person1: Person = {
name: "Alice",
age: 30
};
TypeScript のインターフェイスは、特定のプロパティを持つオブジェクトを作成するための設計図です。
type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
name: string;
age: number;
};
type Address = {
street: string;
city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
name: "Alice",
age: 30,
street: "123 Main St",
city: "Anytown"
};
この例では、person インターフェイスは、person オブジェクトが firstName、lastName、および age プロパティを持つ必要があることを定義します。 person1 オブジェクトを作成する場合
ジェネリックは、さまざまなデータ型を処理できる再利用可能なコンポーネントを作成できる TypeScript の強力な機能です。
function error(message: string): never {
throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
let strLength: number = value.length;
}
この例では、T は型パラメータです。これは、任意の型のプレースホルダーを表します。アイデンティティ関数を呼び出すときは、任意の型の引数を渡すことができ、関数は同じ型を返します。
TypeScript では、ジェネリック制約を使用して、ジェネリック関数に引数として渡したり、ジェネリック クラスやインターフェイスの型パラメータとして使用したりできる型に制限を適用できます。
let value: unknown = "hello"; let strLength: number = (value as string).length;
ここでは、extends キーワードを使用してデータを制約しています
TypeScript の keyof 演算子は、オブジェクト型のすべてのプロパティ名の共用体型を取得するために使用されます。これは、ジェネリック型とマップされた型を操作する場合に特に便利です。
//typeof
function printValue(value: unknown) {
if (typeof value === "string") {
console.log(value.toUpperCase());
} else if (typeof value === "number") {
console.log(value.toFixed(2));
}
}
//instanceof
function printDate(date: unknown) {
if (date instanceof Date) {
console.log(date.toISOString());
}
}
Pick
interface Person {
firstName: string;
lastName: string;
age: number;
}
const person1: Person = {
firstName: "Alice",
lastName: "Johnson",
age: 30
};
Omit
function identity<T>(arg: T): T {
return arg;
}
identity<string>(string);
部分
interface Person {
name: string;
age: number;
}
function identity<T extends Person>(arg: T): T {
return arg;
}
const result = identity<Person>({
name: "aa";
age: 12;
});
他の人はこう言っています
必須
読み取り専用
レコード
TypeScript では、クラスは class キーワードを使用して定義されます。
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"
public クラスメンバーのデフォルトの可視性は public です。公開メンバーにはどこからでもアクセスできます
保護されたメンバーは、宣言されているクラスのサブクラスにのみ表示されます。
private メンバーはクラス内でのみアクセスできます。
TypeScript の静的メンバーは、クラスの個々のインスタンスではなく、クラス自体に属するメンバー (プロパティとメソッド) です。
let name : string = "Kishor"; let age : number = 27; let isDeveloper: boolen = true; let x : null = null; let y: undefined = undefined;
TypeScript では、インターフェイスは実装するクラスのコントラクトを定義します。インターフェイスを実装するクラスには、インターフェイス内で宣言されたすべてのプロパティとメソッドが必要です。 implements キーワードが使用されています
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
return `hello ${name}`
}
これらは、今週私が学んだ Typescript の基本的な使用例の一部です。たくさんの素晴らしいことを学びましたが、まだ発見すべきことがたくさんあります。 TypeScript は常に進化しているため、私は最新のリリースと機能を常に把握し、TypeScript の公式ドキュメントとブログに従って最新のニュースとベスト プラクティスを得るように努めています。
私の旅についてきてくれてありがとう。
以上がタイプスクリプトを学ぶ旅。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
