import・export チートシート

変数

export const name = "Mike";
export const age = 23;

または

const name = "Mike";
const age = 23;

export { name, age };

import { name, age } from "./sample1";
console.log(name, age);
//Mike 23

as

変数名を変更できる

const name = "Mike";
const age = 23;

export { name as mike, age };

import { mike, age } from "./sample1";
console.log(mike, age);
//Mike 23

または

const name = "Mike";
const age = 23;
export { name, age };

import { name as mike, age } from "./sample1";
console.log(mike, age);

関数

export const sayHello = () => {
  return "hello";
};

import { sayHello } from "./sample1";
console.log(sayHello());

defaultエクスポート

export default "default";

import aaa from "./sample1";
console.log(aaa);
//default

なんという変数名を付けるかは、import側で決めることができる。

両方ある場合

export const sayHello = () => {
  return "hello";
};

export default "default";

import aaa, { sayHello } from "./sample1";
console.log(sayHello());
console.log(aaa);
//hello
//default

これはReactとuseStateをimportするときによく見る。

defaultの正体

defaultエクスポートは、暗黙のうちに変数を用意して、defaultという名前でexportする機能。

つまり

const age 23;

export default {　ages default　}

import {　default as old　} from "./sample1";
//oldが使用できる

みたいなことが行われている。

型

type animal = {
  name: string;
  age: number;
};

const dog: animal = {
  name: "dog",
  age: 3,
};

export { animal, dog };

import { animal, dog } from "./sample1";
const myDog: animal = { ...dog };

型もexport/importできる。

type export

type animal = {
  name: string;
  age: number;
};

const dog: animal = {
  name: "dog",
  age: 3,
};

export type { animal, dog };

import { animal, dog } from "./sample1";

// error
const myDog1: animal = { ...dog };

const myDog2: typeof dog = {
  name: "dog",
  age: 3,
};

type export を使用すると、値として使用できなくなる。
type of とともに型として、使用できる。

type import

type animal = {
  name: string;
  age: number;
};

const dog: animal = {
  name: "dog",
  age: 3,
};

export { animal, dog };

import type { animal, dog } from "./sample1";

// error
const myDog1: animal = { ...dog };

const myDog2: typeof dog = {
  name: "dog",
  age: 3,
};

次のようにもかける

import type { animal } from "./sample1"
import { dog } from "./sample1"

import  { dog, type animal } from "./sample1"

* アスタリスク

一括インポート

const name = "Mike";
const age = 23;

export { name, age };

import * as xxx from "./sample1";
const age = xxx.age;
const name = xxx.name;
console.log(age, name);
//23 Mike

これはReactでよく見る。

import * as React from "react";
const [value,setValue] = React.useState()