Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【TypeScript】僕のチートシート

参考になる記事

早く理解したい方は、下記の記事と Udemy を使って最速で学習しましょう!
TypeScriptの型入門 - Qiita
超TypeScript入門 完全パック(2020) | Udemy

書き方の参考になる記事

【JS・TS】コーディングTips集 - Qiita
Typescript型Tips集 - Qiita
読み手にやさしい if 文を書きたい - Qiita

随時更新していきます!!

[TODOリスト]
- デコレータ

変数

const text: string = "text"

// リテラル型
const lite: 'foo' = 'foo'; // 'foo' しか入れることができない

// Union型
const union: string | undefined = "union"

関数

// 引数 返り値 の順で実装
function method(arg: string): number {
  return Number(arg);
}

void

返り値が存在しない場合に void を使用します。

function method(): void {
  console.log('hello');
}

static

  • インスタンスを生成せず、呼び出すことが可能
  • インスタンスを生成していないので、this は使用できない
static handleSomething(event: any) => {
  // 処理
}

interface

interface Message {
  saveMessage(data1: string): Promise<string>
}

クラス

abstract

  • abstract class はインスタンスを生成することができない
abstract class Person {
  // 継承先に explainJob メソッドがいることを保証する
  abstract explainJob(): void;
}

// 継承先
class Engineer extends Person {
  explainJob() {
    // 処理
  }
}

アクセスレベル

public

  • 何も書かない場合と同じなので、基本的に宣言しなくて良い

private

  • 宣言されたクラス内でしか使用できない
  • 継承先でも使用不可

protected

  • public と private の間
  • クラス、継承先では使用できるが、外部では使用できない

implements

implements で実装されているクラスは、interface が持っている条件を全て持っておく必要があります。
条件を満たしていれば、メソッドが増えたり変数が増えたりしても問題ありません。(下記で実装されている experience を指します)

interface Human {
  age: number;
  greeting(message: string): void;
}

class Developer implements Human {
  constructor(public age: number, public experience: number) {
  }
  greeting(message: string) {
    console.log(message);
  }
}

implements 複数の interface を持つことができます。
その場合は、全てのinterfaceの条件を満たす必要があります。

class Developer implements Human, Aaa {
....

interfaceは、継承することも可能です。

interface Nameable {
  name: string;
}
interface Human extends Nameable {
  age: number;
  greeting(message: string): void;
}

ジェネリクス

引数に型を指定することができます。
こうすることで、柔軟な関数やクラスを作成することができます。

function copy<T>(value: T): T {
  return value
}
console.log(copy<string>('hello'))

tfconfig

include

どのファイルをコンパイルするのかを指定します。

"include": ["**/*.ts"]

exclude

特定のTypeScriptのファイルを除くかを指定します。

"exclude": ["node_modules", "mock"]

lib

型の定義
空であれば target によって勝手に値を変えてくれます。

"target": "es6",
// es6 の場合は、下記4つが入ることになります。
"lib": ["es6","DOM", "DOM.Iterable", "ScriptHost"],

sourceMap

ブラウザでTypeScriptを理解できるようにする設定します。
主にブラウザに source にTypeScriptを表示させ、デバッグしたい時に使用します。

Node と TypeScript

準備

インストール

npm install typescript --save-dev
npm install @types/node --save-dev

tsconfig.jsonの初期化

npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

参考記事

Node.js & TypeScriptのプロジェクト作成 - TypeScript Deep Dive 日本語版
TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita
Node.js(TypeScript)を食わず嫌いしてる人にオススメするときに役立ちそうな知見まとめ - Qiita

外部モジュール読み込み方

Typescriptの内部・外部moduleの使い方 - Qiita

型の互換性

TypeScript/doc at master · microsoft/TypeScript · GitHub

sanoyo
自衛隊からソフトウェアエンジニア
https://note.com/yokosano
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。
https://community.camp-fire.jp/projects/view/280040
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away