blog

Typescriptを使い始める

基本型、つまり直接使用できる単一の型。 2.複合型:複数の単一型を含む型。 Nullable 型:デフォルトでは、どの型にも null または undefined を代入することができます。 Joi...

Nov 6, 2020 · 2 min. read
シェア

Typescript 型とは

1.タイプスクリプト 基本型、つまり直接使用できる単一の型。

  • 数値
  • 文字列
  • ブール型
  • null
  • undefined
  • any
  • unknown
  • void
  • object
  • 列挙
  • never

2.複合型:1つの型に複数の型を含むもの。

  • 配列型
  • タプル型
  • リテラル型
  • インターフェースの型

3.あるタイプが要件を満たさない場合は?

  • Nullable 型は、デフォルトではどの型にも null または undefined を代入することができます。
  • ジョイントタイプ。どのタイプかは不明ですが、例えばtype1 | type2のように、いくつかの選択肢を提供することができます。
  • クロスタイプ。type1とtype2のように、2つ以上のタイプの組み合わせを満たさなければなりません。

すべてのタイプの使用場所

Typescript では、型は通常以下のような状況で使用されます。

  • 変数での使用
  • クラスでの使用
  • インターフェースでの使用
  • 関数での使用

変数での使用

変数で使用する場合は、変数の後に直接型を追加するだけです。

let a: number;
let b: string;
let c: null;
let d: undefined;
let e: boolean;
let obj: Ixxx = {
 a: 1,
 b: 2,
};
let fun: Iyyy = () => {};

クラスでの使用

クラスでも変数と同様に使用されますが、いくつかの静的プロパティ、静的メソッド、メンバ・プロパティ、コンストラクタの型など、クラス用に特別に設計されたものが用意されている点が異なります。

class Greeter {
 static name:string = 'Greeter'
 static log(){console.log(ログ')}
 greeting: string;
 constructor(message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}
let greeter = new Greeter("world");

インターフェースでの使用

また、複数の単一型を組み合わせたものとして理解できるインターフェイスでの使用も比較的簡単です。

interface IData {
 name: string;
 age: number;
 func: (s: string) => void;
}

関数内での型の使用

関数の中で型を使用する場合、主に関数のパラメータや関数の戻り値を扱うために使用されます。

// 関数の引数
function a(all: string) {}
// 関数の戻り値
function a(a: string): string {}
// オプションのパラメータ
function a(a: number, b?: number) {}
Read next

Vue開発のヒント

ウォッチ機能は、リスナーのプロパティが変更されたときに起動されます。 コンポーネントで $route を使用すると、対応するルートとの結合が強くなり、特定の URL への使用が制限されるため、柔軟性が制限されます。

Nov 6, 2020 · 2 min read