Apa gunanya \t dalam javascript?

Question

TypeScript memiliki hubungan yang tidak biasa dengan JavaScript. TypeScript menawarkan semua fitur JavaScript, dan lapisan tambahan di atasnya. Sistem tipe TypeScript

Table of Contents Show

Jenis berdasarkan Inferensi
Mendefinisikan Jenis
Jenis Penulisan
Serikat pekerja
Sistem Tipe Struktural
Apa itu \t dalam HTML?
Apa gunanya \n dalam JavaScript?
Bagaimana cara memberi ruang tab di JavaScript?
Bagaimana cara menggunakan karakter tab dalam JavaScript?

Misalnya, JavaScript menyediakan primitif bahasa seperti

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

6 dan

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

7, tetapi tidak memeriksa apakah Anda telah menetapkan ini secara konsisten. TypeScript melakukannya

Ini berarti bahwa kode JavaScript Anda yang berfungsi saat ini juga merupakan kode TypeScript. Manfaat utama TypeScript adalah dapat menyoroti perilaku tak terduga dalam kode Anda, menurunkan kemungkinan bug

Tutorial ini memberikan gambaran singkat tentang TypeScript, dengan fokus pada sistem tipenya

Jenis berdasarkan Inferensi

TypeScript mengetahui bahasa JavaScript dan akan menghasilkan tipe untuk Anda dalam banyak kasus. Misalnya dalam membuat variabel dan menugaskannya ke nilai tertentu, TypeScript akan menggunakan nilai tersebut sebagai tipenya

ts
let helloWorld = "Hello World";
        let helloWorld: string
Try

Dengan memahami cara kerja JavaScript, TypeScript dapat membangun sistem tipe yang menerima kode JavaScript tetapi memiliki tipe. Ini menawarkan sistem tipe tanpa perlu menambahkan karakter tambahan untuk membuat tipe eksplisit dalam kode Anda. Begitulah cara TypeScript mengetahui bahwa

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

8 adalah

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

6 dalam contoh di atas

Anda mungkin telah menulis JavaScript dalam Visual Studio Code, dan memiliki pelengkapan otomatis editor. Kode Visual Studio menggunakan TypeScript di bawah tenda untuk membuatnya lebih mudah bekerja dengan JavaScript

Mendefinisikan Jenis

Anda dapat menggunakan berbagai pola desain dalam JavaScript. Namun, beberapa pola desain mempersulit jenis untuk disimpulkan secara otomatis (misalnya, pola yang menggunakan pemrograman dinamis). Untuk mengatasi kasus ini, TypeScript mendukung ekstensi bahasa JavaScript, yang menawarkan tempat bagi Anda untuk memberi tahu TypeScript apa jenisnya.

Misalnya, untuk membuat objek dengan tipe kesimpulan yang mencakup

ts
interface User {
  name: string;
  id: number;
}
Try

0 dan

ts
interface User {
  name: string;
  id: number;
}
Try

1, Anda dapat menulis

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

Anda dapat secara eksplisit mendeskripsikan bentuk objek ini menggunakan deklarasi

ts
interface User {
  name: string;
  id: number;
}
Try

2

ts
interface User {
  name: string;
  id: number;
}
Try

Anda kemudian dapat mendeklarasikan bahwa objek JavaScript sesuai dengan bentuk

ts
interface User {
  name: string;
  id: number;
}
Try

2 baru Anda dengan menggunakan sintaks seperti

ts
interface User {
  name: string;
  id: number;
}
Try

4 setelah deklarasi variabel

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

Jika Anda memberikan objek yang tidak cocok dengan antarmuka yang Anda berikan, TypeScript akan memperingatkan Anda

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

Karena JavaScript mendukung kelas dan pemrograman berorientasi objek, TypeScript juga mendukung. Anda dapat menggunakan deklarasi antarmuka dengan kelas

