今更TypeScriptをやる - めろたんのアレ

やる

はじめに

脳死で yarn init から yarn add typescript。

これで最低限の準備が完了。

webフロントで動かすみたいなのがよくあるアレだけど今回はNodeで動作をみたりする。

のでその辺りは一旦忘れる。

雑に適当なのをかく

type A = 'a' | 'b';

const test = (a:A): void => {
  console.log(a);
};

test('a');

yarn tsc ./src/1.ts とか雑に食わせる。

結果

var test = function (a) {
    console.log(a);
};
test('a');

アイ。

type の定義がきえますね。まあそう。

yarn tsc -t ESNEXT ./src/1.ts とかターゲットのバージョンとかを指定すると結果が変わる。

const test = (a) => {
    console.log(a);
};
test('a');

var が const になった。

型をアレしてみる。

type A = 'a' | 'b';

const test = (a:A): void => {
  console.log(a);
  return a;
};

test('c');

src/1.ts:5:3 - error TS2322: Type 'A' is not assignable to type 'void'.
  Type '"a"' is not assignable to type 'void'.

5   return a;
    ~~~~~~~~~

src/1.ts:8:6 - error TS2345: Argument of type '"c"' is not assignable to parameter of type 'A'.

8 test('c');
       ~~~


Found 2 errors.

error Command failed with exit code 2.

型が違うわい〜という感じのエラーがでましたね。

一応JSも吐き出された。

var test = function (a) {
    console.log(a);
    return a;
};
test('c');

壊れたアレででてますね。

基本的な型とか

www.typescriptlang.org

これ

boolean とか number とか string とかは、まあね。

Array

const arr1: Array<number> = [1, 2];

const arr2: number[] = [1, 2];

まあはい。

特に意味はないけど、ジェネリックで書くほうが好き。 Array<number> これね。

Tuple

タプルだ。

const t:[number, string] = [1, 'merotan'];

はい。配列のアレだからなんか違和感があってなんか好きくない…。

出力はこう

var t = [1, 'merotan'];

まあそうね。

Enum

enumあったんだ。しらなかった。

enum Test { a, b, c };

const t: Test = Test.a;

console.log(t);

なるほどな〜という感じ。 a とかでそのまま書けるかなぁとおもったけど、まあむずいか。となった次第。

出力はこう

var Test;
(function (Test) {
    Test[Test["a"] = 0] = "a";
    Test[Test["b"] = 1] = "b";
    Test[Test["c"] = 2] = "c";
})(Test || (Test = {}));
;
var t = Test.a;
console.log(t);

なんかむずいな。

Test["a"] に 0 が入って、 Test[0] に "a" がはいってる。みたいな感じかな。

最後の console.log あたりを少し書き換えて実行。

node 対象のjs みたいな感じで。

var Test;
(function (Test) {
    Test[Test["a"] = 0] = "a";
    Test[Test["b"] = 1] = "b";
    Test[Test["c"] = 2] = "c";
})(Test || (Test = {}));
;
var t = Test.a;
console.log(Test.a);
console.log(Test[0]);

結果

0
a

結果見る限り、上で書いたようなそういう感じですね。

Any

まあこいつはいいでしょ。

なんでもはいるぞ。ってやつでしょ。(雑

Void

たまに思うけど void とか null とか同じじゃねみたいな気持ちになる(違う)

値を返さない関数の戻り値の型でよく使うみたいなアレ。

onClick とかでなにも返さんわ〜みたいなときに書いたりするよね。

let a:void = null;
a = undefined;
a = 0; // エラー
a = ''; // エラー
a = 1; // エラー

const b = ():void => { };
const c = ():void => ('a'); // エラー

はい〜。

Null and Undefined

まあはい。

Never

neverむずい。値が変えることが無いとかの関数の返り値の型としてつかわれるようす。

const t = ():never => {
  throw new Error();
};

const r = ():never => {}; // エラー

なるほど。

てっきりこの引数は使いませんよ。という型とかそういうもんかとおもっていたけどはい。

Object

まあはい。

class A {}

const a = new A();

const b = (obj: Object) => {};

b(a);

これは通るんだ。まあそうか。

Type assertions

as とか。

const a = '';

console.log(a as any as number);

こいつの型はこれっすよ。というアレですね。 any を経由すると無敵。(やってはいけない

const a = '';
const b = <number><any>a;

console.log(b);

こうやって書くこともできるとか。初めて知った。

はい

きょうはこのあたりで。またちょっとずつやっていく。