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の案件


フリーランス若手歓迎20代活躍30代活躍リモートあり高単価
【Vue.js/ リモートあり】2021年ベストベンチャー受賞!急拡大している独自サービス事業・成果報酬型の次世代ASPのWebエンジニア

【仕事概要】 インターネットの広告代理店として広告主様と 法人・個人アフィリエイター様をベストマッチさせる次世代ASP(アフィリエイトサービスプロバイダ)の自社プロダクト開発をしています。 ユーザーの一次情報から課題を発見し、課題を解くためにどうしたらいいのか、仮説検証を繰り返し、プロダクトの成長を目指します。技術的な改題解決はもちろん、事業や顧客に課題を解決するモノを提供することが大切だと考えています。ビジネスサイドと協力して創り上げていくため、ビジネス的な観点も理解しつつチーム全体で納得感を持って課題解決に挑戦することができます。 【仕事内容】 ・急速に伸びる事業におけるインフラ的アップデート ・情報の隠蔽がないフラットなチーム開発 ・スケーラブルなアーキテクチャ設計、構築、実装 ・経営やオペレーションのためのデータビジュアライズ ・新規事業、プロダクト立ち上げ 【技術要件】 ■プログラミング言語:Kotlin / JavaScript / TypeScript / Python 等 ■フレームワーク:Ktor / Vue.js 等 ■インフラ:AWS ■バージョン管理:Git / GitHub ■CI / CD:CircleCI ■コミュニケーション等:Slack / GitHub Projects / Trello 【エンジニアが感じているやりがい】 ■ 技術意思決定から参画、鍛えることができる ■ 幅広く、新しい技術を実践投入し試せる ■ 難易度が高く面白い、技術的課題が多い ■ エンジニアリング以外のキャリア開発もしやすい環境、文化 【重視していること】 ・ソースコードレビューの文化 ・プロダクトにフィットする新技術の積極的な採用 ・コンテキストの落とし込みや、ドメイン知識の共有、属人性の排除のためのペアプログラミング ■尚可スキル ■開発環境 【開発環境】 AWS, Vue.js, Azure, UNIX, WindowsServer, Linux, TypeScript, GitHub, Kotlin, CircleCI, Trello, Git, JavaScript, Python ・チーム規模:2-5名 ・リモート:一部リモート可 ・稼働日数/週:週5日 ・開始時期:即日 ・募集人数:1人 ・面談方法:対面,オンライン可 ・面談回数:2回 ・面談フロー:■書類選考 応募者様の書類(レジュメ)を拝見させていただきます。 これまでの業務経験やスキルを判断いたします。 もしGithubやポートフォリオをお持ちであればご共有お願い致します! ↓ ■面接(2回を想定) ↓ ■内定

7085万円/月
業務委託契約
渋谷駅
PythonJavaScriptKotlinTypeScriptVue.js
フリーランスフルリモート20代活躍30代活躍フリーランス多数週3〜週4〜週5〜長期案件
【Ruby on Rail/週3~OK・フルリモート】働き方の根っこの部分から変える・業務可視化ツール「Qasee」をグロースさせる開発エンジニア

