Typescript - Intersection Type

7451 ワード
typescript テキストリンク

Intersection Type


断面タイプは、すべてのタイプを満たすタイプを意味します.
interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: number;
}
type Capt = Person & Developer;
前回のUnionタイプの例をもう一つお持ちします.
interface Developer {
    name: string;
}

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

function askSomeone(someone: Developer | Person) {
    someone.name; // <- 접근 가능
    someone.age; // <- 에러 발생
}
Unionタイプでは、誰かが開発者かPersonで、
ageは属性を決定するのではなく、エラーであり、name属性にのみアクセスできます.

断面タイプが正しく使用されていません

let capt: string & number & boolean; // <- never
capt変数にマウスを置くと、文字シリアル番号ブールタイプが同時に有効ではないためnewが表示されます.

Union vs Intersection


インタフェースに基づいてUnionタイプとインタフェース部分を使用する場合、違いは例で説明します.
interface Developer {
    name: string;
    skill: string;
}

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

function askSomeone(someone: Developer | Person) {
    someone.name; // <- 접근 가능
    someone.age; // <- 에러 발생
}

askSomeone({ name: '디벨로퍼', skill: '웹 개발'})
askSomeone({ name: '캡틴', age: 100 });
Unionタイプでタイプを設定する場合
指定したタイプでは、上記の2つのプロパティタイプを使用して関数を実行できます.
ただし、前述したように、関数内部スキャンでは同じプロパティを使用してアクセスできないため、タイプ保護を使用する必要があります.
interface Developer {
    name: string;
    skill: string;
}

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

function askSomeone(someone: Developer & Person) {
    someone.name;
    someone.age;
}

askSomeone({ name: '디벨로퍼', skill: '웹 개발', age: 34})
タイプを断面に設定する場合
2つのインタフェースタイプを含むプロパティとタイプを渡す必要がありますが、関数を実行できます.
逆に、関数の内部では、すべてのプロパティに1つのパラメータでアクセスできます.
Vue + supabaseを用いたリアルタイム購読
問題を解く-最近2時(JAVA)