TypeScript 화살표 함수로 반환 유형 지정

TypeScript 화살표 함수로 반환 유형 지정

저는 React와 Redux를 사용하고 있으며 인터페이스로 지정된 액션 타입을 가지고 있기 때문에 리듀서는 태그 부착 유니언 타입을 활용하여 타입의 안전성을 향상시킬 수 있습니다.

다음과 같은 유형의 선언이 있습니다.

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

interface DeleteTodoAction {
    type: "DELETE_TODO",
    id: number
}

type TodoAction = AddTodoAction | DeleteTodoAction

이러한 동작을 만드는 도우미 기능을 만들고 싶기 때문에 화살표 기능을 사용하는 경향이 있습니다.이 글을 쓰면:

export const addTodo1 = (text: string) => ({
    type: "ADD_TODO",
    text
});

컴파일러는 이것이 유효한지 확인하는 데 도움을 줄 수 없습니다.AddTodoAction반환 유형이 명시적으로 지정되지 않았기 때문입니다.다음과 같이 함으로써 반환 유형을 명시적으로 지정할 수 있습니다.

export const addTodo2: (text: string) => AddTodoAction = (text: string) => ({
    type: "ADD_TODO",
    text
})

그러나 이 경우 함수 인수를 두 번 지정해야 하므로 상세하고 읽기 어렵습니다.

화살표 표기법을 사용할 때 반환 유형을 명시적으로 지정할 수 있는 방법이 있습니까?

이거 해볼까 생각 중이야.

export const addTodo3 = (text: string) => <AddTodoAction>({
    type: "ADD_TODO",
    text
})

이 경우 컴파일러는 반환 유형을 다음과 같이 추론합니다.AddTodoAction그러나 반환하는 객체에 모든 해당 필드가 있는지 검증되지 않았습니다.

다른 함수 구문으로 전환하면 이 문제를 해결할 수 있습니다.

export const addTodo4 = function(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

export function addTodo5(text: string): AddTodoAction {
    return {
        type: "ADD_TODO",
        text
    }
}

이러한 방법 중 하나는 컴파일러가 올바른 반환 유형을 사용하도록 하고 모든 필드를 적절하게 설정하도록 강제합니다.그러나 이 방법들은 보다 상세하고 방법을 변경합니다.this'는 함수로 처리됩니다(문제가 되지 않을 수도 있습니다).

이것을 하는 가장 좋은 방법에 대한 조언이 있나요?

첫 번째 질문에서 다음 표기를 고려합니다.

export const addTodo3 = (text: string) => <AddTodoAction>({
    type: "ADD_TODO",
    text
})

이 표기법을 사용하여 반환된 개체를 유형으로 지정합니다.AddTodoAction그러나 함수의 선언된 반환 유형은 아직 정의되지 않았습니다(그리고 컴파일러는 암묵적으로 다음과 같이 가정합니다).any반환 타입)으로 합니다.

대신 다음 표기법을 사용합니다.

export const addTodo3 = (text: string): AddTodoAction => ({
    type: "ADD_TODO",
    text: text
})

이 경우 필수 속성을 생략하면 예상된 컴파일러 오류가 발생합니다.예를 들어, 이 명령어를 생략하고textproperty는 다음 (오류) 오류를 생성합니다.

Type '{ type: "ADD_TODO"; }' is not assignable to type 'TodoAction'.
  Type '{ type: "ADD_TODO"; }' is not assignable to type 'DeleteTodoAction'.
    Types of property 'type' are incompatible.
      Type '"ADD_TODO"' is not assignable to type '"DELETE_TODO"'.

놀이터의 예도 참조해 주세요.

적절한 타입을 가진 기능을 위한 인터페이스를 작성하는 것이 최선의 방법이라고 생각합니다만, 인터페이스의 모든 네스트 타입이 아니고, 그 타입만을 지정하면 됩니다.

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

interface AddTodoActionCreator {
    (text: string): AddTodoAction;
};

export const addTodo: AddTodoActionCreator = (text) => ({
    type: "ADD_TODO",
    text
});

업데이트: 유형으로 이 작업을 수행하는 방법

export interface GeneralAction<T> {
    type: string;
    payload: T;
}

export interface GeneralActionCreator<T> {
    (payload: T): GeneralAction<T>;
}

export const SAVE_EVENT = 'SAVE_EVENT';

export const SaveEvent: GeneralActionCreator<UserEvent> = (payload) => { 
    return {type: SAVE_EVENT, payload}; 
};

올바른 타이핑과 최소한의 코드로 이를 실현하는 방법은 두 가지가 있습니다.

interface AddTodoAction {
    type: "ADD_TODO",
    text: string
};

// Because the this keyword works different in arrow functions these 
// 2 implementations are different in some cases:

// arrow function form/ function expression
const addTodo1 = (text: string): AddTodoAction => ({
    type: "ADD_TODO",
    text: text
})

// function declaration form
function addTodo2 (text: string): AddTodoAction {
    return ({
        type: "ADD_TODO",
        text: text
    })
}

이것으로 TS 컴파일러는 반환된 유형을 확인할 수 있습니다.예를 들어 다음과 같습니다.

const todo = addTodo1('hi');

// Following gives TS compile time error
// addTodo1 returns AddTodoAction which does not have id on the type

const id = todo.id // Property 'id' does not exist on type 'AddTodoAction'.

https://www.typescriptlang.org/docs/handbook/functions.html

함수 입력

function add(x: number, y: number): number {
  return x + y;
}
 
let myAdd = function (x: number, y: number): number {
  return x + y;
};

반환 유형을 사용하여 함수 유형 쓰기:

let myAdd: (x: number, y: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

언급URL : https://stackoverflow.com/questions/40270393/specify-return-type-in-typescript-arrow-function