Go to Qiita Advent Calendar Top
LoginSignup
0
0

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 1 year has passed since last update.

@pluckYang(pluck Yang)

typescript勉強メモ

Last updated at Posted at 2023-10-21

udmy勉強材料：Understanding TypeScript

目次

  • TypeScriptはブラウザで支持されていない、あくまでJSコード書くツールとして使用されている
    • TypeScriptはstatic types、コード書く時宣言が必要。JSはdynamic type、ブラウザ上走る時では変更できる
    • ローカル環境にnode.jsをインスドール、そしてプロジェクトフォルダーにnpm init とnpm install --sava-dev lite-serverコマンド入力し、簡単な環境を構築
typescriptのcore types

  • typescriptのcore types

    • TypeScriptのprimitive typesは全部lowercase（string、number。。。）

    • letでは再宣言が禁止、値のtypeを変更出来ないが内容値が変更できる。constではtype再宣言、内容値再代入が禁止

    • typescript中でobject typeを作成できるが、JSではobject typeが無い為、へコンパイル後定義済の結果のみ残される

      const person: {
  name: string;
  age: number;
} = {
  name: 'Maximilian',
  age: 30
};

    • tupleを使って、確定の順番である複数のtypeを含むarrayを定義、例えばrole: [number, string]、一番がnumber、二番がstringのarray

    • TypeScriptのenum typeを定義できる、enum Role {ADMIN = 5, READ_ONLY, AUTHER};；enumの値はnumberがついている、Roleはcustome typeなので、イニシャル文字uppercaseが必要

      • 最初のnumberが与えられた場合、後ろのちのnumberは自動加算される
      • 手動でnumberつけるもできる
      • number以外、stringも使用できる

    • union typeでparameterのtypeを複数定義、　input1: number | string

    • literal typeでparameterを同じtypeの下で、複数選択を定義、input3: 'as-number' | 'as-text'

    • Type Aliasesでcustome typeを定義でき、重複なコードを避ける、type User = { name: string; age: number }; const u1: User = { name: 'Max', age: 30 };

    • TypeScriptではfunctionのresultをvoidに設定できる、何も返さない場合はvoidを使用。

    • functionはtypeの一つ、マウスをfunctionに当てると、返されるresultの結果が見れる。
      スクリーンショット 2023-10-22 19.56.36.png

      • 返されるresultの結果を設定できるfunction add(n1: number, n2: number): number {}
      • () =>でfunctionの形を定義、let CombinValues: (a: number, b: number) => number; CombinValues = add;
      • call back function
        スクリーンショット 2023-10-22 20.34.54.png

    • unknowとanyと違う、 anyはtypeのチェックを回避できるが、unkowmは今のデータtypeをチェックする。以下の例ではunknowはエラーが出る、anyはでない
      スクリーンショット 2023-10-22 20.50.13.png

    • functionの中でthrowを使い、ブラウザ上エラーを投げる。この場合、返す resultはnever
      スクリーンショット 2023-10-22 20.59.42.png

コンパイルとプロジェクト環境設置

  • 毎回tsファイルを保存後、tsc fileName.tsでコンパイル必要があるが、tsc fileName.ts -w（或いは--watch）でwatch modeを開始。目標ファイルが更新される度、コンパイルが自動実行、watch modeから離れる場合はcontrol + c

    • プロジェクト全体をTypeScriptで管理したい場合、プロジェクトフォルダー下でtsc --init（このコマンドはプロジェクト毎一回のみ）
      • tscコマンドで全てのTypeScriptファイルを一気にコンパイルできる
      • tsc -wでプロジェクト全体をwatch modeに入る

  • TypeScriptプロジェクトの設定ファイルtsconfig.jsonの中、

    • TSの管理から除外したいファイルのpathを追加できる。

      • node-modules（開発資材保有のフォルダー）が黙認上除外される
      • includeと一緒にを使って、柔軟に管理したいファイルやフォルダーを設置
        スクリーンショット 2023-10-23 8.21.28.png

    • targetでコンパイルのJSバージョンを決める

    • libは黙認上targetに設置されたバージョンと関連している

    • sourceMapをtureにすると、ブラウザconsole画面でTypeScriptのソースが見れる
      スクリーンショット 2023-10-23 8.54.13.png

  • outDirでコンパイル後のjsファイルの保存先を指定できる
    スクリーンショット 2023-10-23 17.42.14.png

  • rootDirでコンパイルしたいtsファイルの保存先を指定できる
    スクリーンショット 2023-10-23 17.48.03.png

  • noEmitOnErrorをtrueにすると、tsファイルの中エラーがある場合、jsファイルが作成されない；falseにすると、エラーがある場合、jsファイルが作成される
    スクリーンショット 2023-10-24 17.20.18.png

  • strict下の設置は黙認strictと同じ、それぞれ単独設定できる
    スクリーンショット 2023-10-24 17.25.09.png

    • noImplicitAnyはfunctionが作成された時、functionに渡すparameterがtype宣言必要の設置
      スクリーンショット 2023-10-24 17.31.31.png
next generation javascript and typescript

node.jsをインスドールし、簡単なローカルサービスを走るため、npm installとnpm startコマンド

  • 以下URLで最新のJavascript機能を確認
    https://compat-table.github.io/compat-table/es6/

  • {}内で定義されたparameterは{}外部使用できない、例えばfunction　{}、if　{}

  • =>の使用はfunctionの定義を簡単にする
    スクリーンショット 2023-10-24 19.50.48.png

  • ...でarrayやobjectに内容を追加
    スクリーンショット 2023-10-24 20.04.26.png

    • ...を複数paramaterを指す
      スクリーンショット 2023-10-24 20.08.56.png

  • objectのparameterを引き出し、新しい値を与えることができる
    スクリーンショット 2023-10-24 20.21.58.png

