typescriptメモ
bayamasatsconfig.json
{
"compilerOptions": {
"outDir": "./dist",
// 出力されるjsのversion。現状のブラウザに対応しているものであればよい。
"target": "ES5",
// exportの形式 commonjsだとnode使用、amdだとブラウザ使用などの方式がある
// https://qiita.com/nanocloudx/items/70f1316debf05b93ac82
// es2015はexportを使った規格で、対応していないブラウザも存在する
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export#browser_compatibility
"module": "es2015"
},
"include": [
"src/**/*"
]
}
こちらを参考にしてやっていく
bayamasareadonly = const
classのアクセス制御のprivate, publicと併用化
readonlyを使ったときは、定義時 or constructor内のみで定義できる
bayamasatypescriptは小数もnumberを使うらしい。
floatとかdouble的なものはない。
bayamasaimport exportができないので、同じファイルに定義を追加して対応
bayamasaUncaught SyntaxError: Cannot use import statement outside a module
上記のようなエラーが出力されて、importできない
bayamasaSolution 1 – Add “type”: “module” to package.json
やってみたけどだめ
bayamasaIf you are using TypeScript, we need to edit the tsconfig.json file and change the module property to “commonjs“, as shown below.
tsconfigのmoduleをes2015→commonjsに変えたらできた
bayamasaできたけどレンダリングがされない...
bayamasascriptタグの中身をtypemoduleにしたらCORSでたり、exportよみこめなかったりするのであきらめ
bayamasatext/javascriptとapplication/javascriptの違い
要はapplicationのほうが新しいということらしい
bayamasaそもそもwebで動かすplainなhtmlにjavascriptからjavascriptをimportするといった機能はない。
多分。
なので、module化したjavascriptを他のjsに読み込む際には、サーバーを介して実行する必要がある。
nodeやphpを使って起動させる必要がある。
bayamasahttp-serverなるものをつかってみたが、反応なし。
多分nodeの機構だからrequire構文を使わないといけないかも
おとなしくreactいれたほうが早そう
bayamasanextjsにtypescirpt導入
bayamasapagesにおける引数の渡し方
基本的にpagesはバケツリレーの先頭になるから、引数は親コンポーネントとかではなく、apiからになる。
となるとgetInitialPropsとの複合的な扱いになる。
サンプルは以下
bayamasapages/about.tsx それっぽいのができた
import type { NextPage } from 'next'
interface Props {
hello?: string;
}
const About: NextPage<Props> = ({hello}) => {
return (
<>
<div>about</div>
<div>{hello}</div>
</>
)
}
About.getInitialProps = () => {
const hello = "hello"
return { hello }
}
export default About
apiはapi/ファイル名と叩けば帰ってくる
localhost:3001/api/hello ← これでデフォルトで作成されているapiが帰る
bayamasareactでcanvasを使おうとしたが、相性がよくなさそうなので、こちらを参考に作っていこうかなと