サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

00.javascript:10.typescript


10.TypeScript

TypeScriptとは

TypeScriptは、JavaScriptを拡張したプログラミング言語で、

  1. 静的型付け(JavaScriptは動的型付け)
  2. classベースのobject指向(JavaScriptはprototypeベース)

が特徴的です。


interface

<T>

const { Camera, Filesystem, Storage } = Plugins;
    const photos = ref<Photo[]>([]);


function todaysMeal(food: string, energy: number): string {
  return `My ${food} has ${energy} calories`
}

http://www.tohoho-web.com/ex/typescript.html
TypeScript入門

https://qiita.com/k-penguin-sato/items/72b21d4bfb631665c342
@k-penguin-sato
2020年04月04日に更新
ざっくり入門TypeScript

https://qiita.com/k-penguin-sato/items/9baa959e8919157afcd4
@k-penguin-sato
2020年07月22日に更新
【TypeScript】Generics(ジェネリックス)を理解する

https://qiita.com/nogson/items/86b47ee6947f505f6a7b
@nogson
2017年04月17日に更新
Typescriptのinterfaceの使い方

https://udemy.benesse.co.jp/development/system/typescript.html/amp
システム開発
2020/03/16
TypeScriptを入門者向けに解説!JavaScriptとの違いや勉強法までわかりやすく

TypescriptをJavaScriptに変換

TypeScriptリンク

https://typescript-jp.gitbook.io/deep-dive/getting-started
TypeScript Deep Dive 日本語版

https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
@shibukawa
2020年07月26日に更新
イマドキのJavaScriptの書き方2018

https://future-architect.github.io/typescript-guide/
仕事ですぐに使えるTypeScript


プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 (日本語) 単行本(ソフトカバー) – 2020/3/16
Boris Cherny (著), 今村 謙士 (監修), 原 隆文 (翻訳)

https://www.webopixel.net/javascript/1584.html
さらっとTypeScript入門
→型について例が豊富

https://simple-it-life.com/2020/10/28/typescript/
TypeScript入門の入門
Published: 2020年10月28日 by tomsato

https://tech-blog.rakus.co.jp/entry/20201119/typescript
2020-11-19
TypeScript入門 ~JavaScript入門者が脱TypeScript初心者するまで~

https://descartes-search.com/media/why-you-should-learn-typescript/
需要急上昇で学習コスパ最強!TypeScript(タイプスクリプト)の特徴と将来性
2020年10月9日

https://fumiononaka.com/Business/html5/FN1804003.html
TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く

TypeScriptの開発環境構築

流れ

  1. yarn init -y
  2. yarn add -D parcel
  3. src/index.htmlの作成
  4. src/index.tsの作成
  5. src/index.scssの作成
  6. yarn run parcel src/index.html --open
  7. yarn run parcel build src/index.html

https://ics.media/entry/190325/
TypeScriptのビルドにオススメ!
Parcel入門
2019年3月28日 公開 / 株式会社ICS 鹿野 壮
→ソースコード https://github.com/ics-creative/190325-parcel-typescript

https://qiita.com/EBIHARA_kenji/items/31b7c1c62426bdabd263
@EBIHARA_kenji
2019年11月22日に更新
TypeScript チュートリアル

→上記サイトを写経した経過:https://i-doctor.sakura.ne.jp/font/?p=45737

そのソースコード:https://github.com/adash333/typescript-webpack

https://maku.blog/p/ucnv6en/
webpack と TypeScript を組み合わせて使用する
20200705
→写経した経過:https://i-doctor.sakura.ne.jp/font/?p=45828

ソースコード:

https://qiita.com/takeshisakuma/items/e1ba5dbe052c6194bb79
@takeshisakuma
2020年11月16日に更新
Web制作向けwebpack

https://www.webdesignleaves.com/pr/jquery/webpack_basic_01.html
webpack の基本的な使い方
→超丁寧です。

https://note.com/youheyhey0505/n/n64771d0989a3#TVI4U
webpackでCSS/Sass/img画像をコンパイルする方法
りゅーそう
2019/09/25 10:57

https://qiita.com/SYM_simu/items/831c13606df8bc1d7baf
@SYM_simu
2020年07月19日に更新
webpack4 で sass/tsファイル群を変換&バンドルしてhtmlと一緒に別フォルダに配置する

