Typescript

TypeScriptは、マイクロソフトが2012年に発表したJavaScriptに開発・コンパイルした言語です.JavaScriptに静的タイピングとES 2015に基づくオブジェクト向け構文を追加したのが主な特徴です.
タイプスクリプトのガイドについては、次のページを参照してください.
TypeScriptハングルドキュメント

どうして書きますか。

タイプスクリプトを使用して、次の操作を行います.

は、誤ったタイプの割り当てによるサービスエラーを事前に防止することができる.

で使用される変数の値を容易に決定することができる.

は、既存のJavaScriptコードに影響を及ぼさずに使用することができる.

設定

テストするアイテムを作成します.
ts testというフォルダを作成し、vs codeで開きます.
この項目では、yarn init -yと入力してパッケージを生成する.
次のモジュールをインストールします.

# 타입스크립트 모듈
yarn add typescript
# 타입스크립트를 콘솔에서 실행가능하게 해주는 모듈
yarn add ts-node

2つのモジュールのインストールが完了した場合は、次のコマンドを入力してタイプスクリプト設定を適用します.

yarn run tsc --init

上記のコマンドを適用すると、tsconfig.jsonファイルが生成され、タイプスクリプトの設定を適用できます.test.tsファイルが生成されます.
(typescriptファイルの拡張子は.tsです.)
ファイルに各タイプの変数を設定します.

タイプの設定

// 숫자 타입
const numbers: number = 100;

// 문자 타입
const strings: string = 'hello rony';

// trun or false
const YesOrNo: boolean = true;

// 숫자로 이루어진 배열
const lotte_number: number[] = [1, 15, 30, 31, 35, 36];

// 문자로 이루어진 배열
const dojae_students: string[] = ['chobby', 'sunny', 'kali', 'irving', 'karen'];

// enum
const color: 'red' | 'blue' | 'yellow' = 'blue';

// 정의되지 않은 속성값을 할당하는경우
const anyType = {
	[key: string]: string
}
// 또는
const anyType = {
	Record<string, string>
}

既存のJavaScriptと同様に、変数の横に:타입が指定されている点が異なります.
タイプが設定されているため、設定されたタイプと他のタイプの値が変数に割り当てられると、エラーが表示されます.

Compile

yarn run tsc

上記のコマンドを入力するとtest.jsファイルを生成してファイルにアクセスすると、以前に作業したjsファイルが作成されたことを確認できます.
これは、実際の導入時にブラウザがタイプスクリプトをサポートしない可能性があるため、ブラウザが認識可能なjsファイルにコンパイルするタスクです.
このプロセスでは、タイプが正常に割り当てられていない場合、構築に失敗し、開発者がどの部分に問題があるかを簡単に理解できます.

現在設定されていないため、ルートパスにjsファイルが作成されますが、tsconfigです.jsonファイルを変更します.jsファイルの生成パスを指定できます.

// tsconfig.json
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
		"outDir": "./dist",                        /* Redirect output structure to the directory. */
    .....

tsconfig.jsonのoutdirのコメントをキャンセルし、フォルダ名を入力し、stream run tscコマンドを入力します./dist/test.jsファイルが生成された部分を確認します.
生成されたjsファイルはvar変数を使用します.これはtargetがes 5であるため、これをes 6に変更するとconst、letなどのes 6構文が使用されます.jsファイルを生成します.
では、生成されたコードはどのように実行されますか?node test.tsで運転するとエラーが発生します.
nodeのファイルは次のように実行されます.jsファイルしか使用できないので、nodeとして実行するにはdistでコンパイルする必要があります.jsファイルをロードして実行する必要があります.
ただし、前にインストールしたts-nodeを使用すると、コンパイルを必要とせずにtsファイルを直接実行できます.

yarn run ts-node test.ts

端末出力値が正常に出力されているかどうかを確認します.

n.関数

関数の使用時にタイプを指定する方法について説明します.
関数の場合、inputとoutputがあるため、両方のタイプを同時に指定できます.

function programmer (name: string): string {
  return name;
}

const user = programmer('rony');

// 또는 다음과 같이 함수 타입 정의
interface FuncType = {
	(name: string): string;
}

const user: FuncType = function programmer (name) {
  return name;
}

