プロを目指す人のためのTypeScript入門

https://gyazo.com/a86bb2f9b7d7483cc2be69925e876258

TypeScriptの開発環境

事前にNode.jsをインストールしておく。

TypeScriptプロジェクト用のディレクトリを作成して

code:sh

cd ~/src

mkdir ts-practice

cd ts-practice

package.jsonを生成

code:sh

npm init --yes

code:diff

diff --git a/package.json b/package.json

index 039ca88..7ca0a71 100644

--- a/package.json

+++ b/package.json

@@ -3,6 +3,7 @@

"version": "1.0.0",

"description": "",

"main": "index.js",

+ "type": "module",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

プロジェクトへTypeScriptをインストール

code:sh

npm install --save-dev typescript @types/node

tsconfig.jsonを生成

code:sh

npx tsc --init

各種設定を行う

code:diff

diff --git a/.gitignore b/.gitignore

index 3c3629e..f06235c 100644

--- a/.gitignore

+++ b/.gitignore

@@ -1 +1,2 @@

node_modules

+dist

diff --git a/tsconfig.json b/tsconfig.json

index 75dcaea..db4f37a 100644

--- a/tsconfig.json

+++ b/tsconfig.json

@@ -11,7 +11,7 @@

// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */

/* Language and Environment */

- "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

+ "target": "es2020", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */

// "jsx": "preserve", /* Specify what JSX code is generated. */

// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */

@@ -25,9 +25,9 @@

// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */

/* Modules */

- "module": "commonjs", /* Specify what module code is generated. */

+ "module": "ESNext", /* Specify what module code is generated. */

// "rootDir": "./", /* Specify the root folder within your source files. */

- // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */

+ "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */

// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */

// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */

// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */

@@ -49,7 +49,7 @@

// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */

// "sourceMap": true, /* Create source map files for emitted JavaScript files. */

// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */

- // "outDir": "./", /* Specify an output folder for all emitted files. */

+ "outDir": "./dist", /* Specify an output folder for all emitted files. */

// "removeComments": true, /* Disable emitting comments. */

// "noEmit": true, /* Disable emitting files from a compilation. */

// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */

@@ -99,5 +99,6 @@

/* Completeness */

// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */

"skipLibCheck": true /* Skip type checking all .d.ts files. */

- }

+ },

}

初めてのTypeScriptプログラム

以下のファイルを用意して

code:src/index.ts

const message: string = "Hello World!!";

console.log(message);

実行してみる

code:sh

# src/index.ts をコンパイルして

$ npx tsc

# 出力された dist/index.js を実行

$ node dist/index.js

Hello World!!

$

以下のコマンドでファイルの変更を検知して自動でコンパイルしてくれる

code:sh

npx tsc --watch

定数の宣言（const）

code:typescript

const message: string = "Hello World!!";

console.log(message);

変数の宣言（let）

code:typescript

let n: number = 0;

for (let i = 1; i <= 10; i++) {

n = n + i;

}

console.log(n);

プリミティブ型

文字列

数値

真偽値

BigInt

null

undefined

シンボル

数値型(numberとbitint)

code:ts

const n:number = 10;

const pi:number = 3.14;

const m:bigint = 100n

console.log("n:", n);

console.log("pi:", pi);

console.log("big:", m);

文字列型(string)

code:ts

const str1: string = "Hello";

const str2: string = "World!";

const message: string = `Hello

World!!!`;

console.log(str3); //=> Hello World!

console.log(message);

//=> Hello

//=> World!!!

真偽値型(boolean)

code:ts

const no: boolean = false;

const yes: boolean = true;

console.log(yes, no); //=> true false

nullとndefined

code:ts

const val1: null = null;

const val2: undefined = undefined;