李在勝の実戦反応プログラム整理の内容を読みました

タイプスクリプトとは?

タイプスクリプトは、JavaScriptのすべての機能を含む静的タイプをサポートする言語です.ダイナミックタイプ言語と静的タイプ言語にはそれぞれメリットとデメリットがあり、プロジェクトの性質に応じて選択します.大規模なプロジェクトでは、静的タイプの言語を推奨します.

どうしたんですか。

静的タイプの言語のコードはタイプで相互に接続されているため、関連するコード間を移動しやすく、変数名や関数名の変更などの再構築も容易です.
タイプスクリプトはマイクロソフトによって開発され、更新され続け、反応開発者の意見をよく反映することができるので、JSX構文と反応素子のタイプを定義するのはあまり難しくありません.

タイプスクリプトのフィーチャー

let v1 = 123;
v1 = 'abc'; // 타입 에러

タイプが数値の変数にstringを入力すると、コンパイル時にエラーが発生します.コードを実行する前にエラーが発生する可能性があります.この自動認知型の機能をタイプ推定と呼ぶ.

タイプスクリプトでタイプを宣言する

「≪タイプ・スクリプト｜Type Script｜Eas≫」で、変数のタイプが数値であっても文字列であってもよい場合は、次のタイプの情報を入力します.

let v1: number | string = 123;
v1 = 'wow'

異なるタイプのスクリプト

const age: number = 27;
const isOld: boolean = age >= 40;
const msg: string = isOld ? '많다' : '적다';

JavaScriptで使用されるタイプは、タイプスクリプトで使用されるタイプと同じであることがわかります.

const values: number[] = [1, 2, 3];
const values2: Array<number> = [1, 2, 3];

配列タイプは、上記の2つの方法で定義できます.どちらも同じです.

values.push('a'); // 타입 에러

const data: [string, number] = [msg, age];
data[0].substr(1);
data[1].substr(1);	// 타입 에러

2番目の別名のタイプは文字列ではなく数値で、文字列メソッドsubstrを呼び出すとタイプエラーが発生します.

nullとundefinedタイプ

JavaScriptでは、値として存在するnullとundefinedがタイプスクリプトでそれぞれタイプとして存在する.

let v1: undefined = undefined;
v1 = "wow"; // 타입 에러

let v2: number | undefined = undefined;
v2 = 801;

テキストタイプと数値テキストタイプ

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; // 타입 에러

let v2: '엄마' | '아빠';
v2 = '형'; // 타입에러

任意のタイプ

名前のようにすべてのタイプの値を許可するタイプ.数値、文字列、関数を入力することもできます.タイプエラーが発生した場合は、一時的にanyタイプとして定義します.ただし、anyを乱発するとタイプスクリプトを使う意味がないので、なるべく使わないようにしましょう!

voidとnewタイプ

値を返さずに終了する関数の戻りタイプは、voidタイプとして定義されます.正常終了ではなく異常が発生したため、または無限ループのために終了しない関数の戻りタイプは、neverタイプとして定義される.

objectタイプ

JavaScriptのオブジェクトタイプと同じです.

let v: object;
v = { name: 'mia' };
console.log(v.age); // 타입 에러

オブジェクトのプロパティに関する情報がないため、タイプエラーが発生します.属性情報を含むタイプを定義するには、インタフェース(interface)を使用する必要があります.

クロスタイプとユニオンタイプ

交差タイプ(&)およびUnionタイプ(|)として、複数のタイプの交差および並列セットを表すことができる.

let v1 = (1 | 2 | 3) & (3 | 6 | 9);
v1 = 3;
v1 = 1; // 타입 에러

エイリアスループがtypeキー

タイプ別名は、タイプを宣言するときに便利に使用できます.

type Width = number | string;
let width: Width;
width = 100;
width = '100px';

Widthは通常のタイプのように使用できます.

列挙タイプ

列挙タイプはenumキーワード定義を使用します.列挙タイプの各要素は、値としてもタイプとしても使用できます.

enum Job {
  Police,
  Doctor,
  Developer,
}
const v1: Job = Job.Police;
const v2: Job.Police | Job.Developer = Job.Developer;

要素に値を明示的に入力できます.列挙タイプの最初の要素に値が割り当てられていない場合は、0が自動的に割り当てられます.各要素に数値または文字列を割り当てることができます.値が明示的に入力されていない場合、前の要素に1を加えた値が割り当てられます.

enum Job {
  Police,
  Doctor = 10,
  Developer,
}
console.log(Job.Police, Job.Doctor, Job.Developer) // 0, 10, 11

列挙タイプはオブジェクトとして存在し、各要素の名前と値は双方向にマッピングされます.これらのフィーチャーのため、列挙タイプはオブジェクトと同じでも、値を使用して名前を取得できます.

enum Job {
  Police,
  Doctor = 10,
  Developer,
}
console.log(Job.Doctor) // 10
console.log(Job['Doctor']) // 10
console.log(Job[10]) // Doctor

列挙タイプの値に文字列を割り当てる

enum Language {
  Korean: 'ko',
  Japanese: 'jp',
  English: 'En',
}

列挙タイプの要素に文字列を割り当てると、一方向マッピングされます.これは、異なる要素の名前や値が同じ場合に競合しないようにするためです.

定数列挙タイプ

列挙タイプはコンパイル後も存在するため、バンドルファイルのサイズが大きくなる可能性があります.定数列挙タイプを使用すると、コンパイル結果に列挙タイプのオブジェクトは保持されません.

