Halaman ini masih dalam tahap beta
; +}; + +// Hal ini disebut sebagai _import elision_, dan hal tersebut +// dapat menjadi sumber kebingungan. Sintaks `import type` +// memperbolehkan Anda untuk menuliskan apa yang Anda inginkan +// secara lebih spesifik pada JavaScript. + +// Dokumen ini merupakan gambaran singkat dari kasus penggunaan +// utama dari `import types` namun ada kasus penggunaan lainnya +// yang Anda dapat pelajari pada catatan rilis TypeScript versi 3.8 + +// https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#type-only-imports-exports diff --git a/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Code Flow.ts b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Code Flow.ts new file mode 100644 index 000000000000..5a433facd4fa --- /dev/null +++ b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Code Flow.ts @@ -0,0 +1,67 @@ +//// { order: 3, compiler: { strictNullChecks: true } } + +//// {order: 3, compiler: {strictNullChecks: true}} + +// Bagaimana kode mengalir di dalam file JavaScript dapat mempengaruhi +// tipe data di seluruh program kita. + +const users = [{ name: "Ahmed" }, { name: "Gemma" }, { name: "Jon" }]; + +// Kita akan melihat apakah kita dapat menemukan pengguna bernama "jon". +const jon = users.find(u => u.name === "jon"); + +// Dalam kasus di atas, 'find' bisa gagal. Dalam hal ini kita +// tidak memiliki objek. Ini menghasilkan sebuah tipe data: +// +// {name: string} | undefined +// +// Jika Anda mengarahkan mouse ke tiga penggunaan 'jon' berikut, +// Anda akan melihat bagaimana tipe berubah tergantung di mana kata tersebut berada: + +if (jon) { + jon; +} else { + jon; +} + +// Tipe '{name: string} | undefined' menggunakan fitur TypeScript +// yang disebut tipe data gabungan (_union types_). Tipe data gabungan +// adalah cara untuk nyatakan bahwa sebuah objek bisa +// menjadi salah satu dari banyak hal. +// +// Tanda pipa (|) bertindak sebagai pemisah antara tipe data yang berbeda. +// Sifat dinamis JavaScript berarti bahwa banyak fungsi +// menerima dan dan mengembalikan objek dari tipe data yang tidak terkait +// dan kita perlu untuk dapat mengungkapkan tipe data mana yang mungkin +// kita hadapi. + +// Kita bisa menggunakan ini dalam beberapa cara. Mari kita mulai dengan melihat +// himpunan (_array_) yang nilainya memiliki tipe berbeda. + +const identifiers = ["Hello", "World", 24, 19]; + +// Kita bisa menggunakan sintaks javascript 'type x === y' untuk +// memeriksa jenis elemen pertama. Anda dapat mengarahkan kursor ke atas +// 'randomIdentifier' di bawah untuk melihat perubahannya +// lokasi berbeda + +const randomIdentifier = identifiers[0]; +if (typeof randomIdentifier === "number") { + randomIdentifier; +} else { + randomIdentifier; +} + +// Analisis aliran kontrol ini berarti kita dapat menulis +// JavaScript polos, dan TypeScript akan mencoba memahami bagaimana file +// jenis kode akan berubah di lokasi berbeda. + +// Untuk mempelajari lebih lanjut tentang analisis aliran kode: +// - example:type-guards + +// Untuk melanjutkan membaca contoh-contoh lain, Anda dapat melompat ke +// beberapa tempat lain sekarang: +// +// - Modern JavaScript: example:immutability +// - Type Guards: example:type-guards +// - Functional Programming with JavaScript example:function-chaining diff --git a/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Functions.ts b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Functions.ts new file mode 100644 index 000000000000..274ed9c630a7 --- /dev/null +++ b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Functions.ts @@ -0,0 +1,92 @@ +//// { order: 2, compiler: { noImplicitAny: false } } + +// Ada beberapa cara untuk mendeklarasikan fungsi di +// JavaScript. Mari kita lihat fungsi yang menambahkan dua +// angka bersama: + +// Membuat fungsi dalam lingkup global yang disebut addOldSchool +function addOldSchool(x, y) { + return x + y; +} + +// Anda dapat memindahkan nama fungsi ke variabel +// nama juga +const anonymousOldSchoolFunction = function (x, y) { + return x + y; +}; + +// Anda juga dapat menggunakan singkatan panah-gemuk (_fat-arrow_) +// untuk suatu fungsi +const addFunction = (x, y) => { + return x + y; +}; + +// Kita akan fokus pada cara terakhir, tapi semuanya +// berlaku untuk ketiga format termasuk dua yang sebelumnya. + +// TypeScript menyediakan sintaks tambahan yang ditambahkan ke +// definisi fungsi dan menawarkan petunjuk tentang tipe data apa +// diharapkan oleh fungsi ini. +// +// Selanjutnya adalah versi paling terbuka dari fungsi add, versi ini +// mengatakan bahwa add mengambil dua masukan dari jenis +// apa pun: dimana masukan ini bisa berupa _string_, angka atau objek +// yang telah Anda buat. + +const add1 = (x: any, y: any) => { + return x + y; +}; +add1("Hello", 23); + +// Ini adalah JavaScript yang sah (_string_ dapat ditambahkan +// seperti ini misalnya) tetapi tidak optimal untuk fungsi kita +// yang kita tahu adalah angka, jadi kita akan mengonversi x dan +// y hanya menjadi angka. + +const add2 = (x: number, y: number) => { + return x + y; +}; +add2(16, 23); +add2("Hello", 23); + +// Bagus. Kita mendapatkan kesalahan ketika ada selain angka +// yang diteruskan ke dalam fungsi. Jika Anda mengarahkan kursor +// ke kata add2 di atas, Anda akan melihat bahwa TypeScript +// mendeskripsikannya sebagai: +// +// const add2: (x: number, y: number) => number +// +// Di mana ia menyimpulkan bahwa ketika dua input merupakan +// nomor, maka satu-satunya jenis pengembalian yang mungkin adalah nomor. +// Ini bagus, Anda tidak perlu menulis sintaks tambahan. +// Mari kita lihat apa yang diperlukan untuk melakukan itu: + +const add3 = (x: number, y: number): string => { + return x + y; +}; + +// Fungsi ini gagal karena kita memberi tahu TypeScript bahwa TypeScipt +// seharusnya menerima nilai kembali dalam bentuk _string_, tetapi +// ternyata fungsinya tidak memenuhi janji itu. + +const add4 = (x: number, y: number): number => { + return x + y; +}; + +// Ini adalah versi yang sangat eksplisit dari add2 - ada +// kasus ketika Anda ingin menggunakan sintaks tipe pengembalian eksplisit +// untuk memberi diri Anda ruang untuk bekerja sebelumnya +// Anda memulai. Agak mirip seperti bagaimana test-driven development +// merekomendasikan memulai dengan tes yang gagal, tetapi dalam kasus ini +// ini dengan bentuk fungsi yang gagal. + +// Contoh ini hanyalah dasar, Anda dapat mempelajari lebih banyak lagi +// tentang bagaimana fungsi bekerja di TypeScript di buku pegangan +// (handbook) dan di dalam bagian JavaScript Fungsional dari contoh: +// +// https://www.typescriptlang.org/docs/handbook/functions.html +// example:function-chaining + +// Dan untuk melanjutkan tur dasar-dasar JavaScript, +// kita akan melihat bagaimana aliran kode memengaruhi tipe data TypeScript: +// example:code-flow diff --git a/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Hello World.ts b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Hello World.ts new file mode 100644 index 000000000000..dac141e5d597 --- /dev/null +++ b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Hello World.ts @@ -0,0 +1,36 @@ +//// { order: 0, compiler: { target: 1 } } + +// Selamat datang di area bermain TypeScript. Situs ini mirip +// seperti menjalankan proyek TypeScript di dalam peramban web. + +// Area bermain memudahkan Anda bereksperimen dengan aman +// dengan ide-ide dalam bahasa TypeScript, dengan membuat +// proyek ini mudah untuk dibagikan. Semua yang diperlukan +// untuk memuat proyek untuk orang lain bisa dilakukan +// dengan memuat URL ini. + +const halo = "Halo"; + +// Anda dapat melihat di sebelah kanan hasil dari kompilator +// TypeScript: ini adalah kode JavaScript polos yang dapat +// dijalankan di peramban, server, atau di mana saja. + +const dunia = "Dunia"; + +// Anda dapat melihat bagaimana kompilator Typescript membuat +// perubahan kecil pada kode, dengan mengonversi "const" +// menjadi "var". Ini salah satu dari sekian banyak +// hal-hal yang dilakukan TypeScript agar dapat dijalankan +// di mana saja JavaScript bisa dijalankan. + +console.log(halo + " " + dunia); + +// Karena sekarang Anda sudah mengetahui cara kerja area bermain, +// mari kita lihat bagaimana TypeScript bisa membuat bekerja dengan +// JavaScript jadi lebih menyenangkan. Pada bagian ini kami akan mencoba +// menjaga agar kode yang ada menjadi sedekat mungkin dengan JavaScript polos +// agar Anda dapat menggunakan ulang pengetahuan JavaScript Anda. +// +// Klik di bawah untuk melanjutkan: +// +// example:objects-and-arrays diff --git a/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Objects and Arrays.ts b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Objects and Arrays.ts new file mode 100644 index 000000000000..de74996822fe --- /dev/null +++ b/packages/playground-examples/copy/id/JavaScript/JavaScript Essentials/Objects and Arrays.ts @@ -0,0 +1,113 @@ +//// { order: 1, compiler: { strict: false } } + +// Objek JavaScript merupakan kumpulan nilai-nilai yang +// dibungkus menggunakan kata kunci yang memiliki nama. + +const userAccount = { + name: "Kieron", + id: 0, +}; + +// Anda dapat menggabungkan objek-objek ini untuk +// membuat model data yang lebih besar dan lebih rumit. + +const pie = { + type: "Apple", +}; + +const purchaseOrder = { + owner: userAccount, + item: pie, +}; + +// Jika Anda menggunakan tetikus untuk mengarahkan +// kursor ke beberapa kata ini (coba arahkan kursor +// ke objek purchaseOrder di atas) Anda dapat melihat +// bagaimana TypeScript menafsirkan JavaScript Anda menjadi +// tipe data berlabel. + +// Nilai dapat diakses melalui ".", Jadi untuk mendapatkan +// nama pengguna untuk pesanan pembelian: +console.log(purchaseOrder.item.type); + +// Jika Anda mengarahkan kursor tetikus ke setiap bagian kode +// antara tanda (), Anda dapat melihat TypeScript menampilkan lebih banyak +// informasi tentang tiap-tiap bagian. Coba tulis ulang kode di bawah ini: + +// Salin ini di baris berikutnya, karakter demi karakter: +// +// purchaseOrder.item.type + +// TypeScript memberikan umpan balik ke area bermain +// tentang objek JavaScript apa saja yang tersedia di berkas ini +// dan memungkinkan Anda menghindari kesalahan ketik dan melihat tambahan +// informasi tanpa harus mencarinya di tempat lain. + +// TypeScript juga menawarkan fitur yang sama untuk himpunan (_array_). +// Berikut adalah himpunan yang isinya hanya pesanan pembelian +// yang kita buat. + +const allOrders = [purchaseOrder]; + +// Jika Anda mengarahkan kursor ke allOrders, Anda dapat +// mengetahui bahwa itu adalah himpunan karena info _hover_ +// diakhiri dengan []. Anda dapat mengakses +// urutan pertama menggunakan tanda kurung siku dengan indeks +// (mulai dari nol). + +const firstOrder = allOrders[0]; +console.log(firstOrder.item.type); + +// Cara alternatif untuk mendapatkan objek adalah dengan memencet (_popping_) +// himpunan untuk menghapus objek. Dengan melakukan ini, kita bisa +// menghapus objek dari himpunan, dan mengembalikan objek. Ini disebut +// mutasi himpunan, karena mengubah data di dalamnya. + +const poppedFirstOrder = allOrders.pop(); + +// Sekarang allOrders menjadi kosong. Mutasi data dapat bermanfaat untuk +// banyak hal, tapi satu cara untuk mengurangi kerumitan di +// basis kode Anda adalah dengan menghindari mutasi. TypeScript menawarkan cara +// untuk mendeklarasikan himpunan hanya baca (_read-only_): + +// Membuat tipe data berdasarkan bentuk pesanan pembelian: +type PurchaseOrder = typeof purchaseOrder; + +// Membuat himpunan pesanan pembelian yang hanya bisa dibaca +const readonlyOrders: readonly PurchaseOrder[] = [purchaseOrder]; + +// Ya! Agak lebih banyak kode memang. Ada empat +// hal-hal baru di sini: +// +// type PurchaseOrder - Menyatakan tipe data baru ke TypeScript. +// +// typeof - Gunakan sistem inferensi tipe data (_type inference_) untuk +// menyetel tipe data berdasarkan konstanta yang diteruskan berikutnya. +// +// purchaseOrder - Dapatkan variabel purchaseOrder dan beri tahu +// TypeScript ini adalah bentuk dari semua +// objek didalam himpunan pesanan. +// +// readonly - Objek ini tidak mendukung mutasi, sekali +// objek ini dibuat maka isi himpunan +// akan selalu sama. +// +// Sekarang jika Anda mencoba untuk keluar dari readonlyOrders, TypeScript +// akan memunculkan kesalahan. + +readonlyOrders.pop(); + +// Anda bisa menggunakan _readonly_ di semua tempat, +// sedikit lebih banyak sintaks tambahan di sana-sini, tapi sintaks +// ini memberikan lebih banyak keamanan ekstra. + +// Anda dapat mengetahui lebih lanjut tentang readonly: +// - https://www.typescriptlang.org/docs/handbook/interfaces.html#readonly-properties +// - https://basarat.gitbooks.io/typescript/content/docs/types/readonly.html + +// Dan Anda bisa terus belajar tentang JavaScript dan +// TypeScript didalam contoh tentang fungsi: +// example:functions +// +// Atau jika Anda ingin tahu lebih banyak tentang immutability: +// example:immutability diff --git a/packages/playground-examples/copy/ko/JavaScript/JavaScript Essentials/Hello World.ts b/packages/playground-examples/copy/ko/JavaScript/JavaScript Essentials/Hello World.ts new file mode 100644 index 000000000000..fcb0bb8dd12d --- /dev/null +++ b/packages/playground-examples/copy/ko/JavaScript/JavaScript Essentials/Hello World.ts @@ -0,0 +1,34 @@ +//// { order: 0, compiler: { target: 1 } } + +// TypeScript 플레이그라운드에 오신 것을 환영합니다. +// 이곳은 TypeScript를 웹 브라우저에서 실행하는 환경과 거의 비슷합니다. + +// 플레이그라운드에서 간단하게 +// 프로젝트를 공유할 수 있기 때문에, TypeScript로 아이디어를 +// 쉽고 안전하게 실험할 수 있습니다. 이 페이지의 URL만 +// 다른 사람에게 공유하면 됩니다. + +const hello = "Hello"; + +// 오른쪽에서 TypeScript 컴파일러의 결과를 볼 수 +// 있습니다. 결과는 브라우저나 서버 및 어디에서나 +// 실제로 실행할 수 있는 vanilla JavaScript입니다. + +const world = "World"; + +// "const"를 "var"로 변환하면 코드에서 작은 변화를 +// 확인할 수 있습니다. 이것은 TypeScript를 +// 모든 JavaScript 환경에서 실행 가능하도록 +// 수행하는 많은 작업 중 하나입니다. + +console.log(hello + " " + world); + +// 이제 플레이그라운드가 어떻게 동작하는지 알게 되었으니, +// TypeScript가 JavaScript 작업을 더 즐겁게 만드는 방법을 알아봅시다. +// 여기서는 어떻게 기존 지식을 재사용할 수 있는지 +// 보여주기 위해, 가능한 한 vanilla JavaScript에 +// 가깝게 유지하겠습니다. +// +// 계속하려면 아래를 클릭하세요: +// +// example:objects-and-arrays diff --git a/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts new file mode 100644 index 000000000000..3a944e153a0e --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Enums.ts @@ -0,0 +1,81 @@ +// 열거형은 TypeScript로 쓰는 JavaScript에 추가된 기능입니다. +// 이를 통해 이름 붙은 변수들의 집합을 쉽게 다룰 수 있습니다. + +// 기본적으로 열거형은 0부터 시작하는 숫자 기반이며, +// 각 항목은 1씩 증가하여 할당됩니다. +// 이는 값이 중요하지 않을 때 유용합니다. + +enum CompassDirection { + North, + East, + South, + West, +} + +// 열거 항목을 표기하여 값을 지정할 수 있으며, +// 그 값에서부터 증가가 시작됩니다: + +enum StatusCodes { + OK = 200, + BadRequest = 400, + Unauthorized, + PaymentRequired, + Forbidden, + NotFound, +} + +// EnumName.Value을 사용하여 열거형을 참조할 수 있습니다. + +const startingDirection = CompassDirection.East; +const currentStatus = StatusCodes.OK; + +// 열거형을 사용하여 key에서 value, 그리고 value에서 key 모든 방향으로 +// 데이터에 접근할 수 있습니다. + +const okNumber = StatusCodes.OK; +const okNumberIndex = StatusCodes["OK"]; +const stringBadRequest = StatusCodes[400]; + +// 열거형은 여러 타입일 수 있지만, 일반적으로 string 타입입니다. +// string을 사용하면 디버깅이 쉬워지는데, +// 런타임에서의 값을 통해 숫자를 찾아볼 필요가 없어지기 때문입니다. + +enum GamePadInput { + Up = "UP", + Down = "DOWN", + Left = "LEFT", + Right = "RIGHT", +} + +// 만약 JavaScript 런타임에서 사용되는 객체의 수를 줄이고 싶다면, +// const enum을 쓸 수 있습니다. + +// const enum의 값은 +// 런타임에서 객체를 통해 찾아지는 대신 +// 코드를 트랜스파일하는 과정에서 대체됩니다. + +const enum MouseAction { + MouseDown, + MouseUpOutside, + MouseUpInside, +} + +const handleMouseAction = (action: MouseAction) => { + switch (action) { + case MouseAction.MouseDown: + console.log("Mouse Down"); + break; + } +}; + +// 트랜스파일된 JavaScript 코드를 보면, +// 다른 열거형들이 객체나 함수 형태로 존재하는 것을 볼 수 있지만, +// MouseAction은 그렇지 않습니다. + +// 이는 handleMouseAction 안의 switch문에 있는 +// MouseAction.MouseDown의 경우에도 마찬가지입니다. + +// 열거형에는 이것보다 더 많은 기능이 있습니다. +// TypeScript 핸드북에서 더 알아볼 수 있습니다. +// +// https://www.typescriptlang.org/docs/handbook/enums.html diff --git a/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts new file mode 100644 index 000000000000..8e2107372946 --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Language Extensions/Types vs Interfaces.ts @@ -0,0 +1,83 @@ +// 객체 형태를 선언하는 주요 도구는 두 가지가 있습니다. +// 인터페이스와 타입 별칭입니다. +// +// 이 둘은 무척 비슷하며, +// 대부분 동일하게 작동합니다. + +type BirdType = { + wings: 2; +}; + +interface BirdInterface { + wings: 2; +} + +const bird1: BirdType = { wings: 2 }; +const bird2: BirdInterface = { wings: 2 }; + +// TypeScript는 구조적 타입 시스템을 따르기 때문에, +// 교차하여 사용하는 것도 가능합니다. + +const bird3: BirdInterface = bird1; + +// 둘 다 다른 인터페이스와 타입으로의 확장이 가능합니다. +// 타입 별칭은 교차 타입을 통해 이를 수행하는 반면, +// 인터페이스는 키워드를 사용합니다. + +type Owl = { nocturnal: true } & BirdType; +type Robin = { nocturnal: false } & BirdInterface; + +interface Peacock extends BirdType { + colourful: true; + flies: false; +} +interface Chicken extends BirdInterface { + colourful: false; + flies: false; +} + +let owl: Owl = { wings: 2, nocturnal: true }; +let chicken: Chicken = { wings: 2, colourful: false, flies: false }; + +// 그래도 타입 별칭보다 인터페이스를 쓰는 것을 추천합니다. +// 분명히 더 나은 에러 메시지를 받을 수 있기 때문입니다. +// 뒤따르는 에러에 커서를 가져가면, +// Chicken과 같은 인터페이스를 사용했을 때 +// TypeScript가 더 간결하고 정확한 메시지를 어떻게 제공하는지 알 수 있습니다. + +owl = chicken; +chicken = owl; + +// 타입 별칭과 인터페이스 사이 한 가지 주요한 차이점은 +// 인터페이스는 열려 있고 타입 별칭은 닫혀 있다는 것입니다. +// 이는 인터페이스를 다음에 선언할 때 +// 확장할 수 있음을 의미합니다. + +interface Kitten { + purrs: boolean; +} + +interface Kitten { + colour: string; +} + +// 이와 달리 타입은 선언 바깥에서 +// 변경할 수 없습니다. + +type Puppy = { + color: string; +}; + +type Puppy = { + toys: number; +}; + +// 목적에 따라서, 이 차이는 좋을 수도 나쁠 수도 있습니다. +// 하지만 공개된 타입들의 경우, +// 그것들을 인터페이스로 만드는 것이 더 좋습니다. + +// 타입과 인터페이스에 대한 모든 엣지 케이스를 알고 싶다면, +// 아래 stack overflow thread가 +// 시작하기 좋은 훌륭한 자료가 될 것입니다. + +// https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types/52682220#52682220 diff --git a/packages/playground-examples/copy/ko/TypeScript/Primitives/Any.ts b/packages/playground-examples/copy/ko/TypeScript/Primitives/Any.ts new file mode 100644 index 000000000000..ee329a6287aa --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Primitives/Any.ts @@ -0,0 +1,50 @@ +// any는 TypeScript의 탈출 구문입니다. +// 일부 코드를 JavaScript처럼 동적으로 동작하도록 선언하고 싶을 때, +// 또는 타입 시스템의 제한을 벗어나고 싶을 때 +// any를 사용할 수 있습니다. + +// JSON 파싱은 any의 좋은 예시입니다. + +const myObject = JSON.parse("{}"); + +// any를 사용한다는 것은 여러분이 코드를 더 잘 알고 있음을 뜻하기 때문에, +// 타입이 완전히 정확하지 않더라도 TypeScript는 코드가 안전하다고 인식합니다. +// 예를 들어, 아래 코드는 오류가 발생합니다. + +myObject.x.y.z; + +// any를 사용하면 타입의 안전성을 희생하는 대신 +// 코드를 원래의 JavaScript에 더욱 가깝게 작성할 수 있습니다. + +// any는 어떤 타입(never를 제외하고)이든 +// 다른 타입에 할당할 수 있도록 만드는 +// '타입 와일드카드'와도 같습니다. + +declare function debug(value: any): void; + +debug("a string"); +debug(23); +debug({ color: "blue" }); + +// 인수의 타입을 모두 any로 대신할 수 있기 때문에 +// debug의 각 호출이 허용됩니다. + +// TypeScript는 any의 위치를 +// 다양한 형태에서 고려합니다. +// 함수 인수로 사용되는 아래의 튜플이 그 예시입니다. + +declare function swap(x: [number, string]): [string, number]; + +declare const pair: [any, any]; +swap(pair); + +// pair의 첫 번째 any를 number로 대체하고, +// 두 번째 `any`를 string으로 대체하면서 인자가 매칭되기 때문에 +// swap 호출이 가능합니다. + +// 튜플을 처음 봤다면, 다음을 참고하세요: example:tuples + +// unknown은 any의 자매 타입입니다. +// 만약 any가 "뭐가 최선인지 알겠어"와 같다면, +// unknown은 "뭐가 최선일지 모르니까, TS에 타입을 알려줘"와 같습니다. +// example:unknown-and-never diff --git a/packages/playground-examples/copy/ko/TypeScript/Primitives/Literals.ts b/packages/playground-examples/copy/ko/TypeScript/Primitives/Literals.ts new file mode 100644 index 000000000000..112dae015178 --- /dev/null +++ b/packages/playground-examples/copy/ko/TypeScript/Primitives/Literals.ts @@ -0,0 +1,65 @@ +// TypeScript는 소스 코드에서 리터럴을 위한 +// 재미있고 특별한 기능들이 있습니다. + +// 여기선, 타입 넓히기와 좁히기 ( example:type-widening-narrowing )가 +// 중점적으로 다뤄지고 있으므로 +// 그 부분을 먼저 살펴보도록 하곘습니다. + +// 리터럴은 collection 타입의 더욱 구체적인 하위 타입입니다. +// 이는 "Hello World"는 string이지만, +// 타입 시스템에서 string은 "Hello World"가 아니라는 것을 의미합니다. + +const helloWorld = "Hello World"; +let hiWorld = "Hi World"; // 이것은 let이기 때문에 string입니다. + +// 이 함수는 모든 string을 받습니다. +declare function allowsAnyString(arg: string); +allowsAnyString(helloWorld); +allowsAnyString(hiWorld); + +// 이 함수는 "Hello World" string 리터럴만을 받습니다. +declare function allowsOnlyHello(arg: "Hello World"); +allowsOnlyHello(helloWorld); +allowsOnlyHello(hiWorld); + +// 이를 통해 특정 리터럴만을 받기 위해 union을 사용하는 +// API를 선언할 수 있습니다. + +declare function allowsFirstFiveNumbers(arg: 1 | 2 | 3 | 4 | 5); +allowsFirstFiveNumbers(1); +allowsFirstFiveNumbers(10); + +let potentiallyAnyNumber = 3; +allowsFirstFiveNumbers(potentiallyAnyNumber); + +// 언뜻 보기에, 이 규칙은 복잡한 객체들에는 적용되지 않습니다. + +const myUser = { + name: "Sabrina", +}; + +// 상수로 선언되어 있음에도 불구하고 이것이 어떻게 +// `name: "Sabrina"`를 `name: string`으로 바꾸는지 보세요. +// 이는 여전히 이름이 언제든 바뀔 수 있기 때문입니다. + +myUser.name = "Cynthia"; + +// myUser의 name 프로퍼티가 바뀔 수 있기 때문에, +// TypeScript는 타입 시스템에서 리터럴 버전을 사용할 수 없습니다. +// 하지만 이것을 가능하게끔 해주는 기능이 있습니다. + +const myUnchangingUser = { + name: "Fatma", +} as const; + +// mutable object는 바뀔 수 있는 대신, +// 객체에 "as const"가 적용되면, +// object 리터럴이 되어 바뀌지 않습니다. + +myUnchangingUser.name = "Raîssa"; + +// "as const"는 고정된 데이터를 다루는 좋은 도구이며, +// 코드를 한 줄의 리터럴로 적게끔 해줍니다. +// 또한 "as const"는 배열에서도 동작합니다. + +const exampleUsers = [{ name: "Brian" }, { name: "Fahrooq" }] as const; diff --git a/packages/playground-examples/copy/ko/sections.json b/packages/playground-examples/copy/ko/sections.json index 92782dc30c95..0c72f3f7bef0 100644 --- a/packages/playground-examples/copy/ko/sections.json +++ b/packages/playground-examples/copy/ko/sections.json @@ -1,33 +1,34 @@ { - "sections": [{ + "sections": [ + { "name": "JavaScript", "id": "JavaScript", - "subtitle": "See how TypeScript improves day to day working with JavaScript with minimal additional syntax." + "subtitle": "TypeScript가 최소한의 추가 구문으로 JavaScript 작업을 어떻게 개선하는지 확인해보세요." }, { "name": "TypeScript", "id": "TypeScript", - "subtitle": "Explore how TypeScript extends JavaScript to add more safety and tooling." + "subtitle": "TypeScript가 JavaScript를 확장하여 안전성과 도구를 추가하는 방법을 살펴보세요." }, { "name": "3.7", "id": "3.7", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "3.8", "id": "3.8", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "4.0", "id": "4.0", - "subtitle": "See the Release notes." + "subtitle": "릴리즈 노트를 확인해보세요." }, { "name": "Playground V3", "id": "Playground", - "subtitle": "Learn what has changed in this website." + "subtitle": "이 웹사이트에서 변경된 사항을 확인해보세요." } ], "sortedSubSections": [ @@ -59,4 +60,4 @@ "New TS Features", "New Checks" ] -} \ No newline at end of file +} diff --git a/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Immutability.ts b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Immutability.ts index a4306a3601c6..8171db55b4ea 100644 --- a/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Immutability.ts +++ b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Immutability.ts @@ -54,4 +54,4 @@ meuArrayCongelado.push("Mundo"); // na seção de exemplos do TypeScript: // // example:literals -// example:type-type-widening-and-narrowing +// example:type-widening-and-narrowing diff --git a/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Import Export.ts b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Import Export.ts new file mode 100644 index 000000000000..4013637a2f8d --- /dev/null +++ b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/Import Export.ts @@ -0,0 +1,108 @@ +//// { order: 1, target: "ES5" } + +// O JavaScript adicionou import/export à linguagem em 2016 +// e TypeScript tem suporte completo para esse estilo de +// conexão entre arquivos e entre modulos externos. +// O TypeScript expande essa sintaxe ao permitir que tipos +// sejam importados e exportados junto com o código. + +// Vamos ver o import de código de um módulo. + +import { danger, message, warn, DangerDSLType } from "danger"; + +// Aqui importamos um conjunto de import nomeados +// ("named imports") de um módulo do Node chamado danger. +// Apesar de haver mais do que quatro imports, +// esses são os únicos que nós escolhemos importar. + +// Nomeando especificamente quais imports você precisa, +// permite que ferramentas tenham a habilidade de remover +// código não utilizado em seu applicativo, e ajuda você a +// entender o que está sendo utilizado nessa arquivo em particular. + +// Nesse caso: danger, message e warn são imports de JavaScript +// enquanto que DangerDSLType é uma interface. + +// O TypeScript permite que engenheiros documentem seus códigos usando +// JSDoc, e a documentação é importada também. Por exemplo, se você +// passar o mouse sobre diferentes partes abaixo, você verá +// explicações sobre o que elas são. + +danger.git.modified_files; + +// Se você quiser saber como criar essas anotações de documentação +// leia o exemplo:jsdoc-support + +// Outro modo de importar código é através do export +// padrão de um módulo. Um exemplo disso é o módulo debug, o qual +// expõe uma função que cria uma função de log. + +import debug from "debug"; +const log = debug("playground"); +log("Código começou a rodar"); + +// Por conta das exports padrões ("default exports") não terem um nome, +// elas podem ser delicadas de se trabalhar junto com ferramentas de análise estática +// como o suporte a refactoração em TypeScript, mas elas têm o seu próprio uso. + +// Por haver uma longa história sobre import/export de código +// em JavaScript, existe uma parte confusa sobre o export padrão: +// alguns módulos exportados tem documentação que sugere que você possa +// escrever um import como este: + +import req from "request"; + +// Entretanto, isto apresenta uma erro. E então você encontra no +// Stack Overflow uma recomendação de import como esta: + +import * as req from "request"; + +// E este funciona. Por que? Nós vamos voltar a isso no final +// da nossa sessão sobre export. + +// Para realizar um import, você precisa fazer um export. +// O modo moderno de escrever exports é através da palavra-chave export + +/** O número atual de adesivos que sobraram no rolo */ +export const numeroDeAdesivos = 11; + +// Isso poderia ter sido importado em outro arquivo usando: +// +// import { numeroDeAdesivos } from "./caminho/para/o/arquivo" + +// Vocé pode ter tantas importações em um arquivo quantas forem necessárias. +// Já um export padrão é bem parecido com isso. + +/** Cria um adesivo para você */ +const geradorDeAdesivos = () => {}; +export default geradorDeAdesivos; + +// Isto poderia ser importado em outro arquivo usando: +// +// import pegueAdesivos from "./caminho/para/o/arquivo" +// +// O nome é decidido pelo módulo que está realizando o import. + +// Estes não são os únicos tipos de import, apenas os +// mais comuns em código moderno. Há um tópico bem abrangente +// sobre todos os modos que um código pode cruzar as fronteiras +// de um módulo no manual: +// +// https://www.typescriptlang.org/docs/handbook/modules.html + +// Entretanto, para tentar responder a última questão. Se você +// observar o código JavaScript desse exemplo, você verá isto: + +// var geradorDeAdesivos = function () { }; +// exports.default = geradorDeAdesivos; + +// Isso define a propriedade padrão ("default") no objeto exports como +// geradorDeAdesivos. Existe código que define o exports como uma +// função ao invés de um objeto. +// +// O TypeScript optou por utilizar a especificação ECMAScript +// sobre como lidar com esses casos, que é criar um erro. +// Entretanto, existe uma configuração do compilador que lida +// automaticamente com esses casos para você, que é a esModuleInterop. +// +// Se você ativar ela nesse exemplo, você verá que o erro desaparece. diff --git a/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/JSDoc Support.js b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/JSDoc Support.js new file mode 100644 index 000000000000..5105538e1943 --- /dev/null +++ b/packages/playground-examples/copy/pt/JavaScript/Modern JavaScript/JSDoc Support.js @@ -0,0 +1,94 @@ +//// { order: 3, isJavaScript: true } + +// O TypeScript tem um suporte muito rico ao JSDoc, para muitos casos +// você pode até não utilizar arquivos .ts e apenas usar anotações de JSDoc +// para criar um ambiente de desenvolvimento rico. +// +// Um comentário JSDoc é um comentário de múltiplas linhas que +// começam com dois asteriscos ao invés de um. + +/* Este é um comentário normal */ +/** Este é um comentário JSDoc */ + +// Comentários JSDoc pertencem ao código JavaScript mais +// próximo abaixo dele + +const minhaVariavel = "Oi"; + +// Se você passar o mouse sobre minhaVariavel, você pode ver que +// ela tem o texto do comentário JSDoc acima. + +// Comentários JSDoc são um meio de fornecer para o TypeScript e editores +// informação sobre os tipos utilizados. Vamos começar com um fácil, +// definindo o tipo de uma variável como um tipo nativo. + +// Para todos os exemplos, você pode passar o mouse sobre o nome. +// E na próxima linha tente escrever [exemplo] para ver +// as opções de auto-complete. + +/** @type {number} */ +var meuNumero; + +// Você pode ver todas as tags disponíveis no manual: +// +// https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc + +// Entretanto, nós vamos tentar cobrir alguns exemplos a mais aqui. +// Você também pode copiar e colar aqui quaisquer exemplos do manual. + +// Importando tipos para arquivos de configuração em JavaScript. + +/** @type { import("webpack").Config } */ +const config = {}; + +// Criando um tipo complexo para reutilizar em múltiplos lugares: + +/** + * @typedef {Object} Usuario - a conta de um usuario + * @property {string} nome - o nome de usuario + * @property {number} id - um id único + */ + +// Então use-o através do nome do typedef: + +/** @type { Usuario } */ +const usuario = {}; + +// Existe em TypeScript uma definição de tipo em linha ("inline type shorthand") que é equivalente +// e a qual você pode usar para ambos: o type e o typedef. + +/** @type {{ dono: Usuario, nome: string }} */ +const recurso; + +/** @typedef {{dono: Usuario, nome: string}} Recurso */ + +/** @type {Recurso} */ +const outroRecurso; + + +// Declarando uma função com tipos: + +/** + * Adiciona dois números + * @param {number} a O primeiro número + * @param {number} b O segundo número + * @returns {number} + */ +function adicionaDoisNumeros(a, b) { + return a + b; +} + +// Você pode usar a maioria das ferramentas de tipos do TypeScript, como uniões ("unions"): + +/** @type {(string | boolean)} */ +let stringOuBoolean = ""; +stringOuBoolean = false; + +// Estender globais em JSDoc é um processo mais complicado +// que você pode conferir no manual do VS Code: +// +// https://code.visualstudio.com/docs/nodejs/working-with-javascript#_global-variables-and-type-checking + +// Adicionar comentários do JSDoc em suas funções é uma situação +// em que todos ganham. Você tem melhores ferramentas assim como +// todo os consumidores da sua API. diff --git a/packages/playground-examples/copy/pt/JavaScript/Working With Classes/Generic Classes.ts b/packages/playground-examples/copy/pt/JavaScript/Working With Classes/Generic Classes.ts new file mode 100644 index 000000000000..965ba568fa92 --- /dev/null +++ b/packages/playground-examples/copy/pt/JavaScript/Working With Classes/Generic Classes.ts @@ -0,0 +1,95 @@ +//// { order: 3 } + +// Este exemplo é, em sua maioria, em TypeScript, porque é um modo muito +// mais fácil de entender primeiro. Ao fim, nós iremos +// ver como criar a mesma classe, porém utilizando JSDoc. + +// Classes Genéricas são um meio de dizer que um tipo em particular +// depende de outro tipo. Por exemplo, aqui está uma gaveta +// que pode conter qualquer tipo de objeto, mas somente um tipo: + +class Gaveta{`
var name: string = "Danger"
-console.log("Hello, " + danger)
+console.log("Hello, " + name)
`.trim()}This extra : string allow the reader to be certain that name will only be a string. Annotating your variables
diff --git a/packages/typescriptlang-org/src/templates/play-example.tsx b/packages/typescriptlang-org/src/templates/play-example.tsx
index f91a21f80974..28ba241fae55 100644
--- a/packages/typescriptlang-org/src/templates/play-example.tsx
+++ b/packages/typescriptlang-org/src/templates/play-example.tsx
@@ -34,7 +34,8 @@ const Play = (props: Props) => {
return (
{props.pageContext.title}
has not been prepared for the Playground
Try ${latestRelease} or Nightly`
+ return
+ }
+
// @ts-ignore
const re: any = global.require
re.config({
diff --git a/packages/typescriptlang-org/src/templates/tsconfigReference.tsx b/packages/typescriptlang-org/src/templates/tsconfigReference.tsx
index 4416c903070c..00f9a58e29ff 100644
--- a/packages/typescriptlang-org/src/templates/tsconfigReference.tsx
+++ b/packages/typescriptlang-org/src/templates/tsconfigReference.tsx
@@ -74,7 +74,7 @@ const TSConfigReferenceTemplateComponent = (props) => {
return (