1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

TypeScript 備忘録

Posted at

#概要
TypeScriptについて学んだことを自分の備忘録とかねて投稿しています。

#目次
-Node.jsを使用してTSからJSにコンパイル
-型注釈と型推論
-オブジェクトの型注釈の仕方
-Tuple型の型注釈
-Any型について
-関数へ型注釈を適応させ方

##Node.jsを使用してTSからJSにコンパイル
Node.jsを使用してコンパイルするには、Node.jsを使用して下記のようにコンパイルする。

# これでNode.jsをグローバルで使用することができるようになる。
npm install -g

# Node.jsを使用してTypeScriptをダウンロードする。
npm install -g typscript

# tscを使用して、TypeScriptをJavaScriptにコンパイルする。
tsc index.ts

# watchモードを適応すると、変更がある度に自動でコンパイルしてくれる
tsc index.ts --watch (-w)

# 一括でコンパイルしたい場合
## tsconfig.jsonを作成
tsc --init
## フォルダ内のファイルを一括でコンパイル
tsc

##型注釈と型推論

// 形注釈
let counter: number = 32;
let hello: string = "hello"; 

// 型推論
let checkFlg = true;
let cartLeft = 5;

→型注釈とは、初期化する際にその変数の型を指定して初期化する方法のことをさす。
→型推測とは、初期化する際に変数の型を指定せずに初期化する方法。
→型注釈はコードが冗長的になってしまうデメリットがある。

##オブジェクトの型注釈の仕方

// 形注釈をする際は、セミコロンを使用することを注意する
const person: {
  name: string;
  age: number;
} = {
  name: "Jhon",
  age: 32,
};

// 型推論型で初期化を行っている
const neighbor = {
  name: "Taro",
  age: 34,
};

##Tuple型の型注釈

// Tupleの型注釈
// 何が入っているのかがわかりやすくなる
const book: [string, number, boolean] = ["bussiness", 1500, false];

##Any型について

// any型について
let anything: any = true;
console.log(anything);
anything = "hello";
console.log(anything);
anything = 32;
console.log(anything);
# console.logで出力される値
true
hello
32

→上のように、なんでも入れることができてします。
→バグに繋がる可能性があるので、Any型はなるべく使わないこと。

##関数へ型注釈を適応させ方

// 関数に型注釈を適応させ方
// 型推論は返り値には適応されるが、引数には適応されないので引数には型注釈をすること。
// 型注釈をしないと、Any型となってしまうため。
function add(num1: number, num2: number): number {
  return num1 + num2;
}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?