유형 연산자

개시하다

이 글은 인터페이스나 유형 별명 등이 표시하는 대상 유형에 사용되는 유형의 연산자를 사용할 수 있습니다.

keyof 연산자

keyof 연산자는 문자열 능력 형식의 결합 형식으로 대상의 모든 속성을 얻을 수 있습니다.

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

type PropPerson = keyof Person;
//PropPersonの型は"name" | "age"

여러 층으로 구성된 대상은 다음과 같은 유형을 얻을 수 있다.

​interface Obj {
  person: { name: string; age: number };
  book: { name: string; price: number };
}

type PropUser = keyof Obj; //型は "user1" | "user2"
type PropUser1 = keyof Obj["person"]; //型は"name" | "age"
type PropUser2 = keyof Obj["book"]; //型は"name" | "price"

점기법은 변수를 사용하여 속성에 접근할 수 없기 때문에 브래킷 기법을 사용합니다.

keyof 연산자의 용례

① 제닉스와 공존

달력과 keyof를 조합해서 대상에서 지정한 속성의 값을 얻을 수 있습니다.

interface Person {
  name: string;
  age: number;
  gender: "male" | "female";
}

const  valueOfPerson=<O extends object, K extends keyof O>(o: O, k: K): O[K]=> {
  return o[k];
}
const max: Person = {
  name: "Max",
  age: 22,
  gender: "male",
};
console.log(valueOfPerson(max, "name")); //Max
console.log(valueOfPerson(max, "age")); //22
console.log(valueOfPerson(max, "gender")); //male

제네시스형 매개 변수를 발표할 때 키오브가 등장한다.여기에 K형과 O형의 관계가 정의돼 있어 제네릭스의 선언을 생략할 수는 없다.
특히 두 번째 K extendskeyof O는 O가 대상, K가 해당 대상의 속성임을 나타내므로 생략하면 오류가 발생할 수 있습니다.
그나저나 괄호 안에 있는 첫 번째 O extends object의 extends object는 생략해도 틀리지 않았다.두 번째 키오브가 O형을 대상TypeScript으로 추정했기 때문일 수 있다.
다중 레이어 객체에 내포된 객체를 생성합니다.

interface User {
  user1: { name: string; age: number };
  user2: { name: string; age: number };
}

const valueOfUser=<O extends object, K extends keyof O>(o: O, k: K): O[K]=> {
  return o[k];
}
const iPhone: User = {
  user1: { name: "Max", age: 22 },
  user2: { name: "Green", age: 21 },
};
console.log(valueOfUser(iPhone, "user1")); //{name: "Max", age: 22}
console.log(valueOfUser(iPhone, "user2")); //{name: "Green", age: 21}

② typeof 연산자와 공존

이전방어의 글에서 키of 연산자를 처리했습니다.꼭 참고하세요!
키of와 typeof를 결합하면 기존 대상에서 속성 이름을 상수 형식으로 추출할 수 있습니다.

​const obj = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3",
};
type PropOfObj = keyof typeof obj;//型は "prop1" | "prop2" | "prop3"
const propOfObj1: PropOfObj = "prop1"; //OK
const propOfObj2: PropOfObj = "prop2"; //OK
const propOfObj3: PropOfObj = "prop3"; //OK
const propOfObj4: PropOfObj = "prop4"; //エラー

prop4가 변수obj에 존재하지 않기 때문에propOfObj4에 오류가 발생했습니다.
기존 대상에서 키 of를 통해서만 속성 이름을 상수 형식으로 추출할 수 없습니다.vscode면 잘못된 내용을 친절하게 보여줍니다.

유형 찾기

찾기 유형은 T[K] 형식의 구법으로 표시된 객체 유형에 대해 속성 이름으로 값에 액세스하는 유형 레벨입니다.

​interface Person {
  name: string;
  age: number;
}
type Typeofname = Person["name"]; //型はstring;
type Typeofage = Person["age"]; //型はnumber;

