import の色々

{ } 無し import

export default されているモジュールは { } 無しで読み込む。
import する時に名前を付けられる。

module.js

export default "123";

App.js

import num from "./module";

{ } で import

default でないものを読み込むとき。
export 側で名前が決まっているので、読み込む対象を { } の中に指定する。
import 側で名前を変えたい時は as を使う。

module.js

export const num = "123";

App.js

import { num } from "./module";
import { num as moduleNum } from "./module";

@ 付きの import

TypeScript 用の型情報ファイル（〜.d.ts）は @ から始まるパスで指定されていることが多い。

App.js

import { i18n } from "@lingui/core";

きのこのこ

Interface と type

宣言の仕方

interface Kinoko {
  name: string;
  height: number;
}

type TKinoko = {
  name: string;
  height: number;
};

拡張

Interface は extends (継承)で拡張。
type は & (交差)で拡張。

interface Kinoko {
  name: string;
  height: number;
}

interface Kinoko2 extends Kinoko {
  weight: number;
}

同じ名前で再宣言しても拡張される。

interface Kinoko {
  name: string;
  height: number;
}

interface Kinoko {
  weight: number;
}

type TKinoko = {
  name: string;
  height: number;
};

type TKinoko2 = TKinoko & {
  weight: number;
};

きのこのこ

Interface の中の関数

関数型

interface SearchFunction {
  (src: string, sub: string): boolean;
}

const mySearch: SearchFunction = function(arg1, arg2) {
  return true;
}

ハイブリッド型

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}

let counter: Counter = function(start: number) { return "a"};
counter.interval = 123;
counter.reset = function() {};

counter(10);
counter.reset();

きのこのこ

tsconfig.json の設定が反映されない

VSCode なら、Cmd+Shift+P して、 > Typescript: Restart TS Server. を実行する。