TypeScriptとは
- 静的方付き言語です。
- JSは動的型付き言語
- JS + 型付き = TS
※Type(型付き)Script
型とは(JS編)
・ JSは変数を指定しているだけで型をつけていなかった。
・ ゆるいルールで行ってきた
型とは(TS編)
・ 型を指定するとJSみたいに配列、文字列、数字を好き勝手入れられない
・ 厳格なルールで行う
・ TSからJSにコンパイルが必要
TSのメリットは
・ コンパイル時に型エラーチェックできる
・ 型が付いているから可読性がUP
・ プログラムの処理速度が早い
環境構築
$ npm init -y
※TSを管理するためのpackage.json作成
$ npm i --save-dev typescript
※ローカル環境でTSをインストールする
$ npm i -D webpack webpack-cli webpack-dev-server ts-loader
※webpack = 複数のファイルを一つにまとめる
※モジュール = ファイル
※バンドラー = まとめる
※ts-loader = TSをコンパイルするときに使用する
・webpack.config.js ファイル作成
※詳細なカスタマイズ設定をここに書く、どの複数のファイルをまとめるのか、まとめたファイルの名前をどうするのか、出力先をどうするのか、どこにバンドルしていくのか
module.exports = {
entry: {
bundle: ".src/index.ts"
},
output: {
path: `${__dirname}/dist`,
filename: "bundle.js",
},
mode: "development",
resolve: {
extensions: [".ts", ".js"],
},
devServer: {
static: {
directory: `${__dirname}/dist`,
},
open: true,
},
module: {
rules: [
{
test: /\.ts$/,
lodaer: "ts-loader",
},
],
},
};
※__dirname = ルートディレクトリを指定
※development = 開発モード
※extensions: [".ts", ".js"], = 自動的にtsとjsに変換してくれる、拡張子があってるだけでOK
※devServer = ローカルサーバーを立ち上げるときに何を見にいく？、どこをdevServeとして立ち上げる？
※open: true, = 自動的にサーバーが立ち上がる
※module = ファイルに対するルールの設定
※test: /.ts$/ = .tsファイルというファイルの拡張子を
※lodaer: "ts-loader", = ts-loaderを使用してコンパイルするルール
※lodaerはpackage.jsonに記載されている
・tsconfig.json ファイル作成
※コメントアウトされているから必要なものをコメントアウトを外して使用する、rubyみたいな
$ npx tsc --init
$ src配下にsaySomething.tsを作成
※TSでクラスを書いていく
------------------------------------------
export default class SaySomething {
//クラスの指定
massage: string;
//クラスで使用するプロパティをメッセージとしてstring型を使用する
//初期化
constructor(message: string) {
//引数はメッセージを入れる、最初に呼ばれる
this.massage = message
}
public sayText(elem: HTMLElement | null) {
//publicはTSで使用できるようになった、クラスを書いていく、elemという引数を使用する
//elem = HTMLElment型を指定する
if(elem) {
elem.innerText = this.massage
}
}
}
------------------------------------------
このクラスをindex.tsでインスタンス化して使用していく
- 補足
・クラス：設計図
・インスタンス：実際に作った物
・オブジェクト：モノ（クラスとかインスタンスとかをふんわりと表現したもの）
index.htmlの雛形作成、!マーク押して、エンターキーを押すと出てくる
div.rootでエンターキー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="root"></div>
</body>
</html>
TODOリストを作りながらTSとReactを触ってみよう
$ npx create-react-app todolist-youtube --template typescript
$ npm start
※ローカルサーバ立ち上げ
$ npx prisma studio
※prisma立ち上げ
$ npm install axios --save
※追加コマンド
/* eslint-disable @typescript-eslint/no-unused-vars */
//** TypeScriptの基本の型 */
// boolean
let bool: boolean = true;
// number 数値
let num: number = 0;
// string 文字
let str: string = "A";
// Array 配列
let arr1: Array<number> = [0, 1, 2];
let arr2: number[] = [0, 1, 2];
// tuple(配列の型)
let tuple: [number, string] = [0, "A"];
// any(なんでも屋)、基本的に使わない
let any1: any = false;
// void(関数に紐づく型)、何も返却値がないことを表す型
// : voidを記載しなくても大丈夫
const funcA = (): void => {
const test = "TEST";
};
// null
let null1: null = null;
// undefined(未定義)
let nudefind1: undefined = undefined;
// object(あんまり使う機会がない)
let obj1: object = {};
let obj2: object = ({ id: number, name: string } = { id: 0, name: "AAA" });