あなたのタイプだけ: JavaScript と TypeScript を右にスワイプ-jsチュートリアル-php.cn

Just Your Type: Swiping Right On JavaScript and TypeScript

Web 開発は、コーディングの世界の西部のように感じることがあります。使用するフレームワークやライブラリは非常に多く、圧倒されるように感じることもよくあります。もしあなたがそのように感じているなら、私はあなたが一人ではないことを伝えたいと思います。見習いを始めたとき、自分の技術スタックにどの技術を追加したいか迷っていました。フロントエンド開発が好きだということはわかっていましたが、この分野のスキルを磨くにはどのような道を歩めばよいのかわかりませんでした。そこで私は、何かわからないことがあれば、より経験のある人に聞くという最善の方法をとろうと決めました。私がメンターに相談したところ、TypeScript はすぐに多くの企業の開発チームで貴重な資産になったと教えてくれました。さらに調査を行ったところ、TypeScript が非常に魅力的であることがわかりました。私は細部にこだわる人間なので、TypeScript の粒度は楽しくて新しいコーディング方法を提供してくれました。
最初は不安だったので、小さなスケッチを書くことにしました。私のジレンマは、深夜に何も考えずに見ていたかもしれない、あるいは見なかったかもしれないデート番組を思い出させたので、それをスケッチの設定として使用することにしました。さっそくご紹介します:

フルスタックいちゃいちゃ

[ファンキーなイントロ音楽演奏]

ルーク L. ホスト: 「フルスタックイチャイチャ」へようこそ! Luke L. 唯一の真実の愛を探している別の開発者と一緒にここに戻ってきました。私たちのスターは本番に向けて心を動かしてくれるでしょうか？それともシングルに戻るのでしょうか？プログラマーを探して会いましょう。

[プログラマーが入力]

ニコル: こんにちは、ルーク、ここに来られて嬉しいです。

ホスト: よろしくお願いします!さて、あなたの名前は何ですか、そしてここでの小さな生産から何を得ることを望んでいますか?

ニコル: 私はニコールです。永久的な技術スタックのローテーションにどの言語を追加するべきかを決めようとしています。今日は二人の求婚者を連れてきました。私の昔の友人である JavaScript、そして私の突然の求婚者である TypeScript。

ホスト: 辛そうですね!今すぐ私たちの 2 つの言語に触れてみませんか?

[言語を入力してください]

JAVASCRIPT: 皆さん、こんにちは。私はJavaScriptです。

TYPESCRIPT: 私は TypeScript です。

ホスト: お二人にお会いできて嬉しいです!さて、ニコール、早速本題に入りましょう。JavaScript については、しばらく前から使われています。 Nicole の技術スタックにとってあなたが最良の選択である理由は何ですか?

JAVASCRIPT: そうですね、ルーク、私は何十年もウェブのバックボーンを担ってきました。私は信頼できて柔軟性があり、構文を理解するのが非常に簡単です。さらに、私には巨大なコミュニティがあります。私に関して言えば、スタックオーバーフローがあなたの親友になります。

ホスト: すごいですね、でもちょっと…荷物があるみたいですね？おそらくレガシー品種でしょうか?

JAVASCRIPT: こんにちは、今、最新化しています! ES6 の登場により、私はこれまで以上に向上しました。

ホスト: メモしました。さて、TypeScript さん、あなたが求婚者として際立っている理由は何ですか?

TYPESCRIPT: そうですね、ルーク、JavaScript の優れた点をすべて取り入れて、少し構造を追加します。私は JavaScript に似ていますが、それよりも優れています。エラーを防止し、デバッグを簡単にします。 Nicole のような開発者には、より安全で信頼できるものが必要です。私に似ています。

ホスト: 安全で信頼性が高く、プログラマーの耳に音楽を届けます。しかし、あなたは少し…メンテナンスに手間がかかると言う人もいます?

TYPESCRIPT: 全然違います、ルーク。一度私のことを知ってしまうと、とても親しみやすいです。 Nicole が JavaScript を知っていれば、私に移行するのは簡単です。

ホスト: ニコール、あなたはかなりの決断を迫られていますね。 JavaScript は懐かしさとシンプルさをもたらしますが、TypeScript は、私たち全員が愛とコードに切望するセーフティネットを提供します。コミットする準備はできていますか? それとも、さらにいくつかの機能デモが必要ですか?

ニコル: さらにいくつかのテストを実行する必要があると思います…

ホスト: さて、実際の詳細、つまりコードの互換性について掘り下げてみましょう。 JavaScript、TypeScript、ニコールの注目を集めていますが、今度は最高の機能を披露するときです。 JavaScript、始めてみませんか?

