メモ > 技術 > プログラミング言語: 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]);