https://www.google.com/amp/s/ics.media/entry/19580/
Sassの変換にオススメ!
Parcel入門
2020年2月14日 メンテナンス済み / 株式会社ICS 鹿野 壮

リンク

https://ics.media/entry/12140/
最新版で学ぶwebpack 5入門
JavaScriptのモジュールバンドラ
2020年12月6日 メンテナンス済み / 株式会社ICS 池田 泰延

https://blog.ouvill.net/blog/2019-04-17--webpack-sass-typescript/webpack-sass-typescript/
webpack を使って、Sass、TypeScript を利用できる開発環境を作成する。
2019/04/17
→これを写経したい

できればさらにbulmaを適用したい
https://bulma.io/documentation/customize/with-webpack/

https://chaika.hatenablog.com/entry/2019/01/20/090000
2019.01.20
yarn globalにインストールする時に気をつけること

yarn global add (プロジェクト名)

JavaScriptの正規表現オブジェクト
http://www.tohoho-web.com/js/regexp.htm#newRegExp2
→JavaScriptで正規表現を使用するときは

/ABC/

のように/で挟む。

https://qiita.com/iLLviA/items/b6bf680cd2408edd050f
@iLLviA
2018年08月19日に更新
JavaScript 正規表現まとめ

https://techacademy.jp/magazine/34367
JavaScriptの正規表現でエスケープが必要な文字を現役エンジニアが解説【初心者向け】
→予約語はバックスラッシュ\をつけて記載する(これをエスケープすると言う。)。例えば、ピリオドの場所は、JavaScriptでは以下のように記載する

/\./

https://dev.classmethod.jp/articles/yamada-san-altjs-webpack-example/
@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた
2017.06.08

https://qiita.com/righteous/items/e5448cb2e7e11ab7d477
@righteous
2020年03月11日に更新
【初心者向け】NPMとpackage.jsonを概念的に理解する

https://speakerdeck.com/wakamsha/rmp-enziniabutokiyanpu-2017-youkoso-web-hurontoendofalseshi-jie-he?slide=22
RMP エンジニア・ブートキャンプ 2017 - ようこそ web フロントエンドの世界へ

https://www.google.com/amp/s/ics.media/entry/19384/
npmから乗り換えてわかった
Yarnの4つのメリット
2018年11月2日 公開 / 株式会社ICS 鹿野 壮

https://dev.classmethod.jp/articles/node-npm-npx-getting-started/
知らないのは損!npmに同梱されているnpxがすごい便利なコマンドだった
武田隆志
2019.08.23

https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8
@rubytomato@github
2020年07月16日に更新
npmとyarnのコマンド早見表

https://note.com/youheyhey0505/n/n9e85be29852a
xhackの勉強会「JavaScriptと無料APIを駆使してウェブアプリ開発ハンズオン」に参加してきた話
りゅーそう
2019/08/01 13:25

system.js

https://i-doctor.sakura.ne.jp/font/?p=46036
SystemJS@0.19.47のCDNでTypeScript
2021年1月11日

ものすごく時間がかかるが、node.jsを使わずに、ブラウザだけでtypescriptをコンパイルして利用することもできる。
SystemJS、unpkgを使ってブラウザで動的にtypescriptをロード、コンパイルして実行

https://unpkg.com/systemjs@0.19.47/dist/system.js

http://www.ifelse.jp/blog/web-02
SystemJSを使ったWEBフロントエンド開発
投稿日:2017年4月9日 更新日:2018年12月29日

http://hono-auto.seesaa.net/article/450647466.html
2017年06月07日
SystemJS、unpkgを使ってブラウザで動的にtypescriptをロード、コンパイルして実行

https://dev.to/vbilopav/how-to-configure-systemjs-module-loader-for-your-typescript-project-from-cdn-with-local-fallback-in-visual-studio-4k42
How to configure SystemJS module loader for your TypeScript project - from CDN with local fallback in Visual Studio
vbilopav profile image
vbilopav
2020年3月5日

オンラインエディタ

見出し


00.javascript/10.typescript.txt · 最終更新: 2021/01/19 by adash333