모든 개발자가 알아야 할 최고의 고급 타이프스크립트 개념

TypeScript는 추가된 유형 안전성으로 인해 JavaScript보다 종종 선호되는 현대 프로그래밍 언어입니다. 이 기사에서는 TypeScript 프로그래밍 기술을 연마하는 데 도움이 되는 상위 10가지 TypeScript 개념을 공유하겠습니다. 준비되셨나요?가세요.

1.Generics : 제네릭을 사용하면 재사용 가능한 유형을 만들 수 있으며 이는 현재의 데이터는 물론 미래의 데이터를 처리하는 데 도움이 될 것입니다.
제네릭의 예:
인수를 일부 유형으로 취하는 Typescript의 함수를 원할 수도 있고 동일한 유형을 반환하기를 원할 수도 있습니다.

function func<t>(args:T):T{
    return args;
}
</t>

2.유형 제약 조건이 있는 제네릭 : 이제 문자열과 정수만 허용하도록 정의하여 T 유형을 제한해 보겠습니다.

function func<t extends string number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'
</t>

3.일반 인터페이스:
인터페이스 제네릭은 다양한 유형과 함께 작동하는 개체, 클래스 또는 함수에 대한 계약(모양)을 정의하려는 경우 유용합니다. 이를 통해 구조를 일관되게 유지하면서 다양한 데이터 유형에 적응할 수 있는 청사진을 정의할 수 있습니다.

// Generic interface with type parameters T and U
interface Repository<t u> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<user number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

</user></t>

4.일반 클래스:: 클래스의 모든 속성이 일반 매개변수로 지정된 유형을 따르도록 하려면 이 옵션을 사용하세요. 이를 통해 클래스의 모든 속성이 클래스에 전달된 유형과 일치하도록 보장하면서 유연성을 확보할 수 있습니다.

interface User {
    id: number;
    name: string;
    age: number;
}

class UserDetails<t extends user> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 
</t>

5.유형 매개변수를 전달된 유형으로 제한: 때때로 매개변수 유형이 전달된 다른 매개변수에 종속되기를 원할 때가 있습니다. 혼란스러울 것 같지만 아래 예를 살펴보겠습니다.

function getProperty<type>(obj: Type, key: keyof Type) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

</type>

6.조건부 유형 : 종종 우리는 유형이 한 유형이거나 다른 유형이기를 원합니다. 이런 상황에서는 조건부 유형을 사용합니다.
간단한 예는 다음과 같습니다.

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

조금 복잡한 예:

type HasProperty<t k extends keyof t> = K extends "age" ? "Has Age" : "Has Name";

interface User {
  name: string;
  age: number;
}

let test1: HasProperty<user>;  // "Has Age"
let test2: HasProperty<user>; // "Has Name"
let test3: HasProperty<user>; // Error: Type '"email"' is not assignable to parameter of type '"age" | "name"'.

</user></user></user></t>

6.교차 유형: 이러한 유형은 여러 유형을 하나로 결합하여 특정 유형이 다양한 다른 유형의 속성과 동작을 상속할 수 있도록 할 때 유용합니다.
이에 대한 흥미로운 예를 살펴보겠습니다.

// Defining the types for each area of well-being

interface MentalWellness {
  mindfulnessPractice: boolean;
  stressLevel: number; // Scale of 1 to 10
}

interface PhysicalWellness {
  exerciseFrequency: string; // e.g., "daily", "weekly"
  sleepDuration: number; // in hours
}

interface Productivity {
  tasksCompleted: number;
  focusLevel: number; // Scale of 1 to 10
}

// Combining all three areas into a single type using intersection types
type HealthyBody = MentalWellness & PhysicalWellness & Productivity;

// Example of a person with a balanced healthy body
const person: HealthyBody = {
  mindfulnessPractice: true,
  stressLevel: 4,
  exerciseFrequency: "daily",
  sleepDuration: 7,
  tasksCompleted: 15,
  focusLevel: 8
};

// Displaying the information
console.log(person);

7.infer 키워드: infer 키워드는 특정 유형을 조건부로 판단할 때 유용하며, 조건이 충족되면 해당 유형에서 하위 유형을 추출할 수 있습니다.
일반적인 구문은 다음과 같습니다.

type ConditionalType<t> = T extends SomeType ? InferredType : OtherType;
</t>

예:

type ReturnTypeOfPromise<t> = T extends Promise<infer u> ? U : number;

