TypeScript
課題01
TypeScriptコンパイラーのインストール
課題01
npmを使ってTypeScriptコンパイラーのtscコマンドをインストールしてください。
課題02
tsconfig.jsonの作成
課題02
tscの設定ファイルであるtsconfig.jsonをnpx tsc --initコマンドで作成してください。
課題03
初めてのTSファイル
課題03
console.log('Hello World');が書かれたsrc/index.tsファイルを作成してください。
課題04
初めてのコンパイル
課題04
npx tscコマンドでsrc/index.tsをコンパイルしてください。
課題05
実行する
課題05
nodeコマンドでコンパイルされたJSファイルを実行してください。
課題06
JSファイルの出力先を変更する
課題06
tsconfig.jsonを編集してJSファイルの出力先をdistディレクトリに変更してください。
課題07
再度コンパイル
課題07
npx tscコマンドでもう一度src/index.tsをコンパイルして、dist/index.jsが生成されることを確認してください。
課題08
プリミティブの型
課題08
以下のコードの変数に型アノテーションを付けてください。
const a: /* ここに定義してください */ = 1; // 数値
const b: /* ここに定義してください */ = true; // ブール
const c: /* ここに定義してください */ = 'hoge'; // 文字列
const d: /* ここに定義してください */ = [1, 2, 3]; // 配列
const e: /* ここに定義してください */ = ['a', 1, true]; // タプル
const f: /* ここに定義してください */ = [[1, 2], [3, 4]]; // 配列の配列
課題09
オブジェクトの型１
課題09
以下の変数objに型アノテーションを付けてください。
type Obj = /* ここに定義してください */
const obj: Obj = {a: 1, b: 2, c: 3} // オブジェクト
課題10
オブジェクトの型２
課題10
以下の変数objに型アノテーションを付けてください。
type Obj = /* ここに定義してください */
const obj: Obj = {
a: 1,
b: 'hoge',
c: [2, 3, 4],
d: {
e: 5,
f: 'fuga'
}
} // オブジェクト
課題11
オブジェクトの型３
課題11
全てのキーが文字列型でその値が数値型のオブジェクトの型Objを定義してください。Recordを使用しないでください。
type Obj = {
// ここに追記してください
};
課題12
オブジェクトの型４
課題12
任意のオブジェクトを意味する型をRecordを使って定義してください。
type AnyObj = /* ここに定義してください */
課題13
オブジェクトの型５
課題13
全てのキーが文字列型でその値が数値型のオブジェクトの型ObjをRecordを使って定義してください。
type Obj = /* ここに定義してください */
課題14
関数の型１
課題14
parseInt関数の型ParseIntを定義してください。
type ParseInt = /* ここに型を書いてください */
課題15
関数の型２
課題15
以下の関数の型GetValueを定義してください。
- 引数１: 全てのキーが文字列型でその値が数値のオブジェクト
- 引数２: オブジェクトのキー
- 戻り値: オブジェクトの値
type GetValue = // ここに型を書いてください
// 使い方
const getValue: GetValue = (obj, key) => obj[key];
課題16
null
課題16
型Aは数値またはnullです。型Aを定義してください。
type A = /* ここに定義してください */
// 使い方
const a: A = 1;
const b: A = null;
課題17
undefined
課題17
型Aは文字列またはundefinedです。型Aを定義してください。
type A = // ここに定義してください
const a: A = 1;
const b: A = undefined;
課題18
unknown型
課題18
unknown型の変数aを検査して、数値であればnumberにキャストする関数を定義してください。
function isNumber(a: unknown): a is number {
// ここを実装してください。
}
課題19
型のキャスト
課題19
function isHTMLElement<A extends Node>(node: A): node is HTMLElement {
/* ここを定義してください。*/
}
課題20
リテラル型１
課題20
以下の関数getResultの型を省略せずにリテラル型を使って定義してください。
function getResult(status) {
if (status) return 'Success';
else return 'Failure';
}
課題21
ジェネリクス
課題21
以下の関数を型を省略せずに実装してください。
- 引数: 任意の配列
- 戻り値: 配列の長さ
function length(array) {
}
課題22
インターセクション
課題22
以下の２つの型AとBがあります。A & Bはどのような型になりますか？
type A = {
a: number,
b: number,
};
type B = {
c: number,
d: number
};
課題23
オブジェクトのキー型
課題23
オブジェクト型のキーの型を抽出してください。
例えば、オブジェクト{a: number, b: number, c: number}のキーの型を抽出すると'a' | 'b' | 'c'となります。
type Obj = {a: number, b: number, c: number};
type Keys = /* ここを定義してください */
const a: Keys = 'a';
const b: Keys = 'b';
const c: Keys = 'c';
// エラー
// const d: Keys = 'd';
課題24
オブジェクトの値の型
課題24
オブジェクト型の値の型を抽出してください。
例えば、オブジェクト{a: number, b: string, c: boolean}の値の型を抽出するとnumber | string | booleanとなります。
type Obj = {a: number, b: number, c: number};
type Values = /* ここを定義してください */
const a: Values = 1;
const b: Values = 'hoge';
const c: Values = true;
// エラー
// const d: Values = [];
課題25
オブジェクトの一部のキーと値
課題25
任意のオブジェクト型Objの値の型がstring型のキーと値を抽出する型を定義してください。
type ExtractString<Obj> = /* ここを定義してください */
例えば、オブジェクト{a: number, b: string, c: boolean}の場合は、{b: string}となります。
// 使い方
type NewObj = ExtractString<{
a: number;
b: string;
c: boolean;
}>;
const a: NewObj = {b: 'hoge'};
// エラー
// const a: NewObj = {a: 1, b: 'hoge'};
課題26
オブジェクトの一部の値の型を変更
課題26
任意のオブジェクト型Objの値がnumber型をstringに変更する型を定義してください。
type NumberToString<Obj> = /* ここを定義してください */
例えば、オブジェクト{a: number, b: string, c: boolean}の場合は、{a: string, b: string, c: boolean}となります。
// 使い方
type NewObj = NumberToString<{
a: number;
b: string;
c: boolean;
}>;
const a: NewObj = {a: 'a', b: 'b', c: true};
// 以下はコンパイルエラー
// const a: NewObj = {a: 1, b: 'b', c: true};
課題27
関数の型の抽出
課題27
関数の戻り値の型を抽出する型を定義してください。
type GetReturn<F> = /* ここに書いてください */
// 使用例
type R = GetReturn<(a: number) => string>; // Rはstringになる