参考になる記事
早く理解したい方は、下記の記事と 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
