[効果型スクリプト]-1週目

私たちはNekaraku杯の前端第2期の同僚と前端研究を行うことにしました.今週から機能型スクリプト研究を行い、整理した内容をネット上にアップロードします.
Github組織アドレス:https://github.com/FEonTheBlock
レポートアドレス:https://github.com/FEonTheBlock/Effective-TypeScript
第1章
[プロジェクト1]タイプスクリプトとJavaScriptの関係を理解する
文法の有効性と動作の焦点は独立した問題である.
つまり、文法が正しくなくても、動作が全くできないわけではありません.
タイプスクリプトは、タイプ推定によってタイプを理解し、タイプインスペクタは問題を検索します.(推定文字列、推定toUpperCaseメソッド)(小文字→大文字)

// city의 타입을 string으로 추론하고
let city = 'new york city';
console.log(city.toUppercase()); // 에러 발생 -> toUpperCase()를 의미하는 것인지?

タイプスクリプトにタイプ構文を追加すると、より多くのエラーが発生します.→states例(stateのインタフェースまたはタイプを定義して開発者の意図通りに使用する)
タイプスクリプトタイプシステムはJavaScriptのランタイム動作を「モデリング」しますが、タイプフィルタによって予期せぬ例外コードも検出されます.
作成したプログラムがタイプチェックに合格しても、実行時にエラーが発生する可能性があります.

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

配列は範囲内で使用されると仮定していましたが、そうではないため、問題が発生しました.
エラーの根本的な原因は、タイプスクリプトが理解する値と実際の値に違いがあることです.(値のタイプを理解する:nameの文字列vs実際の値:undefined)
[プロジェクト2]タイプスクリプトの設定について
タイプスクリプトを正しく使用するには、少なくとも次の2つの設定を設定します.

"noImplicitAny": true, // 암묵적 any 금지(명시적으로 써줘야함)
"strictNullChecks": true, // null, undefined 타입 허용X

→簡単にするにはstrictㄱを設置するだけ

"strict": true,

コード生成がタイプに依存しないことを理解する[プロジェクト3]
タイプスクリプトコンパイラの2つのロール

ブラウザ動作用変換ファイル

からJSの旧バージョン

コードタイプエラーチェック

独立して完成!
タイプスクリプトでできることとできないこと

のタイプのエラーのコードもコンパイルできます(ブロックしたい場合はEmitOnErrorなしに設定します)

実行時にタイプをチェックできない(属性チェック、タグ技術、クラス宣言を使用)

.

タイプ演算では、実行時にタイプをチェックする必要があります(値制御が必要な場合)

ランタイムタイプと宣言タイプが異なる場合があります.覚えておいてください.

タイプのスクリプトタイプで、関数リロード

はサポートされていません.

タイプのスクリプトタイプ影響X→構築時間オーバーヘッド

≪インクリメンタル構築|Incremental Build|emdw≫:コンパイルに関連するレコード・ファイルを保持します.  tscを効率的にコンパイルするだけでよい
インクリメンタル構築リファレンスサイト:https://elvanov.com/2524
[物品4]構造タイピングに精通している
JSは、デフォルトのタイプに基づいています(オブジェクトに何らかのタイプに一致する変数とメソッドがある場合は、オブジェクトがそのタイプに属しているとみなされます!)このRATSもモデル化されています
→それでも問題が発生する

が標準化する場合、他のインタフェースオブジェクトがインタフェースを離れることなくアクセスする場合、問題が発生する可能性がある

.

と同様に、Vector 3 Dインタフェースに文字列を含むインタフェースを拡張する場合、個数だけを計算する関数に問題が生じる→ループではなくすべての属性をそれぞれ求めることで

を解決する.

作成者は、クラス作成者が返したインスタンスのオブジェクトタイプをインタフェースのオブジェクトとしてクラスに貼り付けることもできます.これにより、エラーは発生しません.const d: C = { foo: ‘object literal’ } // OK! console.log(d(일반객체) instanceof C) // false

は逆にテストで構造的にタイプするのが有利です!→論理とテストを抽象(DBインタフェース)により特定の実施形態から分離する

.
TSのタイプは常にオープンです.
[アイテム5]anyタイプ禁止anyタイプを使用すると、タイプチェック、自動完了サービスが失効し、開発経験が悪くなり、信頼性が低下し、使用を避けることができます.any型の問題

