typescript を始める方法。

やあ、

もしあなたがこの記事を読んでいるなら、私の最初のテクニカル ライティング ブログ投稿にアクセスしていただき、特別に感謝したいと思います。

中国のことわざに「千里の道も一歩から始まる」というものがあります。

まず、私の名前はアベル・エマニュエルです。ソフトウェア開発者、オープンソースの貢献者、提唱者です。謙虚な私自身のお誕生日おめでとうございます。

2024 年 12 月 20 日の今日、私は Typescript とテクニカル ライティングの学習を始めました。私は Typescript のことはよく知っていましたが、その重要性、有用性、豊富な機能、そしてそれがより良いコードを書くのにどのように役立つかについては初めて知りました。

理想的には、Typescript のことを知った時期に、もっと早くからそれを学ぶことを拒否しました。私は、Typescript を必要とする仕事に就くまで、Typescript は JavaScript と同じ構文を持ち、すべてが JavaScript と同じであるため、学習するメリットはないと結論付けました。

これが、私が Typescript を正しく学習し始めた方法です。そうでない場合でも、Typescript のことを完全に意識したことになります。

今日は、Typescript の基本とその重要性、そしてコードに記述するエラーを減らすのに Typescript がどのように役立つかを共有したいと思います。

JavaScript は生まれた時から C、C、C#、Rust やその他の低レベル プログラミング言語のような型付き言語ではありません。

型付き言語では、変数と値には型があります。

これは、実際的な例として C プログラミング言語を使用した型付き言語の意味です。

JavaScript で変数を定義する例:

let x = 5
typeof x    //number

JavaScript では、x を文字列値に再代入できます。

x = "Emmanuel"
typeof x    //string

変数に値のデータ型を認識させる必要がある C プログラミング言語のような低水準言語と比較してください。例:

init x =  5
float y = 0.5

変数 x と y を再割り当てしようとすると、エラーがスローされます。ただし、JavaScript は型付けが緩い言語であるため、コードに多くのバグが発生する可能性があります。

これを回避するには、Typescript と呼ばれる JavaScript のスーパーセットが必要です。 Typescript は、プログラムを実行する前にプログラム内のエラーをチェックするのに役立つ静的型チェッカーです。

始めましょう
Typescript をプロジェクトにグローバルまたはローカルにインストールします。
npm install -g typescript

フォルダーを作成し、typescript という名前を付けます。

フォルダー (typescript) を右クリックし、Visual Studio コードで開き、ファイル test.ts を作成します。

それが完了したら、次のステップはタイプスクリプトの作成を開始することです。

test.ts ファイル内で、ファイル内のコードをコピーして貼り付け、実行します。

console.log("Hello world");

typescript ファイルを実行します。コマンド ライン インターフェイス (CLI) と tsc test.ts を開きます。このコマンドは typescript ファイルを実行します。

注: typescript をインストールしない場合、CLI で tsc にアクセスできません。

実行後、CLI では目立った変化はありませんが、フォルダー内に新しいファイル test.js が存在することがわかります。

test.js ファイルを開くと、実行したコマンドによって test.ts 内のすべてが test.js に出力されることがわかります。

コードに型を含めてみましょう。 Javascript でどのように見えるかを見てみましょう。

let x = 5
typeof x    //number

tsc test.ts を実行します。特別なことは何も起こりませんでした。
ただし、関数呼び出し meets() が meets(7) のように 1 つの引数を取得すると仮定します。

Typescript はエラーを示します。

x = "Emmanuel"
typeof x    //string

通常、JavaScript の世界ではコードはクールですが、それは私たちが望んでいたものではありません。したがって、実行時にエラーがスローされない場合でも。 Typescript は、問題を事前に特定するのに役立ちます。これは typescript の素晴らしい部分です。バグの少ないコードを書くのに役立ちます。

このコードを調べてみましょう。

init x =  5
float y = 0.5

関数 meets(name: string, id:number)、追加の :string および :number に注意してください。これは、引数文字列と数値を期待していることを示しています。それ以外の場合、コードはエラーをトリガーします。

関数は型を返します
関数が特定の型を返すようにすることができます。

console.log("Hello world");

オブジェクト型

function meet(name, id){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.

その他のプリミティブ型の注釈。

Expected 2 arguments, but got 1.ts(2554)
test.ts(1, 21): An argument for 'id' was not provided.

結論として、Typescript は、より優れた JavaScript を作成し、バグを減らすのに役立つ型付き言語です。詳細については、Typescript 公式 Web サイト: Typescript をご覧ください。

この投稿が役に立ったと思われる場合はお知らせください。改善するためのより良い方法がある場合は、喜んで学びます。私の最初の投稿を読んでいただきありがとうございます。

素晴らしいコンテンツを共有している Twitter で私をフォローしてください。

以上がtypescript を始める方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。