タイプスクリプト2

エディタとタイプスクリプト

タイプスクリプトも言語なので、エディタでさまざまな機能を提供します.

エラーチェック

関数パラメータと戻り値タイプのチェック

組み込み関数の場合は、関数のタイプ定義の場所に移動します。

lib.dom.関数タイプをd.tsファイルで定義した場所に移動します.
右クリック[定義に移動]または[定義に移動]

タイプとコレクション

タイプスクリプトのタイプは、割り当て可能な値のセットです.

type months = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
const monthNow: months = 1; 
const monthBefore: months = 0; // 0은 할당가능한 집합에 포함되어있지 않기 때문에 type Error

演算子「|」は、このタイプに入ることができるタイプの集合または値であり、和セットを表します.

interface Name {
  name: string;
}

interface Age {
  age: number;
}
type Person = Name & Age;
const person1: Person = {
  name: "james",
  age: 123,
};
const person2: Person = {
  name: "alex",
};

タイプ演算は値、宣言のタイプであってもよいが、「&」演算は交差演算であり、名前とエージェントの間に共通属性がないため、共通集合である可能性があるが、タイプスクリプトでは&演算はインタフェースの属性ではなく入力値に適用されるため、上記のコードを解析する際に

person1은 Name 타입과 Age 타입에 모두 해당되기 때문에 교집합인 Person타입이다.
person2는 Name 타입에 해당되지만 Age타입에 해당되지 않기 때문에 교집합 Person타입이 아니다.

type A = 1;
type B = 2;

type Union = A | B;
type Intersection = A & B;

const union: Union = 1; // 1은 A에 속하기 때문에 A와 B의 합집합에도 속해서 할당 가능
const intersection: Intersection = 1; 
// 1은 A에만 속해서 A와 B의 교집합인 공집합에 속하지 않기 때문에 할당 불가능

	

type A = 1;
type B = 1;

type Intersection = A & B;

const intersection: Intersection = 1; 
// 1은 A에도 속하고 B에도 속해서 A와 B의 교집합에 속하기 때문에 할당 가능
	

通常、拡張タイプのメソッドは、演算ではなくextendsを使用します.

interface People {
  name: string;
  age: number;
}

interface Student extends People {
  major: string;
}

const alex: Student = {
  name: "alex",
  age: 20,
  major: "cs",
};

タイプと値

タイプスクリプトの変数は、タイプでも値でも構いません.タイプの場合は、タイプチェックフェーズのみが有効で、JavaScriptに変換すると削除され、値の使用が続行されます.

interface, type 등 과 같이 타입을 명시할때 사용하는 키워드가 있고 
const a : Location = 12; 에서 Location 앞에 붙은 :과 같이 타입선언 또는 
function test(a: string | number): number {
  return a as number;
}
에서 as와 같은 단언문들은 타입을 의미하는 심벌입니다.

class、enum、タイプ、値のいずれも可能な例ワニ.

// index.ts
enum MyStatus {
  sleep = "자는중",
  study = "공부하는중",
  play = "노는중",
  work = "일하는중",
}

const myStatus: MyStatus = MyStatus.sleep;
// 타입과 값 동시에 쓰이는 MyStatus

console.log(myStatus);

// index.js
var MyStatus;
(function (MyStatus) {
    MyStatus["sleep"] = "\uC790\uB294\uC911";
    MyStatus["study"] = "\uACF5\uBD80\uD558\uB294\uC911";
    MyStatus["play"] = "\uB178\uB294\uC911";
    MyStatus["work"] = "\uC77C\uD558\uB294\uC911";
})(MyStatus || (MyStatus = {}));
var myStatus = MyStatus.sleep;
console.log(myStatus);

Enumキーワードは、複数の定数を管理するためのデータ構造であり、C、Javaなどに存在するが、JavaScriptには存在しない.したがって、JavaScriptでは異なる形式で実現されます.

class Person {
  name = "alex";
  age = 20;
}

const john: Person = { name: "john", age: 21 };
// Person = {name : string, age : number} 타입으로 사용
const alex = new Person();
// 생성자 함수로 사용

一部の演算子は、タイプと値で異なる機能を使用します.

interface Person {
  name: string;
  age: number;
}
const john: Person = { name: "john", age: 21 };

type JohnType = typeof john; // Person type

const test: JohnType = { name: "test", age: 0 };

console.log(typeof john); // object

typeofは、タイプパイプポイントでその値に割り当てられたタイプを抽出する役割を果たし、実行時にJavaScript typeofとして機能する.

