Cara menggunakan detik di javascript

Standar dari Visual Studio 2017 dan Visual Studio 2015 Update 3 sudah termasuk TypeScript. Jika Anda belum menginstal TypeScript dengan Visual Studio, Anda masih dapat mengunduhnya di sini

Untuk pengguna npm

shell
> npm install -g typescript

Bangun file TypeScript pertama Anda

Di editor Anda, ketikkan kode JavaScript berikut di file greeter.ts

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Kompilasi kode Anda

Kami menggunakan ekstensi

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Di baris perintah, jalankan kompiler TypeScript

shell
tsc greeter.ts

Hasilnya adalah bundel

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Sekarang kita bisa melangkah lebih jauh tentang alat yang ditawarkan oleh TypeScript. Tambahkan jenis anotasi

ts
function greeter(person) {



  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

ts
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Jenis Anotasi

Ketik anotasi di TypeScript adalah cara mudah untuk mengetahui bagaimana fungsi atau variabel dimaksudkan. Dalam hal ini, maksud kami adalah fungsi penyapa dipanggil dengan parameter string tunggal. Kami dapat mencoba mengubah panggilan fungsi penyapa untuk mengirim array sebagai gantinya

ts
function greeter(person: string) {
  return "Hello, " + person;
}
 
let user = [0, 1, 2];
 
document.body.textContent = greeter(user);
Argument of type 'number[]' is not assignable to parameter of type 'string'.2345Argument of type 'number[]' is not assignable to parameter of type 'string'.Try

Kompilasi lagi, dan Anda akan melihat kesalahan berikut

shell
error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

Demikian pula, coba hapus semua argumen saat memanggil fungsi penyapa. TypeScript akan memberi tahu Anda bahwa Anda telah memanggil fungsi ini dengan jumlah parameter yang tidak terduga. Dalam kedua kasus tersebut, TypeScript dapat menawarkan analisis statis berdasarkan struktur kode Anda, dan jenis anotasi yang Anda berikan

Perhatikan bahwa ketika terjadi kesalahan, file

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Antarmuka

Mari kembangkan sampel kita lebih jauh. Di sini kita menggunakan antarmuka yang mendeskripsikan objek yang memiliki field firstName dan lastName. Di TypeScript, dua jenis anotasi kompatibel jika struktur internalnya juga kompatibel. Ini memungkinkan kita untuk mengimplementasikan antarmuka hanya dengan memiliki bentuk antarmuka yang diperlukan, tanpa klausa

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

ts
interface Person {
  firstName: string;
  lastName: string;
}
 
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = { firstName: "Jane", lastName: "User" };
 
document.body.textContent = greeter(user);
Try

Kelas

Terakhir, mari tambahkan penggunaan kelas ke contoh yang sedang kita kerjakan. TypeScript mendukung fitur baru dalam JavaScript, seperti dukungan untuk kelas berdasarkan pemrograman objek

Di sini kita mulai dengan membuat kelas

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";



 
document.body.textContent = greeter(user);
Try

Juga perlu dicatat, penggunaan

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

ts
class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}
 
interface Person {
  firstName: string;
  lastName: string;
}
 
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = new Student("Jane", "M.", "User");
 
document.body.textContent = greeter(user);
Try

Jalankan perintah

ts
function greeter(person) {



  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Jalankan aplikasi web TypeScript Anda

Sekarang ketikkan kode berikut di

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

html
<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

Buka

ts
function greeter(person) {
  return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.textContent = greeter(user);
Try

Opsional. Buka greeter.ts di Visual Studio, atau salin kode ke taman bermain TypeScript. Anda dapat mengarahkan kursor ke pengidentifikasi untuk melihat jenisnya. Perhatikan bahwa dalam beberapa kasus, jenis ini secara otomatis disimpulkan untuk Anda. Ketik ulang baris terakhir, dan lihat daftar solusi dan bantuan parameter berdasarkan jenis elemen DOM. Tempatkan kursor Anda pada referensi ke fungsi penyapa, dan tekan F12 untuk memasukkan definisinya. Perhatikan juga bahwa Anda dapat mengklik kanan pada simbol dan menggunakan pemfaktoran ulang untuk mengganti namanya

Jenis informasi yang disediakan bekerja sama dengan alat untuk memfasilitasi pekerjaan dengan aplikasi JavaScript. Untuk informasi lebih lanjut tentang apa yang dapat kami lakukan dengan TypeScript, Anda dapat melihat beberapa contoh di situs ini