Menu
CoddyTech
START LEARNING

Array Generik

Termasuk bagian Pengantar TypeScript dalam perjalanan JavaScript di Coddy. Pelajaran 60 dari 73.

array dan generic bekerja sama dengan sangat baik di TypeScript. Saat kamu mempelajari array bertipe sebelumnya, kamu menggunakan sintaks T[] untuk menentukan bahwa sebuah array hanya dapat berisi elemen dengan tipe tertentu. Generic memberimu cara lain untuk menyatakan konsep yang sama.

TypeScript menyediakan sintaks alternatif untuk array bertipe dengan format Array<T>:

// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

Sintaks Array<T> sangat berguna saat kamu bekerja dengan fungsi generik yang beroperasi pada array. Sintaks ini membuat sifat generik kodemu lebih eksplisit dan mudah dibaca, terutama saat kamu membuat fungsi yang dapat bekerja dengan array bertipe apa pun sekaligus mempertahankan keamanan tipe.

challenge icon

Tantangan

Mudah

Buat fungsi generik bernama getFirstElement yang menerima array dengan tipe apa pun dan mengembalikan elemen pertama atau undefined jika array kosong.

Fungsi ini harus:

  • Menggunakan parameter tipe generik T
  • Menerima satu parameter bernama arr dengan tipe Array<T>
  • Mengembalikan elemen pertama dengan tipe T atau undefined
  • Memiliki anotasi tipe pengembalian eksplisit berupa T | undefined

Buat array berikut menggunakan sintaks Array<T>:

  • stringArray dengan tipe Array<string> yang berisi ["apple", "banana", "cherry"]
  • numberArray dengan tipe Array<number> yang berisi [10, 20, 30, 40]
  • booleanArray dengan tipe Array<boolean> yang berisi [true, false, true]
  • emptyStringArray dengan tipe Array<string> yang kosong

Uji fungsi kamu dan cetak output berikut:

  • Cetak hasil pemanggilan getFirstElement dengan stringArray
  • Cetak hasil pemanggilan getFirstElement dengan numberArray
  • Cetak hasil pemanggilan getFirstElement dengan booleanArray
  • Cetak hasil pemanggilan getFirstElement dengan emptyStringArray
  • Cetak hasil pemanggilan getFirstElement dengan Array<string> baru yang berisi ["single"]

Coba sendiri

// TODO: Tulis kodemu di sini
// Buat fungsi generik getFirstElement

// Buat array yang diperlukan menggunakan sintaks Array<T>

// Uji fungsi tersebut dan cetak hasilnya
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengantar TypeScript

1Memulai dengan TypeScript

Apa itu TypeScript?Mengapa menggunakan TypeScript?Kode TypeScript pertamamuProses kompilasi dan errorRekap: Pengantar TS

4Bekerja dengan Fungsi

Menentukan Tipe Parameter dan Nilai KembaliMenentukan Tipe Fungsi PanahTipe Nilai Kembali 'void'Parameter Opsional dengan '?'Nilai Default ParameterMenentukan Tipe Rest ParameterMendefinisikan Tipe FungsiRingkasan: Membangun Fungsi Bertipe

7Proyek: Daftar Tugas Sederhana

Proyek: Mendefinisikan Struct TugasFungsi untuk Menambahkan TugasPelajaran proyekFungsi untuk Mengubah Status TugasPelajaran proyekFungsi: Mendaftar Tugas Berdasarkan StatusPelajaran proyekFungsi: Mencetak Ringkasan TugasPelajaran proyekSatukan SemuanyaPelajaran proyek

10Proyek: Manajemen Inventaris

Proyek: Item Inventaris GenerikFungsi: Tambahkan Item ke InventarisPelajaran proyekFungsi untuk Menemukan Item berdasarkan IDPelajaran proyekBuat Tipe Inventaris KhususPelajaran proyekFungsi untuk Mendapatkan Detail ItemPelajaran proyek

2Tipe Inti

Tipe Dasar: str, num, booleanTipe 'any': Jalan KeluarTipe 'unknown'Bekerja dengan null & undefinedInferensi Tipe dalam PraktikAnotasi Tipe EksplisitRangkuman: Latihan Tipe Inti

5Tipe: Alias, Union & Inter

Alias Tipe untuk Tipe PrimitifTipe Union ('|')Bekerja dengan Tipe UnionTipe LiteralTipe Intersection ('&')Menggabungkan Alias TipeRekap: Kombinasi Tipe Lanjutan

8Enum

Apa Itu Enum Numerik?Menggunakan Enum NumerikApa Itu Enum String?Menggunakan Enum StringEnum HeterogenUlasan: Menggunakan Enum

11Topik Lanjutan

Penegasan TipePenjaga Tipe: in & instanceofTipe 'never'Tipe Nullable ('strictNull')Tanda Tangan Indeks untuk objectUlasan: Menyempurnakan Tipe

3Struktur Data: array dan tuple

Array BertipeModifier 'readonly' untuk arrayApa Itu tuple?Mendeklarasikan dan Mengakses tupleDestructuring tupletuple ReadonlyArray Bertipe MultidimensiOperator Spread dengan arrayRangkuman: array dan tuple

6Menentukan Tipe Object dan Interface

Anotasi Tipe Object secara InlineAlias Tipe untuk ObjectPengantar InterfaceInterface vs. Alias TipeProperti Opsional dan ReadonlyMemperluas Interface dan TipeMenambahkan Method ke InterfaceRingkasan: Menentukan Bentuk Object

9Generics: Sekilas Pandang

Masalah yang Diatasi GenericsMembuat Fungsi Identitas GenerikMenggunakan Fungsi GenerikArray GenerikInterface GenerikUlasan: Latihan Fungsi Generik

Latihan sendiri: Playground TypeScript