TypeScriptを基本からまとめてみた【2】【TypeScript入門】

TypeScriptとは

• マイクロソフトが開発したオープンソース言語
• Javascript + 『型付き』= TypeScript　
• 静的型付き言語

※『Type』＝　型付の意味

型とは

//typescript

var list: String[] = [];
            ↑ 型
let suuzi : Number = 1;
　　　　　　　 ↑ 型
const name: String = "プログラミング";
　　　　　　　　↑ 型

メリットは

• コンパイル時に型エラーチェックができる
• 型が付いているから可読性UP
• プログラムの処理速度が早い　　　

TypeScriptを実行できる環境を構築する

1.フォルダを準備する。

2.フォルダの中に、新しいフォルダを作成する。

$ mkdir <プロジェクト名>
$ cd <プロジェクト名>

3.package.jsonを作成する。

$ npm init -y

4.typescriptのインストールする

$ npm install --save-dev typescript

5.tscのversionを確認する

$ npx tsc -v

6.index.tsを作成する

$ touch index.ts

node_modules

index.ts

package-lock.json

package.json

7.node_modulesが.gitignoreファイルによりgitの管理から除外されていること

① .gitignoreをファイル作成する

$ touch .gitignore

②. gitignoreにvimで無視するもの(node_modules/)を書き込む
　　編集後ZZで保存できる
　　拡張子のない隠しファイルは $ vim(sublとかでもok) ファイル名 で編集できる

$ vim .gitignore

③ ファイル(node_modules)を残したまま管理対象(git)から外す (外すだけ)
(--cached オプションつけないと、ファイルごと削除になる)

$ git rm -r --cached node_modules

$ git status
$ git add .
$ git commit -m 'create .ignore and add node_modules to .ignore, and Remove node_modules from git'
$ git push origin master

index.js

const output = function (text) {
  return text;
};
console.log(output('Hello World!'));

index.ts

const output = (text: string): string => {
  return text;
};
console.log(output('Hello World!'));

8.コンパイルをする

$ npx tsc index.ts

9.tsconfig.jsonの作成と設定

$ tsc --init

参考サイト

【TypeScript入門】本当の初心者からTypeScript×Webpackの開発環境構築までをハンズオン形式で学ぼう！