タイプセキュリティなし

関数でタグを無視する(呼び出し元によって所定のタイプの入力が提供される必要があり、伝達パラメータがanyタイプである場合、タグは無視される)

.

自動完了等言語サービスX

コード再構成時エラー非表示(関数(タイプ:number)引数として使用する関数(タイプ:any)のコールバック関数問題)

タイプ非表示設計

型システム信頼性低下

第二章
[プロジェクト6]エディタを使用してタイプシステムをブラウズする
インストール・タイプ・スクリプトでは、次の2つの操作を実行できます.

tsc

型スクリプトサーバ

カーソルを使用してタイプスクリプトサーバがタイプ推定をどのように行うかを決定することは、タイプスクリプトを練習する良い方法です.
→これらのタイプを使用すると、ライブラリがどのようにモデリングされているか、エラーがどのように検出されているかがわかります.だからタイプ宣言ファイルを探しながら勉強!
[item 7]タイプが値の集合であると考える
最小の集合:newυunit type(1つ)υunion type(複数)
タイプ演算子は、値のセットに適しています.

interface Person {
  name: string;
}
interface Lifespan {
  birth: Date;
  death?: Date;
}
type PersonSpan = Person & Lifespan; -> name, birth, death 속성을 가지고있음

// 객체타입에서
keyof (A&B) = (keyof A) | (keyof B)
keyof (A|B) = (keyof A) & (keyof B)

extendsは部分集合に相当する.
Excludeは、特定のタイプを除外するために使用されますが、結果が適切なタイプのスクリプトタイプの場合に有効です.
[アイテム8]タイプ空間と値空間を区別する記号
タイプスクリプトのシンボルは、タイプ空間または値空間の1つに存在します.
記号をタイプとして区別するか、値として区別するかが重要です!

class Cylinder {
  radius = 1;
  height = 1;
}

const calculateVolume = (shape: unknown) => {
  // 값으로 사용된 부분
  if(shape instanceof Cylinder) {
  // 타입으로 사용된 부분
    shape
    shape.radius
  }
}

上記の例では、クラスが等しいか等しいかであれば、タイプまたは値として使用できます.
InstanceType:コンストラクション関数を構築するインスタンスタイプ
Documentation - Utility Types
オブジェクトのプロパティタイプにアクセスするときにカッコを使用します!
✅ p: Person[’first’]
❌ p: Person.first
属性アクセス者

type Tuple = [string, number, Date]
// TupleEl의 타입은 string | number | Date
type TupleEl = Tuple[number] // number가 0, 1, 2 중 하나만 올 수 있으므로(그 의미로 쓰임) 어려움..

タイプ空間と値空間のブレンド

function email({person: Person, subject: string, body: string}) {}

このように記述すると、JSのalias(別名)と判断し、タイプを値として使用するため、エラーが発生します.そこで、以下のように変更します!

function email({
  person,
  subject,
  body,
}: {
  person: PresentationStyle;
  subject: string;
  body: string;
}) {}

[アイテム9]タイプ断言ではなくタイプ宣言を使用
タイプブレークスルーは、指定したタイプを強制し、タイプフィルタにエラーを無視するように要求するため、タイプ宣言を使用する傾向があります.
残りの属性チェック(指定されたProperty以外に他のPropertyがあるかどうかをチェック)は、タイプブレークスルー文Xにも適用されます.
タイプブレークスルーは、DOM要素のインポート時に一般的に適用されます.(開発者がもっと知っている場合)
キャプテンの潘喬はdomでnullの断言文ではなく断言文を使用することを提案した.

// like this
function $<T extends HTMLElement>(selector: string) {
  const element = document.querySelector(selector);
  return element as T;
}

const confirmedTotal = $<HTMLSpanElement>('.confirmed-total');

回避対象Rapperタイプ[アイテム10]
タイプスクリプトは、基本タイプ(元のタイプ)とオブジェクトRapperタイプをそれぞれモデリングするので、値として使用するかタイプとして使用するかを区別し、タイプとして使用する場合は注意してください.

// 이렇게 쓰지 말고
const s: String = 'primitive'; (x)
// 이렇게 쓰자! (기본형으로)
const s: string = 'prmitivie'; (o)