Typescript - チートシート

Typescriptのインストール



//npmでインストール
npm install TypeScript
//yarnでインストール
yarn add global typescript
//sample.ts ファイルを実行 (実行後にコンパイルされたjsファイルが生成される)
npx tsc sample.ts

基本の形

形形の書き方備考
any


let hoge: any;
hoge = '文字'
hoge = 123
any型にはどんな方でも代入でき
void


function log(message): void {
    console.log(message);
}
voidは関数に戻り値がない時に使います。
null / undefined


function hoge(props: string | null | undefined) {}
値がnullで現在利用できないことを意味します。
undefinedは初期化されていないことを意味します。
never


function error(message: string): never {
    throw new Error(message);
}
bottom形(値を持たない型)の一つ
どんな変数も入れることが出来ない
逆にどんな型にも入れることができます。
真偽値 - boolean


let bool: boolean;
bool = true;
bool = false;
true or falseの真偽値を扱います。
数値 - number 


function add (a: number, b: number): number {
  return a + b
}
数値は浮動小数値(2,8,10,16進数のリテラル)を扱います。
文字列 - string 


let str: string;
str = '文字を代入';
str = 1; // Error
文字列を扱います。
配列 - type[], Array<type> 


let arr: string[];
//この方法でも良い ↓
//let arr: Array<string>;
arr[0] = "hogehoge";  
arr[1] = 1; //Error
配列の中身を型定義できる。
タプル - [string, number] 


const foo: [string, number] = ['foo', 5];


const str: string = foo[0];
配列を表し、長さが2の配列で、0番目に文字列が、1番目に数値を表している
合併型 - union 


let value: string | number = 'foo';
value = 100;
value = '文字';
value = true; // Error
union型は値が複数の型のどれかに当てはまるような型を表しています
enum 


enum Card {
  Clubs = "clubs",
  Diamonds = "diamonds",
  Hearts = "hearts",
  Spades = "spades",
}
console.log(Card.Diamonds); // diamonds
定数をひとまとめに定義できる

型の定義方法



let flg: boolean
let flg: boolean = false


function add (a: number, b: number): number {
  return a + b
}

型アサーション



let len: number = (input as string).length
function object(this: {a: number, b: number}, a: number, b: number) {
  this.a = a;
  this.b = b;
  return this;
}


let a = object(1,2);

互換性のある型である場合、<型名>のような形で、変数やリテラル前付与することで、型を明示的に変換してくれる。

オブジェクト型





//{foo: string; bar: number}という型は、fooというプロパティがstring型の値を持ちbarというプロパティがnumber型の値を持つようなオブジェクトの型
interface MyObj {
  foo: string;
  bar: number;
}


const a: MyObj = {
  foo: 'foo',
  bar: 3,
};
関数インターフェース


interface SomeFunc{
    (a: string, b: string): boolean
}


const someFunc: SomeFunc = (a, b, c) => {   // error(c)
    return 'bad return'                     // error
}

関数のシグネチャを宣言

クラスインターフェース






//クラスの構造を定義
interface MyInterface{
    getName():void;
    getDetail():{address:string};
}


class MyClass implements MyInterface{
    private getName(){
    }
    public getDetail(){
        return {
                address:'TOKYO'
        }
    }
}

クラスの構造を定義
プロパティのアクセス範囲を指定

オプション引数(?)



function required(some: string){
    return some
}


function optional(some?: string){
    return some
}

?でオプションにできる

ジェネリック型



//関数の場合
function echo<T>(param: T): T{
    return param
}


echo('hoge')
echo(123)


//クラスの場合
class SomeClass<T>{
    someParam: T
    someMethod(param: T): T{
        // ...
    }
}


const strInstance = new SomeClass<string>()
const numInstance = new SomeClass<number>()

<>で囲った名前の列を与えることで、型の定義の中でそれらの名前を型変数として使うことができます

タプル型と可変長引数



type Args = [string, number, boolean];


const func = (...args: Args) => args[1];


const hoge = func('foo', 3, true);
// hogeはnumber型になる

タプル型を関数の可変長引数の型を表す

......

Typescriptの案件

フリーランス一部リモート
VRライブプラットフォーム「VARK」を開発・運営！全てのプロジェクトのインフラ構築・運用改善、APIの作成、開発支援を担うバックエンドエンジニア募集！

