TypeScript didasarkan pada sintaks dan semantik yang sama yang akrab bagi jutaan pengembang JavaScript. TypeScript memungkinkan untuk bekerja dengan fitur JS terbaru dan masih muncul, termasuk yang tersedia di ECMAScript 2015, dan yang saat ini hanya ada dalam bentuk kalimat. Di antara fitur-fitur ini, misalnya, fungsi dan dekorator asinkron. Semua ini bertujuan membantu pengembang untuk membuat aplikasi yang andal dan modern.
Program TypeScript dikompilasi menjadi kode JavaScript biasa yang dapat dijalankan di browser apa pun atau di Node.js. Kode ini akan dipahami oleh mesin JS apa pun yang mendukung ECMAScript 3 atau standar yang lebih baru.
Materi, terjemahan yang kami terbitkan hari ini, berisi diskusi dua puluh pertanyaan yang mungkin menanyakan seseorang yang akan lulus wawancara, mengklaim posisi programmer TypeScript.
Pertanyaan No. 1 (1). Apa itu TypeScript dan mengapa menggunakannya daripada JavaScript?
Dalam tanda kurung, setelah nomor pertanyaan, kompleksitasnya ditunjukkan, dievaluasi pada skala lima poin.
TypeScript (TS) adalah superset dari JavaScript (JS), di antara fitur-fitur utama di antaranya adalah kemungkinan penugasan tipe statis eksplisit, dukungan untuk kelas dan antarmuka. Salah satu keuntungan utama TS over JS adalah kemampuan untuk membuat, dalam berbagai IDE, lingkungan pengembangan yang memungkinkan, tepat dalam proses memasukkan kode, untuk mengidentifikasi kesalahan umum. Penggunaan TypeScript dalam proyek besar dapat meningkatkan keandalan program, yang, pada saat yang sama, dapat digunakan di lingkungan yang sama di mana aplikasi JS biasa bekerja.
Berikut ini beberapa detail tentang TypeScript:
- TypeScript mendukung edisi modern standar ECMAScript, kode yang ditulis menggunakan yang dikompilasi dengan mempertimbangkan kemungkinan pelaksanaannya pada platform yang mendukung versi standar yang lebih lama. Ini berarti bahwa pemrogram TS dapat menggunakan kemampuan ES2015 dan standar yang lebih baru, seperti modul, fungsi panah, kelas, operator penyebaran, perusakan, dan melakukan apa yang dia lakukan di lingkungan yang ada yang belum mendukung standar ini.
- TypeScript adalah add-on untuk JavaScript. Kode yang ditulis dalam JavaScript murni adalah kode TypeScript yang valid.
- TypeScript memperluas JavaScript dengan kemampuan untuk menetapkan jenis secara statis. Sistem tipe TS cukup luas. Yaitu, itu termasuk antarmuka, enumerasi, tipe hybrid, tipe generik, tipe union dan tipe persimpangan, pengubah akses, dan banyak lagi. Menggunakan TypeScript juga membuat segalanya sedikit lebih mudah dengan menggunakan inferensi tipe.
- Penggunaan TypeScript, dibandingkan dengan JavaScript, secara signifikan meningkatkan proses pengembangan. Faktanya adalah bahwa IDE, secara real time, menerima informasi jenis dari kompiler TS.
- Saat menggunakan mode
null ketat (flag compiler --strictNullChecks digunakan untuk ini), kompiler TypeScript tidak mengizinkan penetapan null dan undefined variabel tipe-tipe di mana, dalam mode ini, penggunaan nilai-nilai ini tidak diperbolehkan. - Untuk menggunakan TypeScript, Anda perlu mengatur proses pembuatan proyek, yang mencakup tahap mengkompilasi kode TS dalam JavaScript. Kompiler dapat menyematkan peta sumber dalam file JS yang dihasilkannya, atau membuat file .map terpisah. Ini memungkinkan Anda untuk mengatur breakpoint dan memeriksa nilai-nilai variabel selama eksekusi program, bekerja secara langsung dengan kode TypeScript.
- TypeScript adalah proyek Microsoft sumber terbuka yang dirilis di bawah lisensi Apache 2. Inisiator pengembangan TypeScript adalah Anders Halesberg. Dia terlibat dalam pembuatan Turbo Pascal, Delphi dan C #.
→
SumberPertanyaan No. 2 (1). Beri tahu kami tentang jenis umum dalam TypeScript.
Jenis umum (generik) memungkinkan Anda untuk membuat komponen atau fungsi yang dapat bekerja dengan jenis yang berbeda, dan tidak dengan yang mana pun. Pertimbangkan sebuah contoh:
class Queue<t> { private data = []; push = (item: T) => this.data.push(item); pop = (): T => this.data.shift(); } const queue = new Queue<number>(); queue.push(0); queue.push("1");
→
SumberPertanyaan No. 3 (2). Apakah TypeScript mendukung semua prinsip pemrograman berorientasi objek?
Ya, benar. Ada empat prinsip dasar pemrograman berorientasi objek:
- Enkapsulasi
- Warisan
- Abstraksi
- Polimorfisme
Menggunakan alat TypeScript yang sederhana dan jelas, Anda dapat menerapkan semua prinsip ini.
→
SumberPertanyaan No. 4 (2). Bagaimana dalam TypeScript untuk memeriksa nilai-nilai untuk kesetaraan nol dan tidak terdefinisi?
Untuk melakukan pemeriksaan semacam itu, cukup menggunakan konstruksi berikut:
if (value) { }
Ekspresi dalam tanda kurung akan
true jika itu bukan sesuatu dari daftar berikut:
nullundefinedNaN- Baris kosong
- 0
false
TypeScript mendukung aturan konversi tipe yang sama seperti JavaScript.
→
SumberPertanyaan No. 5 (2). Bagaimana cara mengimplementasikan properti kelas yang konstan dalam TypeScript?
Di TypeScript, ketika mendeklarasikan properti kelas, Anda tidak dapat menggunakan kata kunci
const . Ketika Anda mencoba menggunakan kata kunci ini, pesan kesalahan berikut ditampilkan:
A class member cannot have the 'const' keyword . TypeScript 2.0 memiliki pengubah
readonly yang memungkinkan Anda untuk membuat properti kelas read-only:
class MyClass { readonly myReadonlyProperty = 1; myMethod() { console.log(this.myReadonlyProperty); } } new MyClass().myReadonlyProperty = 5;
→
SumberPertanyaan No. 6 (2). Apa itu file .map dalam TypeScript?
File dengan peta sumber .map store extension, yang berisi data tentang korespondensi kode yang ditulis dalam kode TypeScript ke JavaScript yang dibuat atas dasar. Banyak debugger dapat bekerja dengan file ini (misalnya, Visual Studio dan alat pengembang Chrome). Hal ini memungkinkan, selama debugging, untuk bekerja dengan kode sumber program TypeScript, dan tidak dengan padanan JS-nya.
→
SumberPertanyaan No. 7 (2). Apa yang getter dan setter dalam TypeScript?
TypeScript mendukung getter dan setter, yang memungkinkan Anda untuk mengontrol akses ke anggota objek. Mereka memberi pengembang kontrol atas membaca dan menulis properti dari objek.
class foo { private _bar:boolean = false; get bar():boolean { return this._bar; } set bar(theBar:boolean) { this._bar = theBar; } } var myBar = myFoo.bar;
→
SumberPertanyaan No. 8 (2). Bisakah TypeScript digunakan dalam pengembangan server, dan jika demikian, bagaimana?
Program yang ditulis dalam TypeScript tidak hanya cocok untuk pengembangan front-end, tetapi juga untuk membuat aplikasi server. Misalnya, di TS Anda dapat menulis program untuk platform Node.js. Ini memberi programmer alat tambahan untuk kontrol tipe dan memungkinkan Anda untuk menggunakan fitur bahasa lainnya. Untuk membuat aplikasi server pada TS, Anda hanya perlu mengatur proses pemrosesan kode yang benar, pada input file TypeScript yang diterima, dan outputnya adalah file JavaScript yang cocok untuk dieksekusi di Node.js. Untuk mengatur lingkungan seperti itu, Anda harus terlebih dahulu menginstal kompiler TypeScript:
npm i -g typescript
Parameter kompiler diatur menggunakan file
tsconfig.json , yang menentukan, antara lain, tujuan kompilasi dan tempat di mana file JS yang sudah jadi harus ditempatkan. Secara umum, file ini sangat mirip dengan file konfigurasi babel atau webpack:
{ "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "build" } }
Sekarang, asalkan kompiler memiliki sesuatu untuk diproses, Anda perlu menjalankannya:
tsc
Dan akhirnya, dengan mempertimbangkan fakta bahwa file JS yang cocok untuk dieksekusi di lingkungan Node.js terletak di folder
build , Anda perlu menjalankan perintah berikut di direktori root proyek:
node build/index.js
→ Sumber
Pertanyaan No. 9 (3). Beri tahu kami tentang komponen utama TypeScript.
TypeScript memiliki tiga komponen utama:
- Bahasa Ini, dari sudut pandang pengembang, adalah bagian terpenting dari TypeScript. "Bahasa" adalah sintaks, kata kunci, semua yang memungkinkan Anda untuk menulis program dalam TypeScript.
- Kompiler TypeScript memiliki kompiler open source, ini adalah cross-platform, open-spec, dan ditulis dalam TypeScript. Kompiler mengubah kode TypeScript ke kode JavaScript. Selain itu, jika ada sesuatu yang salah dengan program, ini akan menampilkan pesan kesalahan. Ini memungkinkan Anda untuk menggabungkan beberapa file TypeScript menjadi satu file JS output tunggal dan dapat membuat peta kode.
- Alat bantu. Alat bantu TypeScript dirancang untuk memfasilitasi proses pengembangan dengan penggunaannya dalam berbagai IDE. Diantaranya adalah Visual Studio, VS Code , Sublime, berbagai alat untuk meluncurkan TS-code dengan cepat, dan lainnya.
→
SumberPertanyaan No. 10 (3). Apakah ada kesalahan dalam kode TypeScript yang Anda berikan? Jelaskan jawaban Anda.
Berikut ini cuplikan kode:
class Point { x: number; y: number; } interface Point3d extends Point { z: number; } let point3d: Point3d = {x: 1, y: 2, z: 3};
Tidak ada kesalahan dalam kode ini. Deklarasi kelas membuat dua entitas: ini adalah tipe data yang digunakan untuk membuat instance kelas, dan fungsi konstruktor. Karena kelas membuat tipe data, Anda bisa menggunakannya di mana Anda bisa menggunakan antarmuka.
→
Sumber
Sangat suka film ini)Pertanyaan No. 11 (3). Beri tahu kami tentang menggunakan dekorator properti di TypeScript.
Dekorator dapat digunakan untuk mengubah perilaku kelas, dan Anda bisa mendapatkan manfaat lebih banyak dari mereka ketika menggunakannya dengan kerangka kerja apa pun. Misalnya, jika kerangka kerja Anda memiliki metode yang aksesnya dibatasi (misalnya, itu dimaksudkan hanya untuk administrator), akan mudah untuk menulis dekorator metode
@admin , yang akan melarang pengguna yang bukan administrator mengakses metode yang sesuai. Anda dapat membuat dekorator
@owner yang memungkinkan Anda memodifikasi objek hanya untuk pemiliknya. Seperti apa dekorator yang terlihat:
class CRUD { get() { } post() { } @admin delete() { } @owner put() { } }
→
SumberPertanyaan No. 12 (3). Bisakah TypeScript menggunakan fungsi yang sangat diketik sebagai parameter?
Perhatikan contoh berikut:
class Foo { save(callback: Function) : void { // var result : number = 42; // // - , number? callback(result); } } var foo = new Foo(); var callback = (result: string) : void => { alert(result); } foo.save(callback);
Apakah mungkin untuk mengatur pekerjaan dengan callback yang diketik dalam metode
save ? Tulis ulang kode untuk menunjukkan ini.
Di TypeScript, Anda dapat mendeklarasikan jenis panggilan balik, dan kemudian menulis ulang kode:
type NumberCallback = (n: number) => any; class Foo { // save(callback: NumberCallback): void { console.log(1) callback(42); } } var numCallback: NumberCallback = (result: number) : void => { console.log("numCallback: ", result.toString()); } var foo = new Foo(); foo.save(numCallback)
→
SumberPertanyaan No. 13 (3). Bagaimana membuat kelas dinyatakan dalam modul yang dapat diakses di luar modul?
Kelas yang dideklarasikan dalam modul tersedia dalam modul ini. Di luar, akses ke mereka tidak dapat diperoleh.
module Vehicle { class Car { constructor ( public make: string, public model: string) { } } var audiCar = new Car("Audi", "Q7"); }
Dalam kode di atas, kesalahan akan terjadi ketika mencoba menginisialisasi variabel
fordCar . Untuk membuat kelas dinyatakan dalam modul yang dapat diakses di luar modul ini, Anda perlu menggunakan kata kunci
export :
module Vehicle { export class Car { constructor ( public make: string, public model: string) { } } var audiCar = new Car("Audi", "Q7"); }
→
SumberPertanyaan No. 14 (3). Apakah TypeScript mendukung fungsi yang berlebihan?
TypeScript mendukung fungsi yang berlebihan, tetapi implementasi mekanisme ini berbeda dari apa yang dapat dilihat dalam bahasa berorientasi objek lainnya. Yaitu, di TS mereka hanya membuat satu fungsi dan sejumlah iklan. Ketika kode tersebut dikompilasi dalam JavaScript, hanya satu fungsi spesifik yang terlihat. Mekanisme ini berfungsi karena fungsi JS dapat dipanggil dengan memberikan mereka sejumlah parameter yang berbeda.
class Foo { myMethod(a: string); myMethod(a: number); myMethod(a: number, b: string); myMethod(a: any, b?: string) { alert(a.toString()); } }
→
SumberPertanyaan No. 15 (4). Apa yang salah dengan kode yang diberikan kepada Anda?
Berikut ini kode yang dimaksud:
interface Fetcher { getObject(done: (data: any, elapsedTime?: number) => void): void; }
Disarankan agar Anda menggunakan parameter opsional dalam panggilan balik hanya jika Anda benar-benar memahami konsekuensi dari langkah tersebut. Kode ini memiliki arti yang sangat spesifik: panggilan balik yang
done dapat dipanggil dengan argumen 1 atau 2. Penulis kode mungkin bermaksud memberi tahu kami bahwa panggilan balik mungkin tidak memperhatikan parameter
elapsedTime , tetapi untuk mencapai ini, Anda selalu dapat membuat panggilan balik yang membutuhkan lebih sedikit argumen.
→
SumberPertanyaan No. 16 (4). Bagaimana cara membebani konstruktor kelas di dalam TypeScript?
TypeScript memungkinkan Anda untuk mendeklarasikan banyak varian metode, tetapi hanya ada satu implementasi, dan implementasi ini harus memiliki tanda tangan yang kompatibel dengan semua varian metode kelebihan beban. Untuk membebani konstruktor kelas, Anda dapat menggunakan beberapa pendekatan:
- Anda dapat menggunakan parameter opsional:
class Box { public x: number; public y: number; public height: number; public width: number; constructor(); constructor(obj: IBox); constructor(obj?: any) { this.x = obj && obj.x || 0 this.y = obj && obj.y || 0 this.height = obj && obj.height || 0 this.width = obj && obj.width || 0; } }
- Anda dapat menggunakan pengaturan default:
class Box { public x: number; public y: number; public height: number; public width: number; constructor(obj : IBox = {x:0,y:0, height:0, width:0}) { this.x = obj.x; this.y = obj.y; this.height = obj.height; this.width = obj.width; } }
- Anda dapat menggunakan kelebihan beban tambahan sebagai metode pabrik statis:
class Person { static fromData(data: PersonData) { let { first, last, birthday, gender = 'M' } = data return new this( `${last}, ${first}`, calculateAge(birthday), gender ) } constructor( public fullName: string, public age: number, public gender: 'M' | 'F' ) {} } interface PersonData { first: string last: string birthday: string gender?: 'M' | 'F' } let personA = new Person('Doe, John', 31, 'M') let personB = Person.fromData({ first: 'John', last: 'Doe', birthday: '10-09-1986' })
- Anda dapat menggunakan jenis gabungan:
class foo { private _name: any; constructor(name: string | number) { this._name = name; } } var f1 = new foo("bar"); var f2 = new foo(1);
→
SumberPertanyaan No. 17 (4). Apa perbedaan antara antarmuka dan jenis kata kunci dalam TypeScript?
Berikut adalah contoh penggunaan kata kunci ini:
interface X { a: number b: string } type X = { a: number b: string };
Tidak seperti deklarasi antarmuka, yang selalu mewakili jenis objek yang dinamai, menggunakan
type kata kunci memungkinkan Anda untuk menentukan alias untuk semua jenis jenis, termasuk tipe primitif, tipe gabungan, dan tipe persimpangan.
Saat menggunakan kata kunci
type alih-alih kata kunci
interface , kemungkinan berikut ini hilang:
- Antarmuka dapat digunakan dalam ekspresi
extends atau implements , tetapi alias untuk tipe objek literal tidak bisa. - Antarmuka dapat memiliki beberapa deklarasi digabungkan, dan ketika menggunakan kata kunci
type fitur ini tidak tersedia.
→
SumberPertanyaan No. 18 (5). Beri tahu kami saat TypeScript menggunakan kata kunci yang mendeklarasikan.
Kata kunci
declare digunakan dalam TypeScript untuk mendeklarasikan variabel, yang sumbernya mungkin file yang bukan file TypeScript.
Sebagai contoh, misalkan kita memiliki perpustakaan bernama
myLibrary . Itu tidak memiliki file dengan deklarasi tipe TypeScript, ia hanya memiliki namespace
myLibrary di namespace global. Jika Anda ingin menggunakan perpustakaan ini dalam kode TS Anda, Anda dapat menggunakan konstruksi berikut:
declare var myLibrary;
TypeScript akan menetapkan variabel
myLibrary ke
any . Masalahnya di sini adalah bahwa pada saat pengembangan Anda tidak akan memiliki petunjuk cerdas untuk perpustakaan ini, meskipun Anda dapat menggunakannya dalam kode Anda. Dalam situasi ini, Anda dapat menggunakan pendekatan lain yang mengarah ke hasil yang sama. Kita berbicara tentang menggunakan variabel tipe
any :
var myLibrary: any;
Dalam kedua kasus, ketika menyusun kode TS dalam JavaScript, hasilnya sama, tetapi opsi
declare lebih mudah dibaca. Penggunaan kata kunci ini mengarah pada pembuatan deklarasi eksternal yang disebut variabel (ambient declaration).
Pertanyaan No. 19 (5). Apa deklarasi variabel eksternal dalam TypeScript dan kapan mereka harus digunakan?
Deklarasi eksternal suatu variabel (ambient declaration) adalah mekanisme yang memungkinkan kompiler TypeScript mengetahui bahwa beberapa kode sumber ada di suatu tempat di luar file saat ini. Iklan eksternal membantu mengintegrasikan pustaka JavaScript pihak ketiga ke dalam program TS.
Deklarasi ini dibuat dalam tipe file deklarasi dengan ekstensi .d.ts. Variabel atau modul eksternal menyatakan seperti ini:
declare module Module_Name { }
File yang berisi kode eksternal harus dimasukkan dalam file TS yang menggunakannya, sebagai berikut:
→
SumberPertanyaan No. 20 (5). Bisakah saya secara otomatis membuat materi iklan TypeScript dari pustaka JS?
JavaScript tidak selalu berisi informasi yang cukup yang memungkinkan TypeScript untuk secara otomatis menyimpulkan tipe. Oleh karena itu, hampir tidak mungkin untuk secara otomatis membuat deklarasi tipe berdasarkan JavaScript. Namun, Anda dapat mencoba melakukan ini menggunakan alat berikut:
- Microsoft / dts-gen adalah alat resmi yang digunakan oleh Microsoft sebagai titik awal untuk membuat deklarasi tipe.
- dtsmake adalah alat pengembangan yang menjanjikan untuk secara otomatis membuat deklarasi tipe berdasarkan file JS. Itu tergantung pada sistem analisis kode Tern , yang digunakan beberapa editor untuk menerapkan mekanisme pelengkapan otomatis saat memasukkan kode JS.
→
SumberRingkasan
Kami berharap bahwa diskusi tentang pertanyaan-pertanyaan dalam materi ini akan membantu Anda untuk mengenal TypeScript dengan lebih baik, mungkin memperhatikan apa yang sebelumnya tidak Anda perhatikan, dan, jika Anda sedang mempersiapkan sebuah wawancara, akan meningkatkan peluang Anda untuk lulus dengan sukses.
Pembaca yang budiman! Pertanyaan apa yang akan Anda tanyakan pada pewawancara yang melamar pekerjaan yang membutuhkan pengetahuan TypeScript?
- Dan apa diskon untuk kode promo ini ?!
- Sepertinya 7%. Saya akan memeriksa apakah Anda mau ...
"Ya, kamu periksa." Menurut pendapat saya, diskonnya agak terlalu mahal!
...
- Maaf, saya sedikit salah tentang diskon. 10% di semua server virtual.