TypeScript 인터페이스에서 특정 문자열을 요구하는 방법

TypeScript 인터페이스에서 특정 문자열을 요구하는 방법

JS TypeScript 정정scriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscriptscript. 중 중 ."collapse","expand","end-expand" , , , , 입니다."none".

options 객체에 대한 인터페이스가 있습니다.

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: // "collapse" | "expand" | "end-expand" | "none"
}

「」를 인터페이스는 을 강제할 수 ?★★★★★★★★★★★★★★★★★★,IOptionsbrace_style허용 가능한 목록에 있는 문자열만 허용합니다.

이는 버전 1.8에서 "string 리터럴 타입"으로 출시되었습니다.

유형 스크립트의 새로운 기능 - 문자열 리터럴 유형

페이지의 예:

interface AnimationOptions {
  deltaX: number;
  deltaY: number;
  easing: "ease-in" | "ease-out" | "ease-in-out";
}

이거 드셔보세요

export type ReadingTypes = 'some'|'variants'|'of'|'strings';

export interface IReadings {
   param:ReadingTypes
}

편집: 업베이트를 해주셔서 감사합니다만, 시간이 흐르면서 개발자로서 발전해 왔습니다. :) 이제 대부분의 경우 이 접근방식은 권장하지 않습니다.네, 아직 유효하지만 위의 구성은 열거 구조와 매우 유사하므로 대신 열거를 사용하는 것이 좋습니다(아래 장점).

export enum ReadingTypes {
    Some = 'some',
    Variants = 'variants',
    Of = 'of',
    Strings = 'strings',
}
export interface IReadings {
   param: ReadingTypes
}

장점 : (알겠습니다만, IMHO에 가깝습니다만)

1. 예를 들어 코드에 표시되었을 때 더 읽기 쉽습니다.

if(item.reading === 'some') {
...
}
// vs 
if(item.reading === ReadingTypes.Some) {
...
}

첫 번째로 코드를 읽을 때 첫눈에 알 수 없는 경우에는 .reading 필드에 포함할 수 있는 파라미터는 몇 개뿐이며 문자열 값과는 다릅니다.

2. 코드를 작성할 때 enum을 사용하면 편집자의 도움을 받을 수 있습니다.enum의 이름을 기억하고 작성하면 됩니다.enum의 모든 변형을 표시할 수 있습니다.네, 첫 번째 타입('일부' | '변종'...)에서는 그렇게 할 수 있지만, 그렇게 하는 것은 더 적습니다.음..열심히

TS는 String 리터럴타입이라고 불리는 특정 문자열 값에 대한 입력을 제공합니다.

다음으로 사용 예를 제시하겠습니다.

type style =  "collapse" | "expand" | "end-expand" | "none";

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style1?:  "collapse" | "expand" | "end-expand" | "none";
  brace_style2?:  style;
}

// Ok
let obj1: IOptions = {brace_style1: 'collapse'};

// Compile time error:
// Type '"collapsessss"' is not assignable to type '"collapse" | "expand" | "end-expand" | "none" | undefined'.
let obj2: IOptions = {brace_style1: 'collapsessss'};

TypeScript 2.4 이후에서는 String Enums를 사용할 수 있습니다.

여러 장소에 동일한 하드 코드 스트링을 둘 필요가 없기 때문에 이 방법을 선호합니다.

값이 문자열인 경우 열거를 만들 수 있습니다.

export enum VISIBILITY {
  PUBLISH = "publish",
  DRAFT = "draft"
}

이 열거형은 인터페이스 또는 클래스의 유형으로 사용할 수 있습니다.

export interface UserOptions  {
  visibility:  VISIBILITY 
}

네가 원하던 건 아닐지 몰라도Enum고객님께는 최적의 솔루션인 것 같습니다.

enum BraceStyle {Collapse, Expand, EndExpand, None}

interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: BraceStyle
}

은 번호 , 런타임 에 값이 합니다. BraceStyle.Collapse이 경우 0이 됩니다.그러나 스크립트가 아닌 다른 스크립트와 함께 사용할 수 있습니다. 스크립트는 오브젝트로 컴파일되기 때문입니다.이렇게 해서BraceStyle컴파일 및 실행을 관리합니다.

{
    0: "Collapse",
    1: "Expand",
    2: "EndExpand",
    3: "None",
    Collapse: 0,
    Expand: 1,
    EndExpand: 2,
    None: 3
}

대신 문자열을 원하는 경우 다음 설명에 따라 정적 멤버와 함께 클래스를 사용할 수 있습니다.

function keysOf<T>(obj: T, key: keyof T) { return obj[key]; }
interface SomeInterface {
   a: string;
}
const instance: SomeInterface = { a: 'some value'};
let value = keysOf<SomeInterface>(instance, 'b'); // invalid
value =  keysOf<SomeInterface>(instance, 'a'); // valid

enum아마도 가장 좋은 솔루션일 것입니다만, const 객체의 키로서 값을 가지고 있고 그것을 변경할 수 없는 경우, 구문은 다음과 같습니다.

brace_style?: typeof BRACE_STYLES[keyof typeof BRACE_STYLES];

어디에BRACE_STYLESconst 객체의 이름입니다.

다른 사용자가 지정한 대로 사용자 정의 유형을 생성할 수 있습니다.
또한 오브젝트 const에서 생성된 유형을 추론할 수 있습니다.

export const braceStyles = {
  collapse: "collapse",
  expand: "expand",
  end-expand: "end-expand",
  none: "none"
}

export type braceStyle = typeof braceStyles[keyof typeof braceStyles]

export interface IOptions {
  indent_size?: number;
  indent_char?: string;
  brace_style?: bracestyle;
}

이렇게 하면 enum을 사용할 필요가 없습니다.또한 오브젝트 속성을 필요한 모든 장소에서 사용할 수 있습니다.이 경우 오브젝트 속성은 type enum.member가 아닌 type string이 됩니다.

오브젝트 vs enums

대부분의 경우,enum옵션들.하지만 그렇게 하지 않고 정말로 존재해야 한다면keyOf일부 응답 게시물은 다음과 같이 약간 수정하여 작동합니다.

export const BRACE_STYLES = {
  collapse: 'collapse',
  'end-expand': 'end-expand',
  expand: 'expand',
  none: 'none'
}

export type BraceStyle = keyof typeof BRACE_STYLES

export interface IOptions {
  indent_size?: number
  indent_char?: string
  brace_style?: BraceStyle
}

이렇게 하면 실제로"collapse" | "expand" | "end-expand" | "none"당신이 원하는 효과, 여전히 허용const존재하는지 확인합니다.유형을 하드코딩할 필요도 없습니다.

언급URL : https://stackoverflow.com/questions/26855423/how-to-require-a-specific-string-in-typescript-interface