ts
interface User {



  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

Anda dapat menggunakan antarmuka untuk menganotasi parameter dan mengembalikan nilai ke fungsi

ts
function getAdminUser(): User {
  //...
}
 
function deleteUser(user: User) {
  // ...
}
Try

Sudah ada sekumpulan kecil tipe primitif yang tersedia di JavaScript.

ts
interface User {
  name: string;
  id: number;
}
Try

5,

ts
interface User {
  name: string;
  id: number;
}
Try

6,

ts
interface User {
  name: string;
  id: number;
}
Try

7,

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

7,

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

6,

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

0, dan

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

1, yang dapat Anda gunakan di antarmuka. TypeScript memperluas daftar ini dengan beberapa lagi, seperti

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

2 (mengizinkan apa pun), (memastikan seseorang yang menggunakan tipe ini menyatakan apa tipenya), (tidak mungkin tipe ini bisa terjadi), dan

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

5 (fungsi yang mengembalikan

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

1 atau

Anda akan melihat bahwa ada dua sintaks untuk tipe bangunan. . Anda harus memilih

ts
interface User {
  name: string;
  id: number;
}
Try

2. Gunakan

ts
const user: User = {
  name: "Hayes",
  id: 0,
};
Try

_8 saat Anda membutuhkan fitur tertentu

Jenis Penulisan

Dengan TypeScript, Anda dapat membuat tipe kompleks dengan menggabungkan yang sederhana. Ada dua cara populer untuk melakukannya. dengan serikat pekerja, dan dengan obat generik

Serikat pekerja

Dengan serikat pekerja, Anda dapat mendeklarasikan bahwa suatu tipe bisa menjadi salah satu dari banyak tipe. Misalnya, Anda dapat mendeskripsikan tipe

ts



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

_5 sebagai

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

0 atau

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

1

ts
type MyBool = true | false;
Try

Catatan. Jika Anda mengarahkan kursor ke

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

2 di atas, Anda akan melihat bahwa itu digolongkan sebagai

ts
interface User {
  name: string;
  id: number;
}
Try

5. Itu adalah properti dari Sistem Tipe Struktural. Lebih lanjut tentang ini di bawah ini

Kasus penggunaan yang populer untuk jenis gabungan adalah untuk mendeskripsikan himpunan

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

6 atau

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

7 yang boleh menjadi nilai

ts
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
Try

Serikat pekerja juga menyediakan cara untuk menangani jenis yang berbeda. Misalnya, Anda mungkin memiliki fungsi yang menggunakan

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

6 atau

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

6

ts
function getLength(obj: string | string[]) {
  return obj.length;
}
Try

Untuk mempelajari jenis variabel, gunakan ________13______8

TypePredicatestring

ts
interface User {
  name: string;
  id: number;
}
 
const user: User = {
  username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'.
  Object literal may only specify known properties, and 'username' does not exist in type 'User'.  id: 0,
};Try

9number

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

0boolean

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

1undefined

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

2function

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

3array

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

4

Misalnya, Anda dapat membuat suatu fungsi mengembalikan nilai yang berbeda bergantung pada apakah fungsi tersebut meneruskan string atau larik

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

0

Generik

Generik menyediakan variabel untuk tipe. Contoh umum adalah array. Array tanpa obat generik dapat berisi apa saja. Array dengan generik dapat menggambarkan nilai-nilai yang berisi array

ts
const user = {
  name: "Hayes",
  id: 0,



};
Try

_1

Anda dapat mendeklarasikan tipe Anda sendiri yang menggunakan obat generik

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

_2

Sistem Tipe Struktural

Salah satu prinsip inti TypeScript adalah pemeriksaan tipe berfokus pada bentuk yang dimiliki nilai. Ini terkadang disebut "pengetikan bebek" atau "pengetikan struktural"

Dalam sistem tipe struktural, jika dua objek memiliki bentuk yang sama, mereka dianggap memiliki tipe yang sama

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

_3

Variabel

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

_5 tidak pernah dinyatakan sebagai tipe

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

6. Namun, TypeScript membandingkan bentuk

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

5 dengan bentuk

ts
interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("Murphy", 1);
Try

6 dalam pemeriksaan tipe. Mereka memiliki bentuk yang sama, sehingga kodenya lolos

Pencocokan bentuk hanya membutuhkan subset bidang objek untuk dicocokkan

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

_4

Tidak ada perbedaan antara bagaimana kelas dan objek menyesuaikan diri dengan bentuk

ts
const user = {
  name: "Hayes",
  id: 0,
};
Try

5

Jika objek atau kelas memiliki semua properti yang diperlukan, TypeScript akan mengatakan mereka cocok, terlepas dari detail implementasinya

Apa itu \t dalam HTML?

Hal ini setara dengan karakter tab seperti itu. Jadi, dari sudut pandang HTML, tidak perlu "melarikan diri" menggunakan referensi karakter; . g. jika program pengeditan Anda tidak memungkinkan Anda memasukkan karakter dengan nyaman.

Apa gunanya \n dalam JavaScript?

Karakter baris baru adalah \n dalam JavaScript dan banyak bahasa lainnya. Yang perlu Anda lakukan hanyalah menambahkan \n karakter setiap kali Anda memerlukan jeda baris untuk menambahkan baris baru ke string .