type Result = ReturnTypeOfPromise<promise>>;  // Result is 'string'
type ErrorResult = ReturnTypeOfPromise<number>;      // ErrorResult is 'never'

const result: Result = "Hello";
console.log(typeof result); // Output: 'string'
</number></promise></infer></t>

8.유형 분산 : 이 개념은 하위 유형과 상위 유형이 어떻게 서로 관련되어 있는지를 나타냅니다.
두 가지 유형이 있습니다:
공분산: 상위 유형이 필요한 경우 하위 유형을 사용할 수 있습니다.
이에 대한 예를 살펴보겠습니다.

function func<t>(args:T):T{
    return args;
}
</t>

위의 예에서 Car는 Vehicle 클래스에서 속성을 상속받았으므로 하위 유형이 상위 유형이 갖는 모든 속성을 가지므로 상위 유형이 예상되는 하위 유형에 이를 할당하는 것이 절대적으로 유효합니다.
반공변성: 이는 공분산의 반대입니다. 하위 유형이 있을 것으로 예상되는 곳에 상위 유형을 사용합니다.

function func<t extends string number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'
</t>

반공변성을 사용할 때는 하위 유형에 특정한 속성이나 메서드에 액세스하지 않도록 주의해야 합니다. 이로 인해 오류가 발생할 수 있습니다.

9. 반영: 이 개념에는 런타임에 변수 유형을 결정하는 것이 포함됩니다. TypeScript는 주로 컴파일 시 유형 검사에 중점을 두지만 여전히 TypeScript 연산자를 활용하여 런타임 중에 유형을 검사할 수 있습니다.
typeof 연산자: typeof 연산자를 사용하여 런타임에 변수 유형을 찾을 수 있습니다

// Generic interface with type parameters T and U
interface Repository<t u> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<user number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

</user></t>

instanceof 연산자: instanceof 연산자를 사용하면 객체가 클래스의 인스턴스인지 특정 유형인지 확인할 수 있습니다.

interface User {
    id: number;
    name: string;
    age: number;
}

class UserDetails<t extends user> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 
</t>

타사 라이브러리를 사용하여 런타임 시 유형을 결정할 수 있습니다.

10.종속성 주입: 종속성 주입은 실제로 코드를 생성하거나 관리하지 않고도 구성 요소에 코드를 가져올 수 있는 패턴입니다. 라이브러리를 사용하는 것처럼 보일 수 있지만 CDN이나 API를 통해 라이브러리를 설치하거나 가져올 필요가 없기 때문에 다릅니다.

얼핏 보면 코드 재사용이 가능하다는 점에서 재사용성을 위한 함수를 사용하는 것과 비슷해 보일 수도 있습니다. 그러나 구성 요소에서 직접 기능을 사용하면 구성 요소 간의 긴밀한 결합이 발생할 수 있습니다. 즉, 기능이나 논리의 변경은 해당 기능이 사용되는 모든 위치에 영향을 미칠 수 있습니다.

종속성 주입은 이를 사용하는 구성 요소에서 종속성 생성을 분리하여 코드를 더 유지 관리하고 테스트하기 쉽게 만들어 이 문제를 해결합니다.

의존성 주입이 없는 예

function getProperty<type>(obj: Type, key: keyof Type) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

</type>

의존성 주입 예시

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

밀접하게 결합된 시나리오에서 오늘 MentalWellness 클래스에 스트레스 수준 속성이 있고 내일 다른 것으로 변경하기로 결정한 경우 해당 속성이 사용된 모든 위치를 업데이트해야 합니다. 이로 인해 많은 리팩토링 및 유지 관리 문제가 발생할 수 있습니다.

그러나 종속성 주입과 인터페이스를 사용하면 이 문제를 피할 수 있습니다. 생성자를 통해 종속성(예: MentalWellness 서비스)을 전달함으로써 특정 구현 세부 정보(예: 스트레스 레벨 특성)가 인터페이스 뒤에서 추상화됩니다. 즉, 인터페이스가 동일하게 유지되는 한 특성이나 클래스를 변경할 때 종속 클래스를 수정할 필요가 없습니다. 이 접근 방식을 사용하면 구성 요소를 긴밀하게 결합하지 않고 런타임에 필요한 것을 주입하므로 코드가 느슨하게 결합되고 유지 관리가 용이하며 테스트하기가 더 쉽습니다.

위 내용은 모든 개발자가 알아야 할 최고의 고급 타이프스크립트 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!