はじめに
趣味でやっているプログラミングの勉強。本読みながら、マネして何となく覚えて・・が基本の学習方法だったがwebの情報だけ理解出来るのか？でという思いつき企画。
というか、新しい技術は書籍が追い付いていないため、ある程度英語を含むネット情報を読んで、自分で理解して落とし込んで、まとめての技術が必要なのでは？という考えも生じている。
つい最近Nuxt3触ってみたいと思って本探したがなさそうだったため。TypeSctiptは探せば良書ありそうだけどね。
TypeScript勉強用サイト
検索してすぐに出てくる参考になりそうなサイトを列挙
- TypeScript公式サイト https://www.typescriptlang.org
- 仕事ですぐに使えるTypeScript https://future-architect.github.io/typescript-guide/
- TypeScript Deep Dive https://typescript-jp.gitbook.io/
- サバイバルTypeScript https://typescriptbook.jp
いけそうな気がする。 こういう色々あるのが学習コストが低いってやつか。 これらを一通り読んで、その後は誰かが書いているコード読んでマネしてでやろう。
以下自分用まとめ
変数
プリミティブ型
- string
- number
- boolean
- symbol
- bigint
- null
- undefined
型推論
TypeScriptイコール型、型、型で全部定義するのかと思っていたが自動設定もされることを知る
//データから型が類推出来る場合は自動設定される
// title : string
const title = "小説家";
//代入しないとany型
// address : any
let address;
//明示的にanyを指定することも出来る
let address: any;union型
AでもBでも良いという柔軟な型定義が出来る
//生まれの年は数字化文字列
let birthYear: number | string;
//正常
birthYear = 1980;
//これも正常
birthyear = '昭和';
//答えたくないのでnullはエラー
birthyear = null;any型
どんな型でも代入を許す型。プリミティブ型であれオブジェクトであれ何を代入してもエラーにならない。
let value: any;
value = 1; // OK
value = "string"; // OK
value = { name: "オブジェクト" }; // OK変数に特定の文字列しか設定できないようにする
let favoriteFood: "北極" | "冷やし味噌";
favoriteFood = "味噌タンメン" //error型と値を組み合わせることも出来る
let birthYear: number | "昭和" | "平成";
birthYear = "昭和";タプル
配列の要素ごとに型が違う「タプル」というデータ型も定義できる。
const movie: [string, number] = ['Gozilla', 1954];
movie[0] = 2019;
// error TS2322: Type 'number' is not assignable to type 'string'.並列処理Promise.all()で便利らしい
https://typescriptbook.jp/reference/values-types-variables/tuple
クラス
// 新しいクラス表現
class SmallAnimal {
// プロパティは名前: 型
animaltype: string;
// コストラクタ（省略可能）
constructor() {
this.animaltype = "ポメラニアン";
}
say() {
console.log(`${this.animaltype}「わんわん」`);
}
}
const smallAnimal = new SmallAnimal();
smallAnimal.say();
// ポメラニアン「わんわん」元ネタわからんから文字列変更
ジェネリクス
日本語で総称型。 使われるまで型が決まらないようないろいろな型の値を受け入れられる機能を作るときに使う。テンプレートのようなもの。 共通ライブラリを作り出すときなどに使う。
function multiply<T>(value: T, n: number): Array<T> {
const result: Array<T> = [];
result.length = n;
result.fill(value);
return result;
}
コメント