Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@kawachi

TypeScript 2.1 で setState() が型安全になるぞー

昨日 TypeScript 2.1 がリリースされました。リリースされるの早いなあと思いながら眺めていたのですが、興味深い機能が追加されました。 Partial<T> 型です。

Partial<T> 型は、T型のフィールドを全てオプショナルにした型です。

たとえば次のような T1 があったとき、

interface T1 {
  n: number;
  s: string;
}

Partial<T1> は次と等価になります。

// Partial<T1> 型はこんな感じ。
{
  n?: number;
  s?: string;
}

これのどこが便利なの?と疑問に思うかもしれませんが、 React の setState() を的確に表現できるようになるのです。
setState() の引数に渡すのはまさに Partial<State> 型です。
今までは cast (type assertion) してウソをついて過ごしてきましたが、これからは正々堂々と生きていくことができます!

DefinitelyTyped には既に PR があがっています。

-        setState(f: (prevState: S, props: P) => S, callback?: () => any): void;
-        setState(state: S, callback?: () => any): void;
+        setState(f: (prevState: S, props: P) => Partial<S>, callback?: () => any): void;
+        setState(state: Partial<S>, callback?: () => any): void;

早く merge されるといいですね!

ちなみに Partial<T> は同じく 2.1 から追加された keyof と lookup 型を利用して宣言されています

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

typeof T はTのキーとなる文字列リテラル型の直和型となるようで、こちらも何かの時に便利そうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?