classes and interface
  • typescriptの中では readonly を使って、初期化されたpropertyの値が変更され無い様にする、例えば private readonly ID
    • readonlyはabstract classとinterfaceの中にも使用できる
  • abstract methodの定義例、abstract discribe(this: Department): void;
    abstract methodを使うできるのは、abstract classの内部
  • 新規classをabstract　classから作成の時、extends出来るabstract　classは一個のみ
    • 新規classは自動的にabstract　classのpropertyとmethodを持つ
  • interfaceは複数のinterfaceをextends出来る
  • 新classをinterfaceから作成の時、implements出来るinterfaceは複数可能
    • 新規classはinterfaceのpropertyとmethodを定義する必要がある
  • interfaceでfunctionを定義できる、例として
    type AddFun = (a: number, b: number) => number; //typeで定義
    interface AddFun { (a: number, b: number): number; } //interfaceで定義
  • interfaceとclassの中、存在任意のpropertyの定義は？を使用、例として name:? string
advance type

  • 複数のtypeをcombineできる、例として type ElevatedEmployee = Admin & Employee;（AdminとEmployeeは二つのtype）

  • TypeScriptでは、.getElementById()から取得したhtmlコンポーネントの種類が知ら無い、しれを確定するため、以下二種のコードを使う、!の用途はnullでは無いを指定
    const userInputElement = <HTMLInputElement>document.getElementById('user-input')!；
    const userInputElement = document.getElementById('user-input')! as HTMLInputElement；

  • run timeエラーを回避するため、optional chainingの特性を使用、データの存在を確認、例として console.log(fetchedUserData?.job?.title);

generics

  • const names : any[] = []; = const names : Array<any> = [];
    <>の内容はTypeScriptにデータの種類を伝える、そうすると、コード書く時TypeScriptからのチェックとサポートが貰える

  • generic typeをextendし、その内容の範囲を設定できる、例として
    function count<T extend Lengthy>(element : T) {}

    • ここのextendは、後ろにいるobjectやinterfaceから作成されたobjectやinterfaceではなく、後ろにいるobjectやinterface中に含まれるpropertyを持つobjectやinterfaceでいい、
      例として interface Lengthy {length: number;}を定義し、上記elementに['text1', 'text2']のlistを渡すのはOK
decorator

  • tsconfig.jsonのexperimentalDecoratorsをtrueにする
    スクリーンショット 2023-11-01 17.12.15.png

  • classにdecoratorを設置：calssの上一行＠付けのfunctionを設置。decoratorの起動条件は、 classがJSに認識された時、インスタンスが作成された時ではない
    スクリーンショット 2023-11-01 17.31.37.png

  • decoratorはfunction、その為paramaterを渡すことができる
    スクリーンショット 2023-11-01 17.42.42.png

  • decoratorはlibraryとして事前用意できる、そして必要な時、classと連動させる
    スクリーンショット 2023-11-06 17.30.22.png

  • decoratorの実行順番は上から下、でもreturn functionの実行順番は下から上
    スクリーンショット 2023-11-06 17.37.58.png

module namespace

プロジェクト内のコードを分類し、管理する方法

  • namespace、"namespace" syntaxでコードをグループ化
  • ES6 import/export、"import/export" syntax、ブラウザが支持する
    • 他ファイルに使用したいclassやfunctionやvariable前でexportを追加、使用したいリソースをimportする
      スクリーンショット 2023-12-02 10.40.02.png
    • importしたいファイルの内容をグループ化出来る、グループ名.class名の方式で目標classをコール。
      別名前にasの追加により、現在ファイル内に適用したい別名をつける。
      • は該当ファイルすべての内容をexport
        スクリーンショット 2023-12-02 10.44.13.png
      • defaultに定義されたcalssをimportの時、直せず別名に命名する
        スクリーンショット 2023-12-02 10.57.49.png
        スクリーンショット 2023-12-02 10.58.14.png
webpack

  • ES6 import/exportを使用し、ソースコードをTSファイル分けて、分類した後。
    クライアントがwebpageを開いたとき、サーバーにすべてのJSソースコードを一個ずつrequestする、全体的に時間がかかる
    スクリーンショット 2023-12-05 17.14.49.png

  • webpack toolを使用し、複数のコードをバンドする

  • 以下コマンドでwebpackをインスドール
    npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

  • プロジェクトフォルダーの下webpack.config.jsファイルを作成。プロジェクトに合わせ、配置コードを入力

    例：webpack.config.js
      const path = require('path');

  module.exports = {
    entry: './src/app.ts',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    }
  };

  • webpackを起動するには、package.jsonにコマンドを定義し、npm run build（図の例）コマンドでコンパイルする
    スクリーンショット 2023-12-05 18.08.57.png

  • webpackでソースコードをバンドした結果、一個のファイルにまとめる
    スクリーンショット 2023-12-05 18.13.33.png

3rd party libraries

  • lodash

    • すべての JavaScriptプロジェクトで使用できる
      • typescriptはこのlibraries内のjsコード直接識別出来ない、そのため@type/lodashをインスドールnpm install --save @types/lodash 
        • @type/lodashの中身は.d.tsファイル、このファイルの用途はtypescriptにjsファイルの中身を翻訳すること
    • プロジェクトフォルダーの下npm i --save lodash　コマンドでlibrariesを追加

  • class-transformer

    • serverからのjsonデータを、定義済のclassに変換する、便利なツール
    • 例：const users = plainToClass(UserClass, userJsonData);、この場合usersはuserJsonDataが含むUserClassインスタンスのlist。

  • class-validator

    • typescript専用のlibraries
0
0
1

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?