const enum Language {
  Korean: 'ko',
  Japanese: 'jp',
  English: 'En',
}

上記のタイプを定数として定義すると、コンパイル後に生成オブジェクトのコードが表示されません.ただし、列挙タイプを定数として定義すると、列挙タイプのオブジェクトは使用できません.

const enum Language {
  Korean: 'ko',
  Japanese: 'jp',
  English: 'En',
}
console.log(getEnumLength(Language)); // 타입 에러

関数のタイプ

関数タイプを作成するには、パラメータタイプと戻りタイプが必要です.これらのタイプはコロンで定義できます.

function getInformation(name: string, age: number): string {
  ...
}

パラメータタイプ:name: string、age: number戻りタイプ:): string

const v1: string = getInformation('mia', 26);
const v2: string = getInformation('mia', '26'); // 타입 에러
const v3: number = getInformation('mia', 26); // 타입 에러

変数を関数タイプとして定義

整数を格納する変数タイプには、矢印記号を使用します.実装関数のコードでは、パラメータタイプと戻りタイプを記述する必要はありません.

const getInformation: (name: string, age: number) => string = function(name, age) {
  ...
}

パラメータの選択

選択パラメータは入力する必要のないパラメータです.パラメータ名の右側に疑問符を入力します.

function getInformation(name: string, age: number, height?: numebr): string {
  ...
}

選択パラメータを入力する場合は、定義タイプを満たす値を入力する必要があります.
選択したパラメータの右側に必要なパラメータがある場合は、コンパイルエラーが発生します.
->エラーなしで実行するには、undefinedを入力する必要があります.

パラメータのデフォルト値の定義

function getInfo(
  name: string,
  age: number = 26,  // 매개변수의 기본값을 정의
  language = "english",
): string {
    ...
}
    
console.log(getInfo('mia'));
console.log(getInfo('mia', 27));
// 둘 다 정상적인 호출

const fun1:(
  name: string,
  age?: number,
  language?: string,
) => string = getInfo;

デフォルト値を持つパラメータは、選択パラメータです.

残りのパラメータ

function getInfo(name: string, ...rest: string[]): string {
	...
}

残りのパラメータは配列として定義できます.

このタイプ

関数のこのタイプが不明な場合は、デフォルトで任意のタイプが適用されます.したがって、このタイプを定義したほうがいいです.

function getParam(index: number): string {
  const params = this.splt(',');
  if (index < 0 || params.length <= index) {
    return '';
  }
  return this.split(',')[index];
}

このタイプはanyなので、コンパイルエラーは発生しません.このタイプは、最初のパラメータ位置で定義できます.

function getParam(this: string, index: number): string {
  const params = this.splt(','); // 타입 에러
}

➊indexは2番目のパラメータの位置にありますが、このタイプはパラメータではありませんので、indexは1番目のパラメータです.

元のタイプにメソッドを追加

元のタイプにメソッドを登録するときにインタフェースを使用します.

interface String { // 문자열타입에 getParam 메서드 추가
  getParam(this: string, index: number): string;
}
String.prototype.getParam = getParam; // 문자열 프로토타입에 함수 등록
console.log('wow, 123, yes'.getParam(1)); // 호출가능!

関数のリロードかんすうのさいか:複数のタイプを定義するふくすうのたいぷをていぎする

関数のリロードでは、1つの関数で複数のタイプを定義できます.次の処理にadd関数を作成するとします.

両方のパラメータは文字列を返します->文字列

両方のパラメータは数値->戻り数値

2つのパラメータは異なるタイプではありません.

関数の再ロードを無効にする場合

function add(x: number | string, y: number | string): number | string {
  if (typeof x === 'number' && typeof y === 'number') {
      return x + y;
    } else {
      const result = Number(x) + Number(y);
      return result.toString();
    }
}
const v1: number = add(1, 2); // 타입 에러?
console.log(add(1, '2'));

うん.すべてのパラメータが数値である場合、戻り値も数値であると考えられますが、タイプが間違っています.2つのパラメータのタイプが異なる場合でも、タイプエラーは発生しません.関数のタイプを具体的に定義していないためです.この場合は関数リロードを使用します.

RunJSconst v1: number = add(1, 2);で正常に動作し、エラーはありません.原因が分からない.改善しましたか?

関数リロードを使用する場合

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: number | string, y: number | string): number | string {
	...
}
console.log(add(1, 2)); // 타입 에러

この部分はよく理解できません.理解したら追加します.
+)
次の例では、add関数には2つの宣言子と1つの実装子があります.
関数宣言子と実装子のパラメータ数は同じでなければならないことに注意してください.
関数実装セクションではanyがよく使用されます.

名前付きパラメータ

function getInfo({
  name,
  age = 26, // 기본값이 있다면 여기서 같이 정의한다.
  language, // 매개변수의 이름 정의
}: {
  name: string;
  age?: number;
  language?: string; // 매개변수의 타입 정의
}): string {
  const nameText = name.substr(0, 10);
  const ageText = age > 40 ? 'senior' : 'junior';
  return `name: ${nameText}, age: ${ageText}, language: ${language}`;
}

名前付きパラメータのタイプを再使用する場合は?インタフェースを使用!

interface Param {
  name: string;
  age?: number;
  language?: string; // 매개변수의 타입을 인터페이스로 정의
}
function getInfo({ name, age = 26, language }: Param): string {
	... // Param 인터페이스를 사용한다
}

明日はインタフェースジョージ期...決意...