業務可視化ツール『Qasee』の開発をお任せします。 完全自社開発のため、要件を決めるところから、設計・開発・テスト・運用まで、全てを経験できます! また、セールスや顧客サポートとの連携を密に行うことでクライアントの声が近く、改善がスピーディに進む環境です。 【具体的な業務内容】 -Qaseeの機能追加や改善のための要件定義 -機能の設計から、実装、テストまでの一連業務 -サービスで取得しているデータを基に、働き方の傾向や特徴を洗い出すためのデータ分析 まずは、オフィスも見ていただきながら、もっと詳しく当社や新規事業についてお話させていただければと思います。少しでも興味を持っていただけたなら、ご応募ください! 【会社の特徴】 ■経営レイヤーとの近さ メンバーは各々に裁量があたえられた少数精鋭組織です。だからこそ、経営陣との距離はこれ以上ないほど近く、経営目線をもって仕事に携わることができます。同時に、ベンチャーならではのスモールチームでの開発のおもしろさを経験することができます。 ■働きやすいオフィス環境 品川駅徒歩4分の立地にオフィスがあります。働きやすさが生産性を向上させると考え、広々としたオフィスにはHerman Millerのチェア、ウォーターサーバーやDeLonghiの高級コーヒーメーカーが導入されています。 ■メンバー同士の仲がよい 働きやすい職場造りを目的として、PJT(通称:プロジェクトチーム)と呼ばれる任意参加型の有志メンバーが集まり、そこで様々な意見交換を定期的に行い、様々なイベントや催しを企画しています。 【開発環境】 - Ruby (Rails) - Python - JavaScript (React Redux) - DB : MySQL - Webサーバー : Nginx - インフラ: AWS, Docker - VCS : GitHub - 社内コミュニケーション : Slack 募集背景 立ち上げから間もないベンチャーながら、今期の売上は5億を突破した当社。VCの手助けを得ることなく安心できる事業基盤がすでにできあがっています。現在、業務可視化ツール『Qasee』を展開中ですが、よりスピーディに事業をグロースさせていくために、エンジニアを募集しております。

47505500円/時
業務委託契約
品川駅
PythonRubyJavaScriptC#VCTypeScriptRuby on RailsReactMySQLNginx
フリーランスフルリモート20代活躍30代活躍フリーランス多数週3〜週4〜週5〜長期案件
【Ruby on Rail/フルリモート】働き方の根っこの部分から変える・業務可視化ツール「Qasee」をグロースさせる開発エンジニア

業務可視化ツール『Qasee』の開発をお任せします。 完全自社開発のため、要件を決めるところから、設計・開発・テスト・運用まで、全てを経験できます! また、セールスや顧客サポートとの連携を密に行うことでクライアントの声が近く、改善がスピーディに進む環境です。 【具体的な業務内容】 -Qaseeの機能追加や改善のための要件定義 -機能の設計から、実装、テストまでの一連業務 -サービスで取得しているデータを基に、働き方の傾向や特徴を洗い出すためのデータ分析 まずは、オフィスも見ていただきながら、もっと詳しく当社や新規事業についてお話させていただければと思います。少しでも興味を持っていただけたなら、ご応募ください! 【会社の特徴】 ■経営レイヤーとの近さ メンバーは各々に裁量があたえられた少数精鋭組織です。だからこそ、経営陣との距離はこれ以上ないほど近く、経営目線をもって仕事に携わることができます。同時に、ベンチャーならではのスモールチームでの開発のおもしろさを経験することができます。 ■働きやすいオフィス環境 品川駅徒歩4分の立地にオフィスがあります。働きやすさが生産性を向上させると考え、広々としたオフィスにはHerman Millerのチェア、ウォーターサーバーやDeLonghiの高級コーヒーメーカーが導入されています。 ■メンバー同士の仲がよい 働きやすい職場造りを目的として、PJT(通称:プロジェクトチーム)と呼ばれる任意参加型の有志メンバーが集まり、そこで様々な意見交換を定期的に行い、様々なイベントや催しを企画しています。 【開発環境】 - Ruby (Rails) - Python - JavaScript (React Redux) - DB : MySQL - Webサーバー : Nginx - インフラ: AWS, Docker - VCS : GitHub - 社内コミュニケーション : Slack 募集背景 立ち上げから間もないベンチャーながら、今期の売上は5億を突破した当社。VCの手助けを得ることなく安心できる事業基盤がすでにできあがっています。現在、業務可視化ツール『Qasee』を展開中ですが、よりスピーディに事業をグロースさせていくために、エンジニアを募集しております。

7085万円/月
業務委託契約
品川駅
PythonRubyJavaScriptC#VCTypeScriptRuby on RailsReactMySQLNginx
フリーランスフルリモート20代活躍30代活躍フリーランス多数週3〜週4〜週5〜長期案件
【React/週3~OK・フルリモート】働き方の根っこの部分から変える・業務可視化ツール「Qasee」をグロースさせる開発エンジニア