関数のパラメータの横にinputタイプを設定したり、パラメータカッコの後ろにreturnタイプを設定したりできます.
戻りタイプが設定されているため、programmer関数呼び出し値を受信するuserはstringタイプとして定義される.

type, interface

オブジェクトであれば、どのようにタイプ宣言をすればいいですか?
オブジェクトの場合はtypeまたはinterfaceでタイプを定義し、定義したタイプを変数に割り当てることでタイプを定義します.

// 타입을 먼저 선언하고 해당 타입의 값을 설정한다.
type RONY = {
  name: string;
  age: number;
  company: string;
  like_alcol: boolean;
};

// 변수선언시 설정한 타입을 할당한다.
const man: RONY = {
  name: 'rony',
  age: 39,
  company: 'playauto',
  like_alcol: true
};

上記の場合、man変数はRONYタイプに割り当てられるので、RONYで宣言されたフィールドを含める必要があります.
値が1つ欠けていると、次の画像に示すタイプのエラーが発生します.

使用する変数に特定のフィールドがあるか、ない場合は、タイプを宣言しますか?入れておけばいい

type RONY = {
  name: string;
  age: number;
  company: string;
  like_alcol?: boolean;
};

オブジェクトタイプをtypeではなくインタフェースとして定義するには、次の操作を行います.

interface RONY {
  name: string;
  age: number;
  company: string;
  like_alcol?: boolean;
};

インタフェースを使用する利点は、クラスに継承して使用できることです.

interface HUMAN {
  man(): {
    name: string;
    age: number;
    company: string;
    like_alcol?: boolean;
  },
  woman(): {
    name: string;
    age: number;
    company: string;
    like_alcol?: boolean;
  }
};

class Human implements HUMAN {
  man() {
    return {
      name: 'chobby',
      age: 19,
      company: 'playauto'
    }
  };
  woman() {
    return {
      name: 'sunny',
      age: 19,
      company: 'playauto'
    }
  };
};

上記のコードに示すように、関数を持つHUMANというインタフェースをHumanクラスに継承することによって、関連データを処理することができる.
拡張インタフェース

の複数のインタフェースを組み合わせて使用することもできます.

interface Worker {
	name: '로니';
}
interface Person {
	age: 20
}

// worker + person + 새로운 타입을 추가한 인터페이스를 생성하려면..?
interface Programer extends Worker, Person {
	job: 'programer'
}

// Programer 은 다음과 같은 타입을 가지게 된다.
/*
interface Programer {
	name: '로니',
	age: 20,
	job: 'programer'
}
*/

// expends 를 통한 확장외에 &를 사용해서 하나로 합칠 수 있다.
type User = Worker & Person;

タイプ宣言でtypeとinterfaceのどちらを使用しても関係ありませんので、一貫性を遵守するには、を参照してください.

Generics

ジェニーンリックは、固定タイプではなく、コールタイプがどんなタイプなのか分からないときに使用します.
一般的には汎用関数の作成時に使用され、呼び出しなどが使用されます.
△Tを使わずに自分の書きたい値を書くことができます.
2つの因子を受け入れて配列に戻る関数があるそうです.
文字列を使用してパラメータを受信する場合と、数値を使用してパラメータを受信する場合で使用するタイプが異なるため、処理ロジックが同じであっても、それぞれの関数を生成する必要があります.

// 숫자를 인자로 받는경우
const sumArrNumber = (A: number, B: number): number[] => {
	const arr = [];
	
  arr.push(A);
  arr.push(B);

  return arr;
};

// 문지를 인자로 받는경우
const sumArrString = (A: string, B: string): string[] => {
	const arr = [];
	
  arr.push(A);
  arr.push(B);

  return arr;
};

上記の例では、sumarNumberとsumarStringは、処理ロジックが同じですが、パラメータのタイプと戻りタイプが異なるため、個別の関数として作成されます.
ただし、genericを使用する場合は、関数として処理できます.

// Generic 
const sumArr = <T1, T2>(A: T1, B: T2): (T1 | T2)[]  => {
  const arr = [];
	
  arr.push(A);
  arr.push(B);

  return arr;
};

// 숫자로 호출
const returnNumber = sumArr(1, 2);

//문자로 호출
const returnString = sumArr('work', 'life');

前述したように、JENICを使用すると、呼び出しの種類が異なっていても、論理が同じであれば、関数として扱うことができる.
-- END --