Closed24

TypeScriptのチュートリアルをやる

とりあえずJavaScriptプログラマー向けのTypeScriptのはじめに的なドキュメントを読んだ。
Next Stepとして提示されていたのが、ハンドブックを読むことで、所要時間30分となっていた
(俺の英語力だと何倍になるんだ?)

https://www.typescriptlang.org/docs/handbook/intro.html

ハンドブックに沿って、tscをインストール。

sudo npm install -g typescript

npm install -gでOS上で共通のディレクトリにインストールするよ、という指定らしい。
Globalのgかな?

Union Typeというのがあるらしい。
型の合成というか、ある型じゃなかったら別の型として扱う、らしい。

function printId(id: number | string) {
  console.log("Your ID is: " + id);
}
// OK
printId(101);
// OK
printId("202");
// Error
printId({ myID: 22342 });

一方の型でしか使えないメソッドを使うときなどはnarrowingができる

function printId(id: number | string) {
  if (typeof id === "string") {
    // In this branch, id is of type 'string'
    console.log(id.toUpperCase());
  } else {
    // Here, id is of type 'number'
    console.log(id);
  }
}

InterfaceとType aliaseは同じ。
ただInterfaceは拡張性があって、型エイリアスは一度定義したら拡張ができない。
個人的にはあんまりInterface使いたいケースが思い浮かばないなあ

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Interfaceにはextendsがある。
あと新しいフィールド付け加えることも可能。

extendsは型エイリアスでも頑張れば似たようなことできるっぽいが、フィールドの追加はできない

For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

使い分けは個人の好みでよくて、もし別の方を使った方がよければTypeScriptからワーニングが出るよ、とのことだが、
ヒューリスティック的には、まずインターフェイスを採用して、ダメなら型エイリアスを使う戦略が多い。

まあそもそもそんなインターフェイスも型エイリアスも使わない気がする……

リテラルで型を指定できる。これは便利そう

function printText(s: string, alignment: "left" | "right" | "center") {
  console.log(s);
}
printText("Hello, world", "left");
printText("G'day, mate", "centre");

なんとなく昨日はVSCodeでビルドできていたが、今日やったらできなくなっていた。
launch.jsonがおかしくなっていたっぽい?
Node.jsでやるように設定

https://knooto.info/vscode-typescript/

VSCodeのlaunch.jsonとかがよくわかってないから、どっかで勉強したいな

TypeScriptもif文でBool値以外が使える仕様は変わらないみたい。
(正確に言うと、Bool値以外でもBool値として暗黙の型変換を行う仕様)
そこはJSを踏襲している。

https://zenn.dev/nekoniki/articles/852199ebe23745abb1e7

TS、readonlyがある

class Temp {
    readonly temp = "aa";
}

let t = new Temp();
t.temp = "a";

吐き出したJS

var Temp = /** @class */ (function () {
    function Temp() {
        this.temp = "aa";
    }
    return Temp;
}());
var t = new Temp();

別にJS上は更新をふさいでるってわけでもないのか

とりあえずハンドブックを読み終わった。
型を操作する話ばっかりだった……

名前だけわかってるけど、まだよくわかってないもの

  • yarn/npm
  • webpack
  • Babel
  • Gulp

下二つに至っては要る?

入れたいけど入れられていない

  • ESLint

node.jsのこともサーバーサイドJS程度の理解しかしてないな

TypeScriptに関しては、tscがあるので、Babelは要らなさそう

webpackは必要になったら入れよう

なんか前に全てのブラウザでES2015に対応したから、Babelが不要になったみたいな記事見た気がしたが、見つからない……

このスクラップは2021/06/11にクローズされました
ログインするとコメントできます