Perbincangan ringkas tentang 7 kaedah yang patut diketahui dalam TypeScript

Artikel ini akan berkongsi dengan anda 7 kaedah dalam TypeScript yang anda perlu tahu, saya harap ia akan membantu anda!

Sistem jenis dalam TypeScript sangat berkuasa. Ia memberikan kami keselamatan jenis. Walaupun sistem jenis digemari, mereka juga boleh membuat kod kami berselerak dan tidak boleh dibaca jika kami tidak merancang dan mereka bentuk jenis dan antara muka.

Generik

Mengelakkan pertindihan kod dan mencipta jenis boleh guna semula ialah bahagian penting dalam menulis kod ringkas. Generik ialah ciri TypeScript yang membolehkan kami menulis jenis boleh guna semula. Lihat contoh berikut:

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
}

Masukkan jenis yang betul ke dalam generik Add, yang boleh digunakan untuk menerangkan penambahan dua nombor atau penyatuan dua rentetan. Daripada menulis jenis untuk setiap fungsi, kita hanya perlu melakukannya sekali dengan generik. Ini bukan sahaja menjimatkan usaha kami, tetapi ia juga menjadikan kod kami lebih bersih dan kurang terdedah kepada ralat.

Jenis Utiliti

TypeScript secara asalnya menyediakan beberapa jenis utiliti yang berguna untuk membantu kami melakukan beberapa penukaran jenis biasa. Jenis utiliti ini tersedia secara global dan semuanya menggunakan generik.

7 berikut adalah yang sering saya gunakan.

1 Pick4e2a32c6388cf5960c2e01475a1f2df9

Pick akan memilih set atribut Kekunci daripada Jenis untuk mencipta jenis baharu Kekunci boleh menjadi rentetan literal atau aksara Kesatuan daripada literal rentetan. Nilai Keys mestilah kunci Type , jika tidak, pengkompil TypeScript akan mengadu. Jenis utiliti ini amat berguna apabila anda ingin mencipta objek yang lebih ringan dengan memilih sifat tertentu daripada objek yang mempunyai banyak sifat.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

2. Omit4e2a32c6388cf5960c2e01475a1f2df9

Omit ialah bertentangan dengan Pick. Keys tidak bermaksud atribut yang perlu disimpan, tetapi set kunci atribut yang perlu ditinggalkan. Ini lebih berguna apabila kita hanya mahu mengalih keluar sifat tertentu daripada objek dan menyimpan yang lain.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

3 Partial30690cee1a11d5dfbdced93b89f678ee

Partial Membina jenis dengan semua atribut jenisnya ditetapkan kepada pilihan. Ini boleh menjadi sangat berguna apabila kita menulis logik kemas kini untuk objek.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

// type PartialUser = {
//   name?: string;
//   age?: number;
//   address?: string;
//   occupation?: string;
// }

4. Required30690cee1a11d5dfbdced93b89f678ee

Required ialah bertentangan dengan Partial. Ia membina jenis di mana semua sifat diperlukan. Ia boleh digunakan untuk memastikan tiada sifat pilihan hadir dalam sesuatu jenis.

type PartialUser = {
  name: string
  age: number
  address?: string
  occupation?: string
}

type User = Required<PartialUser>

// type User = {
//   name: string;
//   age: number;
//   address: string;
//   occupation: string;
// }

5. Readonly30690cee1a11d5dfbdced93b89f678ee

Readonly Membina jenis dengan semua sifat jenis ditetapkan kepada baca sahaja. Menetapkan semula nilai TS baharu akan mengakibatkan ralat.

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type ReadOnlyUser = Readonly<User>

const user: ReadOnlyUser = {
  name: "小智",
  age: 24,
  address: "厦门",
  occupation: "大迁世界"
}

user.name = "王大冶"
// Cannot assign to &#39;name&#39; because it is a read-only property.

6. ReturnType30690cee1a11d5dfbdced93b89f678ee

ReturnType Bina jenis daripada jenis pemulangan jenis fungsi. Ia amat berguna apabila kita berurusan dengan jenis fungsi daripada perpustakaan luaran dan ingin membina jenis tersuai berdasarkannya.

import axios from 'axios'

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

Selain perkara di atas, terdapat jenis utiliti lain yang boleh membantu kami menulis kod yang lebih bersih. Pautan ke dokumentasi TypeScript pada jenis utiliti boleh didapati di sini.

https://www.typescriptlang.org/docs/handbook/utility-types.html

Jenis utiliti ialah ciri yang sangat berguna yang disediakan oleh TypeScript. Pembangun harus memanfaatkannya untuk mengelakkan jenis pengekodan keras. Nampak lebih baik daripada rakan sekerja anda? Inilah yang anda perlu tahu!

Artikel ini dicetak semula di: https://segmentfault.com/a/1190000040574488

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan ! !

Atas ialah kandungan terperinci Perbincangan ringkas tentang 7 kaedah yang patut diketahui dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!