■業務内容 全てのプロジェクトのインフラ構築・運用改善、APIの作成、開発支援を担当していただきます。 - サーバーおよびネットワークの設計/運用/監視 - API設計/作成 - セキュリティ設計/運用 - 管理画面の作成 - 新規サービスのシステム構築/設計/運用 ■特徴 - 急成長フェーズのプロダクトに携わる - 経験豊富なフロントエンドチーム（Unity/VR）とのコラボレーション - 品質の高いコード、テストを目指すチーム - 未経験の言語の修得サポート - 福利厚生での技術書の購入 ■開発環境 ◎開発言語： 　　クライアントサイド：C# 　　サーバーサイド：Elixir, Ruby, Golang, TypeScript ◎フレームワーク： 　　クライアントサイド：Unity 　　サーバーサイド：Phoenix, Ruby on Rails, Echo, Nextjs ◎インフラ： 　　サーバー：AWS（EC2, ECS）, Docker 　　DB：AWS Aurora(MySQL), NoSQL(DynamoDB, Redis) 　　監視：Mackerel, CloudWatch, New Relic ◎開発支援ツール 　　バージョン管理：git 　　ドキュメント管理：Docbase 　　タスク管理：Backlog, GitHub Projects 　　CI：Jenkins, GitHub Actions 　　コミュニケーション：Slack, Discord 　　コーディング：個人の自由 ■メンバー構成 ◎クライアント：10名 ◎バックエンド：5名 ■必須スキル - 未経験言語（特にElixir）へチャレンジできる方 - AWSでのシステム開発・運用経験（1年以上） - Linuxサーバーでの開発経験（3年以上） - チーム開発経験（3年以上） - 下記いずれかの言語の経験（3年以上） > Golang > Elixir > Ruby > TypeScript ■尚可スキル - Docker、ECSなどのコンテナエンジンへの理解 - モニタリング、プロビジョニング、デプロイの構築経験 - ネットワークプロトコルに対する知見（TCP、UDP、TLSなど） - IaC でのインフラ構築経験 - 運用監視設計、セキュリティー対策経験 - オンラインゲーム、メタバースの開発経験 ■開発環境 【開発環境】 Elixir, AWS, Ruby, TypeScript, Go言語, Docker, GitHub, Linux, Unity, Mackerel, Backlog, Jenkins, Git, Ruby on Rails, DynamoDB, Redis, MySQL, C#

65〜80万円/月
業務委託契約
Ruby on RailsTypeScript
フリーランスフルリモート
Rails/React.js/大手Web系企業でのアプリケーション開発業務/フルリモート

■仕事内容 Webアプリケーションの開発において、 仕様書を元にプロダクトマネージャーやUXデザイナーと連携しながら 新機能開発や既存機能の改修を行っていただきます。 スモールチームのため、自ら主体的に質問をしてガツガツ動ける方を募集しております！ ─────────────────────── ■作業環境：Windows/Mac選択可 ■開発環境 ■プログラミング言語：Ruby　TypeScript　　　　　 ■データベース：MySQL　　　　　　 ■Webフレームワーク：Ruby on Rails　React.js　　　　　 ■環境・OS：AWS (Amazon Web Services)　　　　　　 ■ツール：Slack　　　　　　 ■その他：　　　　　　 ■開発工程 詳細設計|実装・構築・単体試験|結合試験|総合試験|受入試験|運用・保守 ■基本スキル ・Ruby on Raiksでの開発実務経験 1年以上 ・TypeScript React.js Reduxを用いた開発実務経験 1年以上 （※バックエンド フロントエンドの両方をご担当していただきます） ■尚可スキル ・インフラ（AWS）の構築経験　

80〜110万円/月
業務委託契約
Ruby on RailsTypeScriptReact
フリーランス
【PHP/Node.js】リユースサービスの顧客連携基盤のサーバーサイド開発_リーダー

■仕事内容 toC toB向けリユースサービスを展開している企業にて、 PHPでできている既存の顧客連携基盤の改修やNode.jsへのリプレイスなどを行っていただきます。 サーバーサイドだけでなく、フロントエンドやインフラの経験などもあれば作業をお願いいたします。 リーダーとして開発を引率していただく想定です。 ─────────────────────── ■作業環境：Windows/Mac選択可 ■開発環境 ■プログラミング言語：PHP　JavaScript　TypeScript　CSS3　CSS3　　 ■データベース：MySQL　AWS Aurora (Amazon Aurora)　　　　　 ■Webフレームワーク：Laravel　Vue.js　Node.js　Nuxt.js　　　 ■環境・OS：AWS (Amazon Web Services)　AWS Lambda　iOS　Android　　　 ■ツール：Docker　Docker　Figma　Redmine　　　 ■その他：Confluence　Redux　　　　　 ■開発工程 要件定義|基本設計|詳細設計|実装・構築・単体試験 ■基本スキル ・PHP Laravel Vue.js TypeScript Docker AWS Gitを利用した開発経験が2年以上 ・チーム開発経験2年以上 ・API設計及び実装経験1年以上 ・データベース/テーブルの設計経験 ・スクレイピング実装経験 ■尚可スキル ・基本設計からのフェーズを担当した経験 ・大容量データの取り扱い経験及び開発経験　 ■人物像 ・能動的に動ける方 ・提案を積極にできる方

