Memo

メモ > 技術 > プログラミング言語: TypeScript

概要
※Gulpによる構築は Gulp.txt を参照 ※2018年7月30日にVer3が公開された。Ver2との互換性は高いらしい 米Microsoft、「TypeScript 3.0」を公開 | OSDN Magazine https://mag.osdn.jp/18/08/01/170000
入門
TypeScript超入門(2):構文を理解する - Qiita https://qiita.com/ringtail003/items/7ccf992f18b768e0e633 TypeScript早わかりチートシート【1.5.3対応】 - Build Insider http://www.buildinsider.net/language/quicktypescript/01 TypeScript 2 のモダンな書き方 - Qiita https://qiita.com/karak/items/ef69aa71c19932fa5c1b 【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog http://kikuchi1201.hateblo.jp/entry/2016/10/26/172404 JavaScriptの歴史をざっくりまとめたよ! - Qiita https://qiita.com/Mic-U/items/c900a6f62862954d62e0 10分でわかる「今更だけどTypeScriptってなに?」 - Qiita https://qiita.com/melty12/items/5be76c25649ad0475ff9 TypeScript学習ロードマップ - Qiita https://qiita.com/irico/items/33744e15a4e0ca52d6bc TypeScript の開発環境を作る。VSCode を基本に ESLint と Prettier も添えて。 - Multi Vitamin & Mineral https://multimineral-tech.com/entry/2020/04/13/192746 Visual Studio CodeではじめるTypeScript入門 | キャスレーコンサルティング株式会社 https://www.casleyconsulting.co.jp/blog/engineer/255/ VSCodeを使って素朴に素朴にNode + TypeScript - Qiita https://qiita.com/TomK/items/72c2ae282d3fe10d8b05
参考
TypeScript入門以前ガイド - mizchi's blog https://mizchi.hatenablog.com/entry/2018/10/03/195854 TypeScript 2.7.1 変更点 - Qiita https://qiita.com/vvakame/items/3a1e628e53a5dd99dfe0 TypeScriptのコードレビューを依頼された人のための!と?の解説 | DevelopersIO https://dev.classmethod.jp/server-side/typescript-assertions/ TypeScriptをプロダクト開発に使う上でのベストプラクティスと心得 - Qiita https://qiita.com/jagaapple/items/ce0da04be28c35dc7d4f 2021年のTypeScriptベストプラクティス - 西尾泰和のScrapbox https://scrapbox.io/nishio/2021%E5%B9%B4%E3%81%AETypeScript%E3%83%99%E3%82%B9%E3%83%88%E3%83%97%E3%8... 4歳娘「パパ、具体的な名前をつけないで?」 - Qiita https://qiita.com/Yametaro/items/bcd3166e5d2ad696a89e 5歳娘「パパ、型ガードって何?」 - Qiita https://qiita.com/Yametaro/items/4bb5287f88e163fca6e0 アンサー: なぜTypeScriptの型定義に凝るのか - Qiita https://qiita.com/uhyo/items/3bc5f951f922804ede51 ジェネリクスのメリットって、何? https://zenn.dev/dowanna6/articles/63fdebe8dd167f 【TypeScript】超実践的テクニック集【Reactなし】 - Qiita https://qiita.com/ment_RE/items/9387b47dbef6433f6637 HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた? #JavaScript - Qiita https://qiita.com/dojyorin/items/00c167d0b4b41872b4a2 TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 #JavaScript - Qiita https://qiita.com/umiushi_1/items/4aa25df3343c5b2be62d
コーディングスタイル
以下にGoogleによるスタイルガイドがある (インデックスには、TypeScript以外のスタイルガイドへのリンクもある) Google TypeScript Style Guide https://google.github.io/styleguide/tsguide.html
ソースコード
microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output. https://github.com/microsoft/TypeScript TypeScript 本体のコードを読んでみよう https://zenn.dev/mizchi/articles/typescript-code-reading
環境構築
■最低限のコンパイル環境 TypeScript の開発環境を作る。VSCode を基本に ESLint と Prettier も添えて。 - Multi Vitamin & Mineral https://hiranoon.hatenablog.com/entry/2020/04/13/192746 VSCodeを使って素朴に素朴にNode + TypeScript - Qiita https://qiita.com/TomK/items/72c2ae282d3fe10d8b05 以下の環境で動作確認できた
>node -v v14.15.0 >npm -v 6.14.8
最低限なら以下で構築できそう
>npm init -y >npm install -D typescript
js/main.ts を作成して以下を記述する
// TypeScriptの型指定を入れた function sayHello(name: string): void { console.log(`Hello ${name}!`); // ES6のテンプレート文字列を使った } let myName: string = "TypeScript"; sayHello(myName);
以下を実行する これで js/main.ts をもとに js/main.js が作成される
>npx tsc js/main.ts
以下でTypeScriptの設定ファイル(tsconfig.json)が作成された 作成されただけなら、特に動作は変わらないように見える
>npx tsc --init
■Gulp Gulp.txt を参照
TypeScriptを試したメモ(Ver2)
// スコープ内で有効な変数 let let_test = 10; { let let_test = 20; } console.log(let_test); // 10 // 定数 const const_test = 30; //const_test = 40; // コンパイルエラー console.log(const_test); // 変数の型 let flag: boolean = false; let i: number = 2; let message: string = 'Hello!'; let value: any = '型なし'; console.log('flag=' + flag); console.log('i=' + i); console.log('message=' + message); console.log('value=' + value); // テンプレート文字列 var count: number = 1; var text = ` テンプレート文字列。 答えは${count + 100}です。 複数行を出力できます。 `; console.log(text); // 可変長の引数 function length_test(...args: number[]) { console.log(args); // [2, 4, 6] } length_test(2, 4, 6); // 配列とof let charactors: string[] = ['a','b', 'c']; for (let charactor in charactors) { console.log('charactor=' + charactor); } for (let charactor of charactors) { console.log('charactor=' + charactor); } // Enum enum Color { Blue = 10, Red = 20 }; console.log(Color.Red); // Void function void_test(): void { console.log('void_test'); } void_test(); // 引数・戻り値に型を定義する(省略しても可) function return1_test(price: number): string { return price.toLocaleString() + '円'; } console.log(return1_test(1000)); // 複数の型を返す function return2_test(x: number): number | string { if (x >= 0) { return 1; } else { return 'error'; } } console.log(return2_test(100)); // アロー関数式 let add1 = (x: number): number => x + 1; console.log(add1(2)); let add2 = (x: number): number => { return x + 1; } console.log(add2(2)); // クラス class Animal { constructor() { console.log('animal'); } walk() { return 'walking'; } } interface Speaker { say(): void; } class Person extends Animal implements Speaker { private firstName; private lastName; set fullName(name: string) { let names = name.split(' '); this.firstName = names[1]; this.lastName = names[0]; } get fullName(): string { return this.lastName + this.firstName + 'さん'; } say() { return 'Hello'; } } let person: Person; person = new Person(); person.fullName = '小田 花子'; console.log(person.walk()); console.log(person.say()); console.log(person.fullName); // ジェネリック function generic_test<T>(x: T) { console.log(x); } generic_test<string>('abc'); generic_test<number>(123); generic_test(123); // モジュール module A { export function a() { console.log('a'); } } module B { export function b() { A.a(); console.log('b'); } } B.b(); // タプル let touple_test: [number, string] = [1, 'hello']; console.log(touple_test[0]); console.log(touple_test[1]);

Advertisement