class Person {
  name = "alex";
  age = 20;
}

const john = new Person();
type Case1 = typeof Person; // 생성자 타입
type Case2 = typeof john; // 인스턴스 타입

const test1: Case1 = Person; 
const test2 : Case2 = new Person() // new키워드를 붙여서 인스턴스 타입으로 변환

type Case3 = InstanceType<typeof Person>;
const test3 : Case3 = john;

newキーを使用してインスタンスタイプに変換するか、InstanceType Generic変換ジェネレータタイプとインスタンスタイプを使用します.

interface Person {
  name: string;
  age: number;
}
interface Worker {
  company: string;
  worker: Person;
}

const person: Worker["worker"] = { name: "steve", age: 29 };

これにより、プロパティ・アクセス者を使用して内部タイプにアクセスすることもできます.に代わる

const person : Worker.worker = { name: "steve", age: 29 };

このようにオブジェクトアクセスメソッドを使用することはできません.

タイプアサーションとタイプ宣言

タイプスクリプトでは、変数に値を指定し、タイプを割り当てる方法が2つあります.

interface Person {
  name: string;
}

const alice: Person = { name: "Alice" }; // 타입 선언
const bob = { name: "Bob" } as Person; // 타입 단언

タイプ宣言とタイプ断言には2つの方法があり、変数にタイプを指定するときにタイプ宣言を使用することを推奨します.

const john = {} as Person; //Person 타입으로 선언
const robot = { name: 0 } as unknown as Person; // Person 타입으로 선언

john変数もrobot変数もPersonタイプには適していませんが、Personタイプとして宣言され、エラーはありません.
アサーション文はタイプを強制的に指定するので、タイプをチェックするときにエラーは無視されます.

function callName(person: Person): void {
  console.log(person.name);
}
const who = {
  name: "who",
  test: 123,
  test2: null,
};
callName(who);

1章タイプスクリプトでは、タイプが正常であれば、タイプがそのタイプとして認識されます.実際には、関数のパラメータとしてはそうしますが、変数を割り当てるときはそうしません.

const who: Person = {
  name: "who",
  test: 123, // test속성은 Person타입의 집합에 포함되지 않기 때문에 할당할수 없음
  test2: null, //// test2속성은 Person타입의 집합을 포함되지 않기 때문에 할당할수 없음
}; 
const who = {
  name: "who",
  test: 123, 
  test2: null, 
} as Person; // 단언문에서는 오류없이 가능

では、なぜタイプスクリプトに断言文を作成するのでしょうか.
Domに関連するコードを作成するために作成されます.

const el: HTMLElement = document.createElement("div"); 
// 타입스크립트에서 생성한 dom 객체이기 떄문에 안전
const idElement : HTMLElement = document.getElementById("id");
// 타입 에러 발생
// html파일 내부에 id라는 값을 찾지 못할수도 있기 때문에 hTMLElement | null 타입
const idElement = document.getElementById("id") as HTMLElement;
// 단언문을 사용하면 HTMLELement로 타입 지정 가능

const classElement = document.getElementById("class");
console.log(classElement!.innerText);
// 변수 뒤에 !는 null 값이 아니라는 단언문으로 타입 오류 없음

基本タイプとオブジェクトRapperタイプ

JavaScriptにはstring、numberなどの基本的なデータ型があり、対応するオブジェクトがあります.

기본형 : string, number,boolean, symbol,bigint,undefined, null
객체 : String, Number, Boolean, Symbol, BigInt // undefined와 null은 생성자가 없음

const str = 'abc';
const strUppderCase = str.toUppderCase();
//이떄 기본형 string 값에 String객체로 래핑한뒤에 메서드를 호출하고 래핑한 객체를 폐기한다.

このため、タイプスクリプトはオブジェクトをオブジェクトRapperタイプと呼びます.

function toChangeUpperCase(par: String) {
  return par.toUpperCase();
}

function test(par: string) {
  return par.toUpperCase();
}

const word1 = new String("word");
const word2 = "word";
const a = toChangeUpperCase(word1);
const b = toChangeUpperCase(word2);
const c = test(word1); // type Error
const d = test(word2);

タイプスクリプトには、基本タイプとオブジェクトRapperタイプの2種類があります.したがって、StringとStringの2つのタイプは同じように見えます.ただし、StringはStringタイプに割り当てることができ、StringはStringタイプに割り当てることができません.