Funkcje w TypeScript

Ten artykuł wyjaśnia funkcje w TypeScript.

YouTube Video

Funkcje w TypeScript

Funkcje w TypeScript to funkcje JavaScript z dodanymi adnotacjami typów. W TypeScript można pisać bardziej solidny kod, jasno definiując typy danych wejściowych (parametrów) i danych wyjściowych (wartości zwracanych) dla funkcji. Poniżej przedstawiamy podstawowe metody definiowania funkcji oraz niektóre cechy funkcji w TypeScript.

Podstawowe Definiowanie Funkcji

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• Funkcja add przyjmuje dwa argumenty typu number i zwraca wartość typu number.
• Przyjmuje dwa argumenty: x i y, oba typu number, z jawnie określonymi typami.
• Typ zwracanej wartości jest również określony jako : number.

Funkcje Anonimowe (Wyrażenia Funkcyjne)

Funkcje anonimowe i wyrażenia funkcyjne również mogą być używane w TypeScript. Typy można adnotować w ten sam sposób.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Możesz przypisać funkcję anonimową do zmiennej i wywołać ją później.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Możesz użyć nazwanej funkcji wyrażenia, aby umożliwić wywołania rekurencyjne.

Funkcje Strzałkowe

Adnotacje typów mogą być stosowane również w funkcjach strzałkowych.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Ten kod definiuje funkcję strzałkową subtract z adnotacjami typów, która przyjmuje dwa argumenty typu liczbowego i zwraca ich różnicę.

Opcjonalne i Domyślne Parametry

Parametry mogą być opcjonalne lub mieć przypisane wartości domyślne.

Opcjonalne Parametry

Dodanie ? po nazwie parametru czyni go opcjonalnym.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Ten kod akceptuje opcjonalny argument; jeśli argument zostanie podany, wita po imieniu, w przeciwnym razie zwraca ogólne powitanie.

Parametry Domyślne

Można także ustawić wartości domyślne dla parametrów.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Ta funkcja używa wartości domyślnej "Guest", jeśli nie zostanie przekazany żaden argument, i wita, używając podanej lub domyślnej nazwy.

Definiowanie Typu Funkcji

Możliwe jest również zdefiniowanie typu samej funkcji. Na przykład jest to stosowane podczas przekazywania funkcji jako argumentu.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Ten kod definiuje typ funkcji Operation, która przyjmuje dwa argumenty liczbowe i zwraca liczbę, a następnie używa go do tworzenia i uruchamiania funkcji dodawania i mnożenia.

Gdy Nie Ma Zwracanej Wartości (typ void)

Dla funkcji bez wartości zwracanej określ typ void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Ten kod definiuje funkcję void o nazwie logMessage, która przyjmuje komunikat tekstowy i wypisuje go na konsoli, nie zwracając żadnej wartości.

Funkcja zwrotna (Callback)

Przekazanie funkcji jako argumentu do innej funkcji i jej późniejsze wykonanie nazywa się funkcją zwrotną (callback). Jest to często używane w przetwarzaniu asynchronicznym i obsłudze zdarzeń.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

W tym przykładzie funkcja, która wyświetla wartość w konsoli, jest przekazywana jako funkcja zwrotna.

Alternatywnie można zdefiniować typ funkcji zwrotnej za pomocą type lub interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Definiowanie typu funkcji zwrotnej za pomocą type lub interface zwiększa możliwość ponownego wykorzystania.

Przeciążanie funkcji

Przeciążanie funkcji pozwala definiować funkcje o tej samej nazwie, ale z różnymi listami parametrów. W TypeScript możesz definiować wiele funkcji o tej samej nazwie i wykonywać różne operacje w zależności od typów i liczby parametrów.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

W TypeScript przeciążanie realizowane jest w następujący sposób:.

• Sygnatura przeciążenia

  • Określa, jak funkcja może być używana (jej sygnatura). Pisząc to wielokrotnie, przeciążanie staje się możliwe.

• Sygnatura implementacji

  • Implementuje rzeczywiste ciało funkcji. Ta część jest definiowana tylko raz i obsługuje wszystkie przypadki zadeklarowane w sygnaturach przeciążeń.

Zasady przeciążania

Następujące zasady dotyczą przeciążania funkcji:.

• Kolejność definicji sygnatur przeciążeń

  • Ponieważ ocena odbywa się od góry do dołu, zaleca się najpierw definiowanie bardziej specyficznych typów, a następnie bardziej ogólnych.

• Zgodność sygnatury implementacji

  • Sygnatura implementacji musi być zgodna z argumentami i wartościami zwracanymi wszystkich sygnatur przeciążenia.

• Określ szczegóły w sygnaturach przeciążenia

  • Sygnatura implementacji bywa niejednoznaczna, dlatego szczegóły powinny być określone w sygnaturach przeciążenia.
  • Jeśli zdefiniowana jest tylko sygnatura implementacji, wnioskowanie typów dla funkcji będzie niewystarczające.

Podsumowanie

Funkcje w TypeScript mają następujące cechy.

• Adnotacje Typów
  • Określając typy argumentów i wartości zwracanych, możesz pisać bezpieczniejszy kod.
• Funkcje anonimowe i funkcje strzałkowe
  • Można ich używać tak jak w JavaScript, a dodanie adnotacji typów poprawia bezpieczeństwo typów.
• Parametry opcjonalne i domyślne
  • Możesz uczynić specyfikację argumentów bardziej elastyczną w razie potrzeby.
• Definicje typów funkcji
  • Zdefiniuj typ samej funkcji, aby przeprowadzić sprawdzanie typów.
• Przeciążanie funkcji
  • Możesz obsługiwać różne argumenty za pomocą tej samej nazwy funkcji.

Wykorzystując te elementy, możesz pisać czytelniejszy i bardziej solidny kod w TypeScript.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video