70〜100万円/月
業務委託契約
Vue.jsLaravelTypeScriptAWS
フリーランスフルリモート
Java/メタバースのサーバーサイドエンジニア開発

■仕事内容 メタバース開発要員の募集となります。 ・ターゲット :モバイル及びスマートフォン ・開発環境 ：アプリ側：Unity＋　サーバー側：Java JavaScript ・サーバーサイド：java/GRPC・管理ツール：Node js./Typescript・ストリーミング配信：AWS/GCP ・リモート可否：リモート（完全リモート可）ただし業務になれるまでは出社：週2回程度（契約後確定） ─────────────────────── ■作業環境：Windows/Mac選択可 ■開発環境 ■プログラミング言語：Java　　　　　　 ■データベース：　　　　　　 ■Webフレームワーク：　　　　　　 ■環境・OS：　　　　　　 ■ツール：　　　　　　 ■その他：　　　　　　 ■開発工程 実装・構築・単体試験 ■基本スキル [言語 (以下1つは実務経験が必要)] Java/Kotlin/Go/C++ [言語 (以下は経験があればなおよい)] Python/Ruby（仕事で使ってなくても他の言語も触ったことがあればより良い） ・デバッギング不具合発生時などに調査をおこない修正などの対応が行える。 ・非同期通信/マイクロサービス/HA(ハイ・アベイラビリティ)/キャッシング/Big O(アルゴリズム性能評価)の知見 ■尚可スキル Docker/Kubernetes/gRPC/RDB(Sql系) Sharding(シャーディング)/グラフDB(GraphDB) IaC(Infrastructure as Code)/CI CD/WebRTC　 ■人物像勤怠良好・コミュニケーション良好な方 ■年齢制限：～40代迄 ■性別：不問 ■最寄駅：新橋駅 ■外国籍：可（ビジネスレベル） ■稼働開始：2月開始 ■就業時間：9:00〜18:00 ■時間幅：140-180時間 ■服装：カジュアル

60〜75万円/月
業務委託契約
Node.jsTypeScriptJavaGRPCAWSGoogle Cloud Platform(GCP)
フリーランス副業週3〜フルリモート
【Go/TypeScript】Tiktok広告運用の管理ツール開発（フロントメイン）

【webツールのフルスタック開発】 ・自社開発の広告管理システムの開発、改善対応、バグの修正 ・仕様書の確認、実装、コードレビュー、バグの修正対応 ・エンジニアの経験5年以上 ・要件定義などの上流検討の経験 ・TypeScript,React.jsの開発経験2年以上 ・サーバーサイドの開発経験 ・負荷対応経験 ・デザインパターンを使った現場での開発経験または知見 ・DDDやクリーンアーキテクチャの知見・経験（知っている程度でも問題ございません） 最寄駅：渋谷駅 稼働率：0.6~1人月 年齢　：～40代迄 リモート状況：フルリモートでの就業を予定しております。 キーテク必要経験年数： インフルエンサーと提携し、SNSを用いた企業の広告効果を最大限に伸ばすための マーケティングサービスを提供している企業でございます。 フルリモートで、比較的時間も融通が聞くため働きやすい環境でございます。

50〜60万円/月
業務委託契約
渋谷駅
GoTypeScriptReact
フリーランスフルリモート
【React.js／TypeScript】ブロックチェーンを活用した新規プロジェクト

自社独自開発のブロックチェーンを活用した新規プロジェクトに フロントエンドエンジニアとして携わって頂きます。 【業務内容】 基本設計から開発に至るまでを一気通貫して業務を行っていただきます。 また、顧客からの要望や市場の動向から未来を見据えた新機能開発や、 実証実験の実施、リファクタリングも実施していただきます。 ・エンジニア経験4年以上 ・React.jsでの開発経験2年以上 ・TypeScriptでの開発経験 ・Hooksを用いた開発経験 ・React Nativeを用いたアプリ開発経験 ・React.jsを用いた大規模システムの開発経験 年齢　：～40代迄 リモート状況：フルリモートでの就業を予定しております。 キーテク必要経験年数：2年 自社独自のブロックチェーン開発などを行っている企業でございます。 働き方もリモート、フレックスを推進しているオススメの現場でございます。 スキルアップも見込めるので、エンジニアとして成長が可能です。

65〜70万円/月
業務委託契約
ReactTypeScript