3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavascriptとTypscriptの注意点

Posted at

Typescriptのクラス宣言

Typescript(以下TSとする)では、以前のJavascript(以下JSとする)のクラス定義の方法は推奨されないようだ。
なので、class演算子を用いたクラス定義を用いるべきということで、内容をまとめる。

以下は古い宣言方法で、非推奨。

oldClassDeclare.ts
let Person = function(name, age) {
    this.name = name;
    this.age  = age;
}

// Personインスタンスを生成
let taro = new Person('太郎', 20);

以下が新しい宣言方法。

newClassDeclare.ts
class Person {
	private name: string;
	private age: number;
	constructor(name: string, age: string) {
		this.name = name;
		this.age = age;
	}
}

// Personインスタンスを生成
let taro = new Person('太郎', 20);

JSとTSのexport・importまわり

JSやTSでファイル分割して、インポートする機会は多いと思う。
ただ、TSでJSと同じようにインポートすると危険らしいので(理由は不明)、分ける必要があるらしい。
どういうことだろうか。

JSのエクスポート・インポートの仕方

まず、以下のようなJSファイルがあるとする。

jsFunctionUtil.js
function getOK() {
  return "OK";
}

function getNO() {
  return "NO";
}

module.exports = {okFunc: getOK, noFunc: getNO};

外部ファイルの関数を利用する場合は、以下のようにする。

useJsEternalFunction.js
const functionUtil = require("./jsFunctionUtil.js");

console.log(functionUtil.okFunc()); //getOK関数を実行する

TSのエクスポート・インポートの仕方

tsFunctionUtil.ts
export function getOK() :string{
  return "OK";
}

export function getNO() :string{
  return "NO";
}
useTsEternalFunction.ts
import { getOK, getNo } from "./tsFunctionUtil.ts";

console.log(getOK()); //getOK関数を実行する

ちなみに、クラスをexportする場合は、export classでいける。
やっかいなのが、TSであってもJSのエクスポート・インポート方法が使えてしまうというところ。
JSの方法でもいけることはいけるが、不具合が出るらしいので(理由は不明)、正式な方法を使うようにしたい。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?