[Type Script独学]#7機能型スクリプト(1)

開始します。

フロントエンド開発者として入社した後、最初にすることはタイプスクリプトを学ぶことです.会社が行っているプロジェクトはすべてタイプスクリプトと反応器で、以前タイプスクリプトを勉強したことがありますが、実際のプロジェクトで使用するには十分ではありません.この本は推薦されて読み、簡単に整理しようとした.

機能タイプスクリプト

これは、短いコードの例とともにタイプスクリプトコードを記述するポリシーを説明した本で、基本タイプスクリプトの構文を知っている人のために書かれた本です.しかし、この本の内容は難しくないと思います.JavaScriptを理解してタイプスクリプトを学びたい人、特に実際の仕事でタイプスクリプトを使う必要がある人にぴったりです.

第1章タイプスクリプトについて

タイプスクリプトの実行時とタイプフィルタは別々です。

const names = ['Alice', 'Bob'];
console.log(names[2].toUpperCase());

//타입체크 통과, 런타임시 에러

タイプスクリプトはjavascriptの拡張版と言え、実際にjavascriptにコンパイルして実行します.コードを実行する部分とタイプフィルタは別々なので、コードを作成するときにタイプエラーが発生しても、実行時に正常に動作します.上記の例では逆に、nameタイプをstring[]と推定し、タイプチェックに問題はありませんが、実行時にエラーが発生します.

どんなタイプのものも使用しないでください。

   let age: number;
   age = '12' as any;  // OK
function calculateAge(birthDate: Date): number {
  return 0;
}

let birthDate: any = '1990-01-19';
calculateAge(birthDate);  // OK

どのタイプでもフラグは無視され、自動補完機能も使用できないため、使用は避けるべきです.

第2章タイプスクリプトにおけるタイプシステム

タイプを取得するには、カッコ記号を使用する必要があります。

interface Person {
  first: string;
  last: string;
}
const p: Person = { first: 'Jane', last: 'Jacobs' };
const first: Person['first'] = p['first'];  // Or p.first

タイプブレークスルーと比較して、タイプ宣言を使用します。

interface Person { name: string };
const alice: Person = {};
   // ~~~~~ Property 'name' is missing in type '{}'
   //       but required in type 'Person'
const bob = {} as Person;  // No error

タイプアサーション強制指定タイプ、エラーは発生しません.

接尾辞nullではない断言文

const elNull = document.getElementById('foo');  // Type is HTMLElement | null
const el = document.getElementById('foo')!; // Type is HTMLElement

as unknown as

interface Person { name: string; }
const body = document.body;
const el = body as Person;

bodyタイプはPersonタイプと十分なオーバーラップがなく、断言文は使用できず、すべてのタイプが未知のタイプのサブタイプであるため、as unknown as Personで断言文を記述することができる.

オブジェクトRapperではなく基本タイプを使用する必要があります。例外）Symbol、BigInt

const s: String = "primitive";
const n: Number = 12;
const b: Boolean = true;
//string, number, boolean 사용

function isGreeting(phrase: String) {
  return [
    'hello',
    'good day'
  ].includes(phrase);
          // ~~~~~~
          // Argument of type 'String' is not assignable to parameter
          // of type 'string'.
          // 'string' is a primitive, but 'String' is a wrapper object;
          // prefer using 'string' when possible
}

stringはStringに割り当てることができるが、Stringはstringに割り当てることができない.

残りの属性のチェック

interface Options {
  title: string;
  darkMode?: boolean;
}
const intermediate = { lightMode: true, title: 'Ski Free' };
const o: Options = intermediate;  // OK

オブジェクトのテキストの残りのプロパティチェックのみを行うため、一時変数を使用するとチェックがスキップされます.

interface LineChartOptions {
  logscale?: boolean;
  invertedYAxis?: boolean;
  areaChart?: boolean;
}
const opts = { logSize: true };
const o: LineChartOptions = opts;

選択可能な属性のみを持つ弱いタイプは、残りの属性チェックを行います.

再利用可能な式を使用することが望ましい。

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = sides => { /* COMPRESS */ return 0; /* END */ };