業務可視化ツール『Qasee』の開発をお任せします。 完全自社開発のため、要件を決めるところから、設計・開発・テスト・運用まで、全てを経験できます! また、セールスや顧客サポートとの連携を密に行うことでクライアントの声が近く、改善がスピーディに進む環境です。 【具体的な業務内容】 -Qaseeの機能追加や改善のための要件定義 -機能の設計から、実装、テストまでの一連業務 -サービスで取得しているデータを基に、働き方の傾向や特徴を洗い出すためのデータ分析 まずは、オフィスも見ていただきながら、もっと詳しく当社や新規事業についてお話させていただければと思います。少しでも興味を持っていただけたなら、ご応募ください! 【会社の特徴】 ■経営レイヤーとの近さ メンバーは各々に裁量があたえられた少数精鋭組織です。だからこそ、経営陣との距離はこれ以上ないほど近く、経営目線をもって仕事に携わることができます。同時に、ベンチャーならではのスモールチームでの開発のおもしろさを経験することができます。 ■働きやすいオフィス環境 品川駅徒歩4分の立地にオフィスがあります。働きやすさが生産性を向上させると考え、広々としたオフィスにはHerman Millerのチェア、ウォーターサーバーやDeLonghiの高級コーヒーメーカーが導入されています。 ■メンバー同士の仲がよい 働きやすい職場造りを目的として、PJT(通称:プロジェクトチーム)と呼ばれる任意参加型の有志メンバーが集まり、そこで様々な意見交換を定期的に行い、様々なイベントや催しを企画しています。 【開発環境】 - Ruby (Rails) - Python - JavaScript (React Redux) - DB : MySQL - Webサーバー : Nginx - インフラ: AWS, Docker - VCS : GitHub - 社内コミュニケーション : Slack 募集背景 立ち上げから間もないベンチャーながら、今期の売上は5億を突破した当社。VCの手助けを得ることなく安心できる事業基盤がすでにできあがっています。現在、業務可視化ツール『Qasee』を展開中ですが、よりスピーディに事業をグロースさせていくために、エンジニアを募集しております。

47505500円/時
業務委託契約
品川駅
PythonRubyJavaScriptC#VCTypeScriptRuby on RailsReactMySQLNginx
フリーランスフルリモート20代活躍30代活躍フリーランス多数週3〜週4〜週5〜長期案件安定稼働
【React/フルリモート】働き方の根っこの部分から変える・業務可視化ツール「Qasee」をグロースさせる開発エンジニア

業務可視化ツール『Qasee』の開発をお任せします。 完全自社開発のため、要件を決めるところから、設計・開発・テスト・運用まで、全てを経験できます! また、セールスや顧客サポートとの連携を密に行うことでクライアントの声が近く、改善がスピーディに進む環境です。 【具体的な業務内容】 -Qaseeの機能追加や改善のための要件定義 -機能の設計から、実装、テストまでの一連業務 -サービスで取得しているデータを基に、働き方の傾向や特徴を洗い出すためのデータ分析 まずは、オフィスも見ていただきながら、もっと詳しく当社や新規事業についてお話させていただければと思います。少しでも興味を持っていただけたなら、ご応募ください! 【会社の特徴】 ■経営レイヤーとの近さ メンバーは各々に裁量があたえられた少数精鋭組織です。だからこそ、経営陣との距離はこれ以上ないほど近く、経営目線をもって仕事に携わることができます。同時に、ベンチャーならではのスモールチームでの開発のおもしろさを経験することができます。 ■働きやすいオフィス環境 品川駅徒歩4分の立地にオフィスがあります。働きやすさが生産性を向上させると考え、広々としたオフィスにはHerman Millerのチェア、ウォーターサーバーやDeLonghiの高級コーヒーメーカーが導入されています。 ■メンバー同士の仲がよい 働きやすい職場造りを目的として、PJT(通称:プロジェクトチーム)と呼ばれる任意参加型の有志メンバーが集まり、そこで様々な意見交換を定期的に行い、様々なイベントや催しを企画しています。 【開発環境】 - Ruby (Rails) - Python - JavaScript (React Redux) - DB : MySQL - Webサーバー : Nginx - インフラ: AWS, Docker - VCS : GitHub - 社内コミュニケーション : Slack 募集背景 立ち上げから間もないベンチャーながら、今期の売上は5億を突破した当社。VCの手助けを得ることなく安心できる事業基盤がすでにできあがっています。現在、業務可視化ツール『Qasee』を展開中ですが、よりスピーディに事業をグロースさせていくために、エンジニアを募集しております。

