TypeScriptはタイプ構文を備えたJavaScriptです。

TypeScriptは、JavaScriptを基盤とする強力な型付けのプログラミング言語であり、あらゆる規模でより優れたツールを提供します。

今すぐTypeScriptを試す
オンラインまたはnpm経由
ts
const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
}
 
console.log(user.name)
Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 
ts
const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
}
 
console.log(user.name)
Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.2339Property 'name' does not exist on type '{ firstName: string; lastName: string; role: string; }'.
 

TypeScript5.4 が利用可能になりました

TypeScriptとは？

JavaScriptとその先へ

TypeScriptは、JavaScriptに追加の構文を追加して、エディターとのより緊密な統合をサポートします。エディターで早期にエラーをキャッチします。

信頼できる結果

TypeScriptコードはJavaScriptに変換され、JavaScriptが実行される場所であればどこでも実行できます：ブラウザ、Node.jsまたはDeno、そしてあなたのアプリで。

大規模な安全性

TypeScriptはJavaScriptを理解し、型推論を使用して、追加のコードなしで優れたツールを提供します。

はじめに

ハンドブック
言語を学ぶ
プレイグラウンド
ブラウザで試す
ダウンロード
TypeScriptをインストールする

TypeScriptを段階的に導入する

JavaScriptプロジェクトに段階的に型を適用することで、各ステップでエディターのサポートが向上し、コードベースが改善されます。

この誤ったJavaScriptコードを見て、TypeScriptがエディターでどのようにミスをキャッチできるかを見てみましょう。

js
function compact(arr) {
    if (orr.length > 10)
        return arr.trim(0, 10)
    return arr
}

JavaScriptファイルにはエディターの警告がありません

このコードは実行時にクラッシュします！

JavaScriptファイル

js
// @ts-check
 
function compact(arr) {
  if (orr.length > 10)
Cannot find name 'orr'.2304Cannot find name 'orr'.
    return arr.trim(0, 10)
  return arr
}

これをJSファイルに追加すると、エディターにエラーが表示されます

パラメータはorrではなくarrです！

TS Check付きJavaScript

js
// @ts-check
 
/** @param {any[]} arr */
function compact(arr) {
    if (arr.length > 10)
      return arr.trim(0, 10)
Property 'trim' does not exist on type 'any[]'.2339Property 'trim' does not exist on type 'any[]'.
    return arr
  }

JSDocを使用して型情報を提供する

TSは誤った呼び出しを見つけました。配列にはtrimではなくsliceがあります。

JSDoc付きJavaScript

ts
function compact(arr: string[]) {
  if (arr.length > 10)
    return arr.slice(0, 10)
  return arr
}

TypeScriptは型を提供するための自然な構文を追加します

TypeScriptファイル

データの記述

コード内のオブジェクトと関数の形状を記述します。

エディターでドキュメントと問題を確認できるようにします。

ts
interface Account {
  id: number
  displayName: string
  version: 1
}
 
function welcome(user: Account) {
  console.log(user.id)
}
ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}

TypeScriptはDeleteキーでJavaScriptになります。

ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

TypeScriptファイル.

ts
type Result = "pass" | "fail"
 
function verify(result: Result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

型が削除されます.

js
 
 
function verify(result) {
  if (result === "pass") {
    console.log("Passed")
  } else {
    console.log("Failed")
  }
}
 

JavaScriptファイル.

TypeScriptの testimonials

まず、コードを変換したときに、多くの小さなバグが見つかったことに驚きました。

次に、エディター統合の強力さを過小評価していました。

TypeScriptは、安定性と健全性に非常に役立ったため、変換を開始してから数日以内に、すべての新しいコードにTypeScriptを使用し始めました。

SlackのFelix Riesebergは、ブログでデスクトップアプリのJavaScriptからTypeScriptへの移行について説明しています

読む

TypeScriptでオープンソース

Angular

Vue

Jest

Redux

Ionic

Probot

Deno

Vercel

Yarn

GitHub
Desktop

開発者に愛されています

Image of the stack overflow logo, and a graph showing TypeScript as the 2nd most popular language

Stack Overflow 2020開発者調査で2番目に愛されているプログラミング言語に選ばれました

Logo of the State of JS survey

TypeScriptは、2020 State of JSの回答者の78％によって使用され、93％が再び使用すると回答しました。

TypeScriptは、前年比の成長に基づいて「最も採用されたテクノロジー」賞を受賞しました。

はじめに

ハンドブック
言語を学ぶ
プレイグラウンド
ブラウザで試す
ダウンロード
TypeScriptをインストールする