Posted at

JavascriptとTypscriptの注意点

More than 1 year has passed since last update.


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の方法でもいけることはいけるが、不具合が出るらしいので(理由は不明)、正式な方法を使うようにしたい。