関数のパラメータから戻り値まで、タイプ全体をタイプとして宣言して、関数式で再利用できるので、タイプスクリプトの式は良いです.

type BinaryFn = (a: number, b: number) => number;
const add: BinaryFn = (a, b) => a + b;
const sub: BinaryFn = (a, b) => a - b;
const mul: BinaryFn = (a, b) => a * b;
const div: BinaryFn = (a, b) => a / b;

関数式を使用したタイプの再使用の例

interface vs type

typeは、インタフェース機能に違いはありません.

インデックスフラグはtype、interfaceであってもよい.

type TState = {
  name: string;
  capital: string;
}
interface IState {
  name: string;
  capital: string;
}
type TDict = { [key: string]: string };
interface IDict {
  [key: string]: string;
}

関数タイプtypeは、インタフェースで使用できます.

type、インタフェースはすべて使用できます.

typeは拡張できないので、&を使用して拡張する必要があります.

Unionタイプは存在しますが、Unionインタフェースは存在しません.

typeは、図面と配列タイプを定義する上でより簡潔です.

type Pair = [number, number];
type StringList = string[];
type NamedNums = [string, ...number[]];

interface Tuple {
  0: number;
  1: number;
  length: 2;
}
const t: Tuple = [10, 20];  // OK

インタフェースは、宣言をマージすることができる.

interface IState {
  name: string;
  capital: string;
}
interface IState {
  population: number;
}
const wyoming: IState = {
  name: 'Wyoming',
  capital: 'Cheyenne',
  population: 500_000
}; 

n/a.結論

複雑タイプ=>タイプ

単純タイプ=>一貫性の観点から、タイプorインタフェース

セグメント、補強可能な新規項目である場合、インタフェース

タイプの重複を考慮して、コードを作成します。

interface Person {
  firstName: string;
  lastName: string;
}

interface PersonWithBirthDate extends Person {
  birth: Date;
}

type PersonWithBirthDate = Person & { birth: Date };

extendsキーワードと&を使用したタイプの重複除外

interface State {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
  pageContents: string;
}
type TopNavState = {
  userId: State['userId'];
  pageTitle: State['pageTitle'];
  recentFiles: State['recentFiles'];
};

TopNavStateをStateのサブセットに拡張し、TopNavStateを重複除外に拡張するのではなく、インデックスで重複除外する

interface State {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
  pageContents: string;
}
type TopNavState = {
  [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k]
};

inキーを使用して重複タイプと重複コードを除去する:Pickキーと同じ

interface Options {
  width: number;
  height: number;
  color: string;
  label: string;
}
type OptionsUpdate = {[k in keyof Options]?: Options[k]};

オプションのフィールドを持つタイプはin keyofと?インプリメンテーションの使用:パーティションキーと同じ

インデックスフラグ

type Rocket = {[property: string]: string};
const rocket: Rocket = {
  name: 'Falcon 9',
  variant: 'v1.0',
  thrust: '4,940 kN',
};

インデックスフラグの欠点
エラーを許可する鍵

必要な鍵がない

キーには異なるタイプの

は使用できません.

自動補完機能は使用できません

配列タイプはforを使用することが望ましい。

const xs = [1, 2, 3];
for (const x of xs) {
  x;  // Type is number
}

const xs = [1, 2, 3];
for (let i = 0; i < xs.length; i++) {
  const x = xs[i];
  if (x < 0) break;
}

ループの真ん中に停止する必要がある場合は、for文を使用し、インデックスの最初にnumberを使用します.tupleや配列を使用するよりも.

const xs = [1, 2, 3];
function checkedAccess<T>(xs: ArrayLike<T>, i: number): T {
  if (i < xs.length) {
    return xs[i];
  }
  throw new Error(`Attempt to access ${i} which is past end of array.`)
}

Tupleを使いたいならArrayLikeを使えます.

の最後の部分

この本は基本的な説明から深い内容までのコードを書くのに役立つと思います.その中には多くのサンプルコードが含まれています.内容が多く、実際の仕事では把握できないこともあるので、これからも探して把握していく本だと思います.