typescript

LittlePocket.Lab

What’s this?

typescriptはjavascriptと互換性のある言語。

  • javascriptと違って静的型付けを採用していて、型によるエラーを未然に防ぐことができる。
  • typescriptそのままではjavascriptのように何かを実行できず、javascriptへコンパイル（トランスパイル）する必要がある。
  • 基本Javascriptは変数・関数・クラスなどはファイル内で完結しているが、import,exportを使うことで変数・関数・クラスなどをモジュール間でやり取りができる。
  • モジュールのJavaScriptは常にstrict mode。
  • .jsを.tsと同じ場所に出力するようにしているとTypeScriptにとって同じ名前の読み込ことができるファイルがふたつ存在することになります。このときTypeScriptは.jsを優先して読み込む
  • また指定したパスがディレクトリで、その中にindex.js(index.ts)があれば、ディレクトリの名前まで書けばindex.js(index.ts)を読み込んでくれます。

出てくる用語の説明

import、export、require

importは他のモジュールをファイル内に読み込むことができる。
exportは逆に、呼び出し元のモジュールに関数・関数・クラスなどを公開できる。
JavaScriptのモジュールは、明示的にexportをつけた値だけが公開され、他のモジュールから参照できます。

module.exports

module.exports
他のファイルを読む込むためにはそのファイルは何かを出力している必要があります。そのために使うのがこの構文です。

increment.js
module.exports = (i) => i + 1;

このmodule.exportsはひとつのファイルでいくらでも書くことができますが、適用されるのは最後のもののみです。

module.exports = "Monday";
module.exports = "Tuesday";
module.exports = "Wednesday";
module.exports = "Thursday";
module.exports = "Friday";
module.exports = "Saturday";
module.exports = "Sunday";
exports

module.exportsだと良くも悪くも出力しているものの名前を変更できてしまいます。それを避けたい時はこのexportsを使用します。

exports.increment = (i) => i + 1;
const util = require("./util");
 
console.log(util.increment(3));
4

References

  • https://udemy.benesse.co.jp/development/system/typescript.html
  • https://typescriptbook.jp/reference/import-export-require