7085万円/月
業務委託契約
品川駅
PythonRubyJavaScriptC#VCTypeScriptRuby on RailsReactMySQLNginx
フリーランス20代活躍30代活躍週5〜安定稼働
【SaaSプロダクトデザイン】住宅ローン業界のオンラインプラットフォーム化!MFSのサービスのユーザー体験を向上させるUI/UXデザイナー募集!

MFSは金融×不動産×テクノロジーの分野で「真にユーザーサイドに立った新しいフィナンシャルサービスを作る」ことをミッションとしているスタートアップです。 ビジネスサイドのメンバーやエンジニアたちと連携しながら、各種プロダクトのUI/UXデザインやコーディング、コーポレートブランディングなどデザインに関する業務を広くご担当いただきます。 ご参画いただきましたら開発チーム所属のデザイナーとして、ビジネスサイドを交えた週1回のプランニングや振り返りに参加していただき、開発内容の意義や効果を検証しながらプロダクトのUI/UXデザインに取り組んでいただきます。現在世の中に無いサービスのデザインとなるため、何かを参考にしてカスタマイズしていくより、企画やユーザーの声をもとに試行錯誤する機会が多い環境です。 また、MFSはデザイナーが社長や上司に対して意見を伝えたり営業からのフィードバックも吸い上げるなど、やるべきと思ったことをすぐに実行して、当事者としてプロダクトに携わることができます。各メンバーが自律し、会社全体でプロダクトを作るこのチームを更に良くしていくために、カルチャーづくりにも携わっていただきます。 ■担当するプロダクト ・オンライン住宅ローンサービス モゲチェック ・オンライン不動産投資サービス モゲチェック不動産投資 ・借入可能額判定サービス モゲパス ■主な業務内容 ・企画担当から要件のヒアリング、UXデザイン ・各プロダクトのUIデザイン、コーディング ・印刷物、ノベルティなどのデザイン ■チーム運営 ・ワークスタイル もともと個人裁量で1〜2日/週のリモートワークを導入していましたが、現在はコロナウイルスの影響もあり基本的にフルリモートで業務を行っています。 今後は引き続きリモートを活用しながら、組織の状況に合わせて柔軟に検討していきます。 ・開発スタイル 開発チーム全体としてのコード規約はなく、プロダクトごとのルールで開発をしています。 アジャイルをベースに週1でプランニング、振り返りを行いながら開発しています。 ■制作環境 デザインツール:Adobe Illustrator / Photoshop / XD / figma コーディング:SCSS / Bootstrap 4 / bulma / phpstorm / GitHub 募集背景 完全オンライン型 住宅ローンサービス モゲチェックは収益化に成功し、他の新規プロダクトも市場に受け入れられつつあり、会社としての成長フェーズを迎えています。 新規サービスの立ち上げやリブランディングなど、今後の会社の成長に関わる重要プロジェクトが複数立ち上がっているタイミングです。しかしながら、デザイン領域を取りまとめる責任者が不在で、中長期の取り組みをやりきれていない状況です。 そこで、短期のサービス改善の推進に加えて、MFSがユーザーへ提供できる価値をより高めていくために、プロダクトのUI/UXデザインを始めオーナーシップをもって推進いただけるデザイナーを募集します。

4560万円/月
業務委託契約
大手町駅
HTML5CSS3BootstrapBulmaGitGithubFigmaTypeScriptPhpStorm