Let's JavaScript
JavaScript, TypeScript, もりたけんじ

【JavaScript】 my first time of decoratore with TypeScript

  • TypeScript x React
    TypeScript x React

今またTypeScript熱がある。

今パッケージのアップデートをやっていて3.7.2から3.8.3へ移行したPRを投げている。

一方、家では、

今まで知らなかったTypeScriptのことを知りたくて

いろいろ読みあさっている。

https://www.udemy.com/course/typescript-complete/

これ買ったのはちょっとデコレーターについてなんて言っているか知りたいし、安かったので買った

いろいろなところであ、なるほど!という発見がありますね...

てことで、これは

デコレーター

引数に取りたい場合ファクトリーを作って渡し、コンストラクターを取る関数を返す

function LogingFactory(arg: string) {
  return function(constructor: Function) {
    console.log(arg);
  };
}

@LogingFactory("fafa")
class Name {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  set(name: string) {
    this.name = name;
  }
  get() {
    return this.name;
  }
}

class TeacherName extends Name {
  private age: number;
  constructor(name: string, age: number) {
    super(name);
    this.age = age || 0;
  }
  getAge() {
    return this.age;
  }
  setAge(age: number) {
    this.age = age;
  }
  addAge() {
    this.age = this.age++;
  }
}

ネタバレするのであまり言いませんが、デコレーターに親しみがない方は安いうちに買った方が良いです。

このコードは序章にすぎず、
動画の中ではAngularのように
テンプレートを渡したり、
複数のデコレーターを実行する方法や
クラスを書き換える方法など、
え、、そんなことできるのしらなかったてなった

TypeScriptがもうAngularに見えてくる...みたいな印象を受けて、
あれ、これこのままTSが人気になったらそっちの方にいくのか??
みたいな気さえしました...

実際にAngular9をちょっとやってみます..
なんかそっちの方がTS学べそうな気配すらしてきた
(あと最近案件でできるか聞かれた)

記事とは全然関係ないけど、TypeScript Playgroundが優しい。

コード書くと、サンドボックスを作ってくれるし、(もうplaygroundの状態をurlで作るのをやめたんですね)

https://www.typescriptlang.org/play/?ts=3.8.0-beta&e=64#example/checking-unions-with-index-signatures

3.7と3.8で起きたブレイクチェンジを実際のコードで解説してくれている。

お世話になります。

ではー

「武骨日記の」プライバシーポリシーに関して
・プライバシーポリシー
・個人情報取り扱いに関して

・サイトTOP
・私は何者か
・29歳よしもと芸人がWebデザイナー未経験で学校に通い5年後フリーランスのフロントエンドエンジニアになるためにやった9つのこと
・フロント記事
・フロントエンドエンジニア
・フロントエンド記事(タグ)
・TypeScript
・TypeScript練習問題集
・【TypeScript】TypeSript中級者になる為に知っておくと良い108個のこと
・JavaScript練習問題
・styled-componentsの使い方
・SCSS問題集
・GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
・recomposeと仲良くなりたい
・機動戦士FlowType
・初めてReactNativeWebを触ってみて
・Ramda.jsシグネチャの読み方
・環境変数の話
・いちごタルトの作り方
・フロントエンドエンジニア豚汁の作り方

「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
・株式会社TerraceTech

SNS
・しずかなインターネット kenjimorita
・インド旅　instagram
・適当な日常写真　instagram
・シュールさーん　instagram
・シュールさーん LINEスタンプ
・もりたけんじTwitter
・ネタ帳Twitter
・note

・FaceBook -kennji.morita-

※わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。