JAVASCRIPT: うれしいです!私の場合は、シンプルにしておくのが好きです。変数を宣言する方法は次のとおりです:

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

ログイン後にコピー

型や余計なものはなく、純粋な、フィルターされていないコードだけです。カジュアルで簡単。

ホスト: 気楽ですが、少し…カジュアルすぎると言う人もいるかもしれません。 TypeScript さん、あなたはどうですか?

TYPESCRIPT: ルーク、私は人間関係が少し明確になるのが好きです。これを見てください:

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

ログイン後にコピー

わかりますか?ニコールがどのような種類のデータを扱っているかについて混乱がないようにします。強力なコミュニケーションが鍵となります。

ニコル: うーん、私は明確さが大好きです…JavaScript、これを実行しようとするとどうなりますか?

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

ログイン後にコピー

JAVASCRIPT: 見てください、私は柔軟です!好きな食べ物を数字にすることはできないと誰が言ったでしょうか?私は流れに身を任せることが大切です。

TYPESCRIPT: そこで私の出番です、ニコール。あなたがコードを実行する前に、私ならその間違いに気づいていたでしょう:

// Error: Type 'number' is not assignable to type 'string'.

ログイン後にコピー

わかりますか？いつもあなたを応援しています。

ホスト: さて、関数について話しましょう。 JavaScript、どのように処理しますか?

JAVASCRIPT: 私は物事をオープンエンドにしておくのが好きです。 Nicole が 2 つの数値を加算する関数を書きたいとします:

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

ログイン後にコピー

ニコールがそこに紐を滑り込ませても大したことはありません。私がうまくやってみます!

TYPESCRIPT: 機能させますか?それはまさに持続可能な基盤とは言えません。ニコール、私は事前に期待を設定することが大切だと信じています:

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

ログイン後にコピー

私の場合、推測する必要はありません。入力と出力は非常に明確です。

ニコル: うわー、あなた方二人は本当に違うアプローチをしていますね。 JavaScript、あなたはとても適応力があります…しかし、TypeScript、あなたは私が必要だとは知らなかったセーフティネットのようなものです!

ホスト: 私たちの最愛の開発者には考慮すべきことがたくさんあるようですね!最後の質問に移りましょう。チームワークに対するあなたのアプローチは何ですか?フルスタックアプリのような、大規模で複雑な関係ではどのように作業しますか?

JAVASCRIPT: チームワーク?私はコラボレーションの混乱の中でも成長します。どこにいても、誰とでも統合できます。ここでは、Promise を使用して非同期作業を処理しています:

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

ログイン後にコピー

私は率直で順応性があります。

TYPESCRIPT: もちろんですが、正直に言うと、JavaScript は大きなチームでは少しずさんになることがあります。私は関係に構造と説明責任をもたらします:

// Error: Type 'number' is not assignable to type 'string'.

ログイン後にコピー

わかりますか？私は誰もが何が起こるかを正確に知っていることを保証します。驚きも不要なドラマもありません。

ホスト: ニコール、この 2 つのことで手一杯ですね。 JavaScript の冒険心と TypeScript の信頼できる構造のどちらが必要ですか?その決定はあなたに任せると思います - 次回のフルスタック・イチャイチャまで!

[ファンキーなアウトロ音楽演奏]

調査を通じて、他の人が学習を促進するのに役立つと思われる TypeScript についていくつかの重要な教訓を学びました。

JavaScript の基礎から始める: まず JavaScript を理解すると、TypeScript への移行がはるかに簡単になります。
TypeScript は、JavaScript を置き換えるのではなく追加します。TypeScript は、Web 開発ツールボックスの別のツールと考えてください。
スケーラビリティを念頭に置く: 大規模なプロジェクトやチームで作業する場合、TypeScript の構造は小さな問題を防ぐことで威力を発揮します。大きな問題に発展しないように。

このスケッチの最後からわかるように、私自身、主要なコーディング言語として TypeScript と JavaScript のどちらを使用するかまだ迷っています。どちらにも長所と短所があります。 TypeScript への私の取り組みは興味深いものでした。独自の機能の適用に慣れるために、小規模プロジェクトを構築して TypeScript の学習を続けていきます。このプロジェクトを作成する際には、Vite や React など、すでに使い慣れているテクノロジーの実装を試みます。また、Next.js ドキュメントをさらに深く掘り下げて、それを最大限に活用する方法を学ぶ予定です。

TypeScript を自分で始めたいと考えている場合は、役立つと思われるリソースをいくつか紹介します。