참고로 속성은 선택할 수 있습니까?대상 속성에 대응하는value형과undifined의 연합형으로 모델을 얻을 수 있습니다.

​interface Person {
  name: string;
  age?: number;
}
type Typeofname = Person["name"]; //string;
type Typeofage = Person["age"]; //number|undifined;

다차원 대상은 다음과 같은 유형으로 접근할 수 있다.

​interface User {
  user1: { name: string; age: number };
  user2: { name: string; age: number };
}

type A = User["user1"];
//型は{name: string;age: number;}

type B = User["user1"]["name"];
//型はstring

type C = User["user1"]["age"];
//型はnumber

찾기형 용례

①배열과 공존

배열의 경우 키로 "number"를 지정하여 요소를 추출할 수 있습니다.

​type Hoge = Array<string>;
type A = Hoge[number]; //型はstring

type Foo = string[];
type B = Foo[number]; //型はstring

type Bar = (string | boolean)[];
type C = Bar[number]; // 型はstring | boolean

그룹의 하위 형식 모듈 형식은 색인을 키로 지정하여 요소를 얻을 수 있습니다.

​type Foo = [string, number];
type A = Foo[0]; //型はstring
type B = Foo[1]; //型はnumber
type C = Foo[number]; //型はstring | boolean

②keyof 연산자와 공존

아까 키of 연산자도 사용할 수 있습니다.

​interface Person {
  name: string;
  age: number;
}
type A = Person[keyof Person];
//型はstring | number

위에서 말한 바와 같이 대상 속성의value 유형을 연합 형식으로 얻을 수 있다.

③ 제닉스와 공존

Generics를 사용하여 함수처럼 유형을 처리할 수 있습니다.

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

type ValueOfType<T, U extends keyof T> = T[U];
type Typeofname = ValueOfType<Person, "name">;
//型はstring

는 대상에서 일부 값을 추출하는 함수도 만들 수 있다.

​type User = {
  id: number;
  name: string;
  note?: string;
};
type APIResponse = {
  user: User;
  isPremiumUser: boolean;
};

const extractFromAPIResponse = <T, U extends keyof T>(
  obj: T,
  key: U
): T[keyof T] => {
  return obj[key];
};

const sampleData: APIResponse = {
  user: {
    id: 1,
    name: "Alice",
  },
  isPremiumUser: true,
};
console.log(extractFromAPIResponse(sampleData, "user"));
//{id: 1, name: "Alice"}

console.log(extractFromAPIResponse(sampleData, "isPremiumUser"));
//true

맵(Mapped Type)

유형 값을 얻기 위해 in 연산자를 사용하는 경우 매핑 유형을 사용합니다.즉, 인터페이스와 유형 별명에 사용되는 in 연산자는 매핑 유형입니다.

​type Fig = "one" | "two" | "three";
type FigMap = { [k in Fig]: number };
const figMap: FigMap = {
  one: 1,
  two: 2,
  three: 3,
};

유형 앨리어스에 객체의 유형이 정의됩니다.이 대상의 속성은 맵 형식을 사용합니다.
figMap 변수에서 FigMap의 유형을 지정하고 Fig 문자열 소양 유형 중의 원, 투, three를 대상 속성 이름으로 강제한다.
또 모든 원, 투, 쓰리를 속성으로 사용하지 않으면 오류가 발생하지만 그 중 일부(원과 투만 등)를 속성으로 사용하려면 옵션?을 사용한다.

​type Fig = "one" | "two" | "three";
type FigMap = { [k in Fig]?: number };
const figMap: FigMap = {
  one: 1,
  two: 2,
};

맵 형식 용례

매핑 유형을 kyeof 연산자 및 찾기 유형과 결합하면 객체 유형의 속성 이름이 일치하는 유형을 제한할 수 있습니다.

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

type PieceOfPerson = {
  [K in keyof Person]?: Person[K];
};

const obj: PieceOfPerson = {
  name: "max", //ageは省略可
};