メインコンテンツまでスキップ

TypeScript

課題01
TypeScriptコンパイラーのインストール
​

npmを使ってTypeScriptコンパイラーのtscコマンドをインストールしてください。

課題02
tsconfig.jsonの作成
​

tscの設定ファイルであるtsconfig.jsonをnpx tsc --initコマンドで作成してください。

課題03
初めてのTSファイル
​

console.log('Hello World');が書かれたsrc/index.tsファイルを作成してください。

課題04
初めてのコンパイル
​

npx tscコマンドでsrc/index.tsをコンパイルしてください。

課題05
実行する
​

nodeコマンドでコンパイルされたJSファイルを実行してください。

課題06
JSファイルの出力先を変更する
​

tsconfig.jsonを編集してJSファイルの出力先をdistディレクトリに変更してください。

課題07
再度コンパイル
​

npx tscコマンドでもう一度src/index.tsをコンパイルして、dist/index.jsが生成されることを確認してください。

課題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
オブジェクトの型１
​

以下の変数objに型アノテーションを付けてください。

type Obj = /* ここに定義してください */
const obj: Obj = {a: 1, b: 2, c: 3} // オブジェクト

課題10
オブジェクトの型２
​

以下の変数objに型アノテーションを付けてください。

type Obj = /* ここに定義してください */
const obj: Obj = {
  a: 1, 
  b: 'hoge', 
  c: [2, 3, 4],
  d: {
    e: 5, 
    f: 'fuga'
  }
} // オブジェクト

課題11
オブジェクトの型３
​

全てのキーが文字列型でその値が数値型のオブジェクトの型Objを定義してください。Recordを使用しないでください。

type Obj = {
  // ここに追記してください
};

課題12
オブジェクトの型４
​

任意のオブジェクトを意味する型をRecordを使って定義してください。

type AnyObj = /* ここに定義してください */

課題13
オブジェクトの型５
​

全てのキーが文字列型でその値が数値型のオブジェクトの型ObjをRecordを使って定義してください。

type Obj = /* ここに定義してください */

課題14
関数の型１
​

parseInt関数の型ParseIntを定義してください。

type ParseInt = /* ここに型を書いてください */

課題15
関数の型２
​

以下の関数の型GetValueを定義してください。

  • 引数１: 全てのキーが文字列型でその値が数値のオブジェクト
  • 引数２: オブジェクトのキー
  • 戻り値: オブジェクトの値
type GetValue = // ここに型を書いてください

// 使い方
const getValue: GetValue = (obj, key) => obj[key];

課題16
null
​

型Aは数値またはnullです。型Aを定義してください。

type A = /* ここに定義してください */

// 使い方
const a: A = 1;
const b: A = null;

課題17
undefined
​

型Aは文字列またはundefinedです。型Aを定義してください。

type A = // ここに定義してください
const a: A = 1;
const b: A = undefined;

課題18
unknown型
​

unknown型の変数aを検査して、数値であればnumberにキャストする関数を定義してください。

function isNumber(a: unknown): a is number {
  // ここを実装してください。
}

課題19
型のキャスト
​

function isHTMLElement<A extends Node>(node: A): node is HTMLElement {
  /* ここを定義してください。*/
}

課題20
リテラル型１
​

以下の関数getResultの型を省略せずにリテラル型を使って定義してください。

function getResult(status) {
  if (status) return 'Success';
  else return 'Failure';
}

課題21
ジェネリクス
​

以下の関数を型を省略せずに実装してください。

  • 引数: 任意の配列
  • 戻り値: 配列の長さ
function length(array) {
}

課題22
インターセクション
​

以下の２つの型AとBがあります。A & Bはどのような型になりますか？

type A = {
  a: number,
  b: number,
};

type B = {
  c: number,
  d: number
};

課題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
オブジェクトの値の型
​

オブジェクト型の値の型を抽出してください。

例えば、オブジェクト{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
オブジェクトの一部のキーと値
​

任意のオブジェクト型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
オブジェクトの一部の値の型を変更
​

任意のオブジェクト型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
関数の型の抽出
​

関数の戻り値の型を抽出する型を定義してください。

type GetReturn<F> = /* ここに書いてください */

// 使用例

type R = GetReturn<(a: number) => string>; // Rはstringになる