Typescriptに入門した

2021-01-04
javascripttypescriptnpm
    

目次

概要

初期作業

typescript環境を作っていきます。

$ mkdir ts-app
$ cd ts-app
$ npm init
$ npm install typescript
$ export PATH=`pwd`/node_modules/.bin:PATH
$ node_modules/.bin/tsc --version
# Version 4.1.3

package.json

{
  "name": "ts-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.1.3"
  }
}

とりあえずHello World

まず、次のサンプルコードを作成します。

main.ts

const hello = (arg: string): void => {
    if (arg.length > 0) {
        for (let i=0; i<10; i++) {
            console.log(`Hello ${arg}`);
        }
    }
}

let world: string = "world";
hello(world);

typescriptファイルをビルドします。

npm run build main.ts

main.js

var hello = function (arg) {
    if (arg.length > 0) {
        for (var i = 0; i < 10; i++) {
            console.log("Hello " + arg);
        }
    }
};
var world = "world";
hello(world);
    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

JavaScriptで幅優先探索 (bfs) を実装する
bfsソースコード 前提 bfs関数 テストコード JavaScriptで幅優先探索 (bfs) を実装し簡単な最短経路の探索問題を解いてみました。 AtCoderの問題を参考にしています bfsソースコード 前提 bfs 関数の定義について 引数 table…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

0埋め・ゼロ埋め処理 のコードJavaScript
サンプル コード 呼び出す 説明 参考 追記 JavaScriptで 0埋め / ゼロ埋め / zero埋め 処理を行うサンプルコード サンプル コード 呼び出す 説明 記事タイトルが…

最新の投稿

UNIXドメインソケット通信 vs INETドメインソケット通信 php-fpmで動作させる場合の違いについて
結論 ソケット通信について ソケットについて ソケット通信の種類 UNIXドメインソケット通信を行う場合のメリット 参考にしたサイト php-fpm の設定方法で調べた際にIPとポートで設定するパターンとUNIX…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

PHP-Parser で PHP5からPHP7で動くコードに自動修正するツールが作る夢をみた
ツールが備える機能条件 PHP-Parser について PHP-Parser の簡単なサンプル ASTオブジェクトの置換・変更 PHP5からPHP7への変更内容を実装する ex1 includeパスを変更する ex2 例外クラスを Exception…

PHP5からPHP7への移行ツールを作るための解析・自動修正ツールを調べる
PHP5からPHP7への下位互換のない機能 使えそうなツールの洗い出し PHPStan phan php7cc php7mar php-to-7-aid Rector php-ast PHP-Parser まとめ 追記 (2021/01/0…

CentOS8にDNFでPerl5.30のインストール
Modularityについて Perl5.30インストール dnf module でハマったところ その他 Perl5.26の場合 Perl5.24の場合 CentOS8 or CentOS Streamに Perl5.30をDNF…

homebrew-core is a shallow clone. 対処法
homebrew で homebrew-core is a shallow clone.と 表示されたエラー 対処法 homebrew で homebrew-core is a shallow clone.と homebrewでupdate…

centos-streamのDockerコンテナイメージを作成した
背景 centos-stream コンテナのビルド & インストール 参考にしたところ centos-streamのDockerコンテナイメージを作成しました。 背景 CentOS8からCentOS Stream…

CentOS8でEPELとPowerToolsリポジトリの有効化
EPELとPowerToolsについて EPEL PowerTools EPELとPowerToolsの有効化 Powertoolsの有効化 epel-releaseのインストール 参考にしたサイト CentOS8でEPELとPowerTools…

Tags

Dates

© 2021   404 motivation not found