基礎(chǔ)知識
創(chuàng)建類型
class Abc { }
類的初始化
const abc = new Abc();
類型和值
類既可以作為類型使用，也可以作為值使用。
const a:Bag = new Bag()
JSDoc 注釋
JSDoc 是 JavaScript 的一種注釋規(guī)范，它使用特定的注釋格式來自動生成 API 文檔。JSDoc 通過注釋來提取信息，例如函數(shù)名、參數(shù)類型和返回類型等，然后使用這些信息生成人類可讀的文檔。
示例：文章來源：http://www.zghlxwxcb.cn/news/detail-739265.html
/**
* 這是一個函數(shù)注釋
* @param {string} 參數(shù)名 - 參數(shù)描述
* @returns {number} 返回值描述
*/
function myFunction(參數(shù)名) {
// 函數(shù)實現(xiàn)
return 0;
}
在這個例子中，/** 開始一個多行注釋，然后在注釋中使用 @param 和 @returns 來描述函數(shù)的參數(shù)和返回值。JSDoc 還支持其他注釋標簽，例如 @description、@type 和 @example 等。
字段
class User extends Account implements Updatable, Serializable {
id: string; //普通字段
displayName?: boolean; //可選字段
name!: string; //非可選字段
#attributes: Map<any， any>; //私有字段
roles = ["user"]; //有默認值的字段
readonly createdAt = new Date() // 帶有默認值的只讀字段
}
私有字段
class Foo {
private myAny = 1;
}
class Bar {
#myAny = 1;
}
私有成員只能在它們所屬的類內(nèi)部訪問，類的外部無法直接訪問這些私有成員。
示例：
class MyClass {
#myPrivateVariable: string;
public myPublicMethod() {
console.log(this.#myPrivateVariable); // 正確，可以在類內(nèi)部訪問私有成員
}
}
const obj = new MyClass();
console.log(obj.#myPrivateVariable); // 錯誤，私有成員無法從外部訪問
區(qū)別
private在編譯后JavaScript中沒有影響，僅對TypeScript編譯器有影響，而使用#符號聲明的私有屬性在JavaScript中會被編譯為常規(guī)的私有屬性。
可選和非可選字段
感嘆號（!）用于標記屬性或方法為非可選（non-optional）。這意味著該屬性或方法在類實例化時必須提供值，否則將導(dǎo)致編譯錯誤。
class Person {
constructor(public name: string, public age: number!) {
}
}
const person = new Person("Alice", 25); // 正確，age 屬性必須提供值
const personOptional = new Person("Bob"); // 錯誤，age 屬性未提供值
問號（?）用于標記屬性或方法為可選（optional）。這意味著該屬性或方法在類實例化時可以省略，不會導(dǎo)致編譯錯誤。
class Person {
constructor(public name: string, public age?: number) {
}
}
const person = new Person("Alice"); // 正確，age 屬性未提供值
const personOptional = new Person("Bob", 25); // 正確，age 屬性提供了值
字段類型約束
[key: string]: number; 是一種對象類型的寫法，表示對象的鍵是字符串類型，值是數(shù)字類型。
示例：
const person: { [key: string]: number } = {
age: 25,
height: 170,
weight: 65
};
Getter/Setter
Getter 是一個獲取屬性的方法，Setter 是一個設(shè)置屬性的方法?？梢允褂?get 和 set 關(guān)鍵字來定義它們。
Getter/Setter可以在不改變屬性的訪問權(quán)限的情況下，對屬性的值進行更精細的控制。比如可以在讀取或設(shè)置屬性的值時添加額外的邏輯。
class Person {
private _name: string;
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
}
let person = new Person();
person.name = "John"; // 使用 setter 設(shè)置值
console.log(person.name); // 使用 getter 獲取值，輸出 "John"
靜態(tài)成員
靜態(tài)方法中this指向類本身，而不是類的實例對象。
class StaticClass {
n?:number=4;
//靜態(tài)字段
static s:number
//靜態(tài)方法
static staticMethod() {
this.s=5
console.log('This is a static method');
}
}
StaticClass.staticMethod(); // 調(diào)用靜態(tài)方法
var staticClass=new StaticClass();
console.log(staticClass.n) //類成員不受影響 ，輸出4
console.log(staticClass.s) //undefined
console.log(StaticClass.n) //undefined
console.log(StaticClass.s) //靜態(tài)類成員不受影響 ，輸出5
函數(shù)重載
在 TypeScript 中，可以使用函數(shù)重載（Function Overloading）來定義多個同名函數(shù)，它們具有不同的參數(shù)類型或參數(shù)數(shù)量。這可以幫助提高代碼的可讀性和可用性。
要實現(xiàn)函數(shù)重載，需要遵循以下規(guī)則：
- 重載的函數(shù)必須同名。
- 重載的函數(shù)參數(shù)類型或數(shù)量必須不同。
- 重載的函數(shù)可以有一個或多個重載。
- 函數(shù)重載不能改變函數(shù)的返回類型。
示例：
update: (retryTimes: number) => void;
update(retryTimes: number): void;
構(gòu)造函數(shù)
構(gòu)造函數(shù)是用于創(chuàng)建和初始化對象實例時候被調(diào)用的特殊方法，用于初始化對象的屬性并為其分配內(nèi)存空間。
示例：
class Person {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet() {
console.log(`名字 ${this.name} 年齡 ${this.age}`);
}
}
var person = new Person("John", 30);
person.greet(); // 輸出 "名字 John 年齡 30"
參數(shù)屬性
可以使用參數(shù)屬性（Parameter Properties）來在類中定義與函數(shù)參數(shù)相關(guān)的屬性。參數(shù)屬性提供了一種簡潔的方式來聲明與函數(shù)參數(shù)相關(guān)的屬性，而不需要顯式地使用 this 關(guān)鍵字。
示例：
class Person {
constructor(public name: string, public age: number) {}
}
var person = new Person("John", 30);
console.log(person.name); // 輸出 "John"
console.log(person.age); // 輸出 30
類的實例化
(): JSONResponse // 可以通過 () 調(diào)用這個對象 -（JS中的函數(shù)是可以調(diào)用的對象）
new(s: string): JSONResponse; // 可以在此類對象上使用 new
示例：實例化泛型對象
class Person {
age= 25;
height= 170;
weight= 65;
constructor() {
}
}
class PersonService<TService> {
Service?: TService;
Init(service?: { new(): TService }) {
if (service != null) {
this.Service = new service();
}
}
}
var p = new PersonService<Person>();
p.Init(Person);
console.log(p.Service?.age); // 25
console.log(p.Service?.height); // 170
console.log(p.Service?.weight); // 65
箭頭函數(shù)
在箭頭函數(shù)中，this不指向調(diào)用該函數(shù)的對象，而是指向定義該箭頭函數(shù)時的上下文。
盡管箭頭函數(shù)是在對象的方法中定義的，但是它不會捕獲到調(diào)用該方法的對象作為自己的this上下文。
示例：
let obj = {
value: "I am an object",
printValue: () => { console.log(this.value); }
}
obj.printValue(); // 輸出："I am an object"
this的作用域
全局
在全局作用域或單獨的函數(shù)作用域中，this引用的是全局對象。
console.log(this); // 在全局作用域中輸出：window對象
function testFunc() {
console.log(this); // 在函數(shù)作用域中輸出：window對象
}
testFunc();
類和對象方法
當(dāng)函數(shù)作為對象的方法被調(diào)用時，this指的是obj對象。
let obj = {
name: 'Example Object',
printName: function() {
console.log(this.name);
}
}
obj.printName(); // 輸出："Example Object"
當(dāng)調(diào)用類中的函數(shù)時，this指的是類的實例對象。
class MyClass {
myMethod() {
console.log(this); // 輸出：MyClass的實例對象
}
}
const obj = new MyClass();
obj.myMethod();
泛型
泛型是一種允許你在定義類、接口、函數(shù)和方法時使用類型參數(shù)的功能。泛型允許你編寫靈活的代碼，同時保持類型安全。通過使用泛型，你可以在強類型環(huán)境中編寫可重用的代碼，而無需擔(dān)心具體的類型實現(xiàn)細節(jié)。
泛型類
class Box<Type>{
contents?: Type
constructor(value: Type) {
this.contents = value;
}}
var stringBox = new Box("a package");
console.log(stringBox.contents) // a package
泛型接口
interface Generator<T> {
generate(): T;
}
class RandomNumberGenerator implements Generator<number> {
generate() {
return Math.random();
}
}
let generator = new RandomNumberGenerator();
let randomNumber = generator.generate(); // 類型為 number
泛型函數(shù)
function identity<T>(arg: T): T {
return arg;
}
let x = identity<number>(123); // 類型為 number
let y = identity<string>("hello"); // 類型為 string
裝飾器
裝飾器是使用 @ 符號來標識的特殊類型的函數(shù)，可以用來擴展類或方法的行為。實現(xiàn)類似面向切面編程的特性。
可以在類、類方法、訪問器、屬性和方法參數(shù)上使用裝飾器
示例：
function log(target: any, obj:any) {
console.log(target)
console.log(`Creating instance of ${target.name}`);
}
@log
class MyClass {
myMethod() {
console.log("Hello, World!");
}
}
const instance = new MyClass();
TypeScript示例可在https://www.typescriptlang.org/play中調(diào)試文章來源地址http://www.zghlxwxcb.cn/news/detail-739265.html
到了這里，關(guān)于[學(xué)習(xí)筆記]TypeScript查缺補漏（一）：類的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
