TypeScript part2 [転載禁止]©2ch.net

**デフォルトの名無しさん** · 2015/04/30(木) 18:37:29.98

http://www.typescriptlang.org/

TypeScript lets you write JavaScript the way you really want to.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

前スレ
http://peace.2ch.net/test/read.cgi/tech/1349187527/

**デフォルトの名無しさん** · 2017/06/02(金) 10:31:35.82

_thisは重複エラーになっちゃうんでやすよね
目的としては、deferredを返すfunctionがあって、その返り値のdoneで呼び元のthisを使いたいんです

**デフォルトの名無しさん** · 2017/06/02(金) 11:16:51.90

やりたいことが分からん
コード例plz

**デフォルトの名無しさん** · 2017/06/02(金) 11:38:44.20

アロー関数で済むやつでは

**デフォルトの名無しさん** · 2017/06/02(金) 12:13:45.27

>>687
var testFucntion = () => {

    var defer = $.Deferred();

    defer.resolve("a");

    return defer.promise();

}

var hoge: string;

testFucntion()

    .done(function (data: string) {

        this.hoge(data);

    })

こんな感じ

**デフォルトの名無しさん** · 2017/06/02(金) 12:15:24.11

>>689
>>688

**デフォルトの名無しさん** · 2017/06/02(金) 12:17:24.53

草ｗｗｗ

**デフォルトの名無しさん** · 2017/06/02(金) 12:20:14.11

自演乙としか

**デフォルトの名無しさん** · 2017/06/02(金) 23:52:05.01

functionが自然な場所は、アローにしてて、
アローで解決できる箇所はfunctionなのはなぜ。

**デフォルトの名無しさん** · 2017/06/03(土) 02:14:50.79

>>689
doneのほうをアロー式にしたらいいんやで
あとvsで開発してる場合、デバッグ時にウォッチしたとき、そのthisにはtestFucntionが入るけど
実際にはちゃんと使いたい値が入ってるから安心しな

**デフォルトの名無しさん** · 2017/06/03(土) 09:18:06.31

アロー使えばselfいらないって知った時感動した

**デフォルトの名無しさん** · 2017/06/04(日) 01:06:25.77

Angular(2以降)の話題もここでよろしょうございますか？

**デフォルトの名無しさん** · 2017/06/04(日) 02:05:52.05

まったくではないが違うんじゃないか？

**デフォルトの名無しさん** · 2017/06/04(日) 05:58:20.77

http://medaka.2ch.net/test/read.cgi/php/1415599223/

**デフォルトの名無しさん** · 2017/06/11(日) 19:15:01.32

interface A{
　x:string;
　y:string;
}

interface B extends A{
　x:number;
}

が型の互換性エラーになるの何とかならない？
let a={x:'hoge',y:'foo'};
let b={...a,{x:1}};

みたいな事は出来るのにbを現す型を簡単に定義出来ないのが辛い

**デフォルトの名無しさん** · 2017/06/11(日) 19:18:40.94

>>696
ngxのスレは別にある

**デフォルトの名無しさん** · 2017/06/11(日) 19:55:36.52

>>698
2以降はこっち
http://mevius.2ch.net/test/read.cgi/hp/1484055394/

**デフォルトの名無しさん** · 2017/06/11(日) 20:29:27.66

>>699
型が変わったら継承できないのは当たり前では？

interface Parent {
x: string | number;
y: string;
}

interface A extends Parent {
x: string;
}

interface B extends Parent {
x: number;
}

こういう関係が正しい関係では？

**デフォルトの名無しさん** · 2017/06/11(日) 21:09:00.82

理解してない奴を炙り出すのにも静的チェックは必要なんやなって

**デフォルトの名無しさん** · 2017/06/11(日) 21:21:16.05

>>702
プロパティだとセットのときを考えるとcontravariantじゃないとダメだしゲットのときにはcovariantじゃないとダメだから結局invariantが必要になるような気がする
アクセサならsetのパラメタとgetの返却値で型が異なってもいいから問題ないと思うけど

**デフォルトの名無しさん** · 2017/06/11(日) 22:09:32.03

>>702
継承出来ないのは当たり前って言うのは分かる
ただ上書きする構文が欲しい

**デフォルトの名無しさん** · 2017/06/11(日) 22:13:08.61

>>705
ジェネリクスあるし上書きする構文が必要になる状況が分からん

**デフォルトの名無しさん** · 2017/06/11(日) 22:22:11.45

上書きなんぞせずとも別の名前付ければよくね？
デメリットしか思い付かないし実装されないと思うが、仮に実装されたとしても予想される実装方法はBの型を通してアクセスしたときは型名とかをprefix付けた別名になるようにトランスパイルされるようになるだけでしょ

**デフォルトの名無しさん** · 2017/06/11(日) 23:47:19.06

extends Aじゃないけどその定義を流用してBを定義したいということか？

**デフォルトの名無しさん** · 2017/06/11(日) 23:48:25.17

>>708
そういう事

**デフォルトの名無しさん** · 2017/06/11(日) 23:49:49.29

B extends Aじゃないから当然
(hoge:B)=>{
let foo:A=hoge;
}

みたいな事は出来なくて良い(というか出来ない)

**デフォルトの名無しさん** · 2017/06/12(月) 00:58:34.90

継承じゃないんだから諦めてジェネリクス使いなよ

**デフォルトの名無しさん** · 2017/06/12(月) 08:01:38.24

世の中にxがstringかnumberの場合があるのなら、x: string | number という定義が正しい気がしますが

**デフォルトの名無しさん** · 2017/06/12(月) 08:11:52.28

ジェネリクスだと>>699の問題がどこまで解決できるんだろう。

**デフォルトの名無しさん** · 2017/06/12(月) 08:26:45.30

>>713
interface X<T> {
　x: T;
　y: string;
}
interface A extends X<string> { }
interface B extends X<number> { }

**デフォルトの名無しさん** · 2017/06/12(月) 18:05:51.91

flowとtypescriptって
どっちが良いの？

**デフォルトの名無しさん** · 2017/06/12(月) 18:14:08.97

>>715
圧倒的TypeScript
異論は見ろめない

**デフォルトの名無しさん** · 2017/06/12(月) 21:00:25.44

酔うの早すぎるだろ

**デフォルトの名無しさん** · 2017/06/13(火) 22:10:43.81

Announcing TypeScript 2.4 RC
https://blogs.msdn.microsoft.com/typescript/2017/06/12/announcing-typescript-2-4-rc/

**デフォルトの名無しさん** · 2017/06/14(水) 08:28:34.92

enumってstring literal型出てからほぼ使わなくなったからなあ
コード内でimportできるのもよくわからん
何がよくなったんだ

**デフォルトの名無しさん** · 2017/06/14(水) 09:04:40.52

新importは関数であることに意味がある

**デフォルトの名無しさん** · 2017/06/14(水) 21:28:45.57

>>720
なるほど Promiseで返すってことはasync await 前提なんかな。
ちょっと非同期周りで互換性のないライブラリ使ってると途端に不便になるから
一長一短ではあるんだけど。全部がPromise使うライブラリで固められれば便利になるんかな。

**デフォルトの名無しさん** · 2017/06/14(水) 21:29:54.91

jsの仕様変更そろそろ収まって欲しい。
import周りってこれで安定するようになるのかな。

**デフォルトの名無しさん** · 2017/06/15(木) 19:20:45.69

filterの中でasync await って使えないんですかね？

**デフォルトの名無しさん** · 2017/06/15(木) 19:24:11.68

>>723
無理
rxjs使うか設計見なおせ
具体的に何をしたい？

**デフォルトの名無しさん** · 2017/06/15(木) 21:25:19.64

filterの評価関数を作ろうとした時に、今まで作ったやつが全部プロミス返す設計になっていたので、
シームレスに使おうとしたらasync-awaitを使えないかなーと。
将来的にここもasync await使えるようになるのかな。
結局ループを回して絞込処理を実装しましたわ。

**デフォルトの名無しさん** · 2017/06/15(木) 21:30:12.69

rxjs使え

**デフォルトの名無しさん** · 2017/06/15(木) 21:32:03.12

それか自作。そんなに難しくないぞ

**デフォルトの名無しさん** · 2017/06/16(金) 01:22:09.50

rx推しが謎すぎる。

**デフォルトの名無しさん** · 2017/06/16(金) 07:51:13.34

ループでawaitしちゃうってパフォーマンス悪くない?
await promise.all([].map(async () => {}))

こういうのが普通では?

**デフォルトの名無しさん** · 2017/06/16(金) 12:37:39.06

>>729
ずっとpromise.allの存在を失念してた。
これでmap的な使い方できるね。

ところでtypescriptのプロジェクトで自作helperライブラリを使う時にいちいちimportを使うのが面倒くさいんで
自動でimportする設定ってtsconfigにないかな？

**デフォルトの名無しさん** · 2017/06/17(土) 10:56:23.79

typescript便利だけどやっぱり型が後付の弊害がなかなかしんどい。
nullを許容しない前提かと思って使っても結局
実体はnullが突っ込んであったりする。

**デフォルトの名無しさん** · 2017/06/17(土) 17:32:41.06

弊害じゃなくて人為的ミス
誤りに気付いた者が正せばいい

**デフォルトの名無しさん** · 2017/06/17(土) 22:27:47.68

swaggerのジェネレーターが出すコードなんだよね。プルリク出すのが面倒です

**デフォルトの名無しさん** · 2017/06/18(日) 00:50:13.20

サーバーサイドの言語仕様とswaggerがstrict null checkに対応してないだけであって
typescriptは何も悪くないのでは

**デフォルトの名無しさん** · 2017/06/18(日) 15:17:38.51

ほんそれ

**デフォルトの名無しさん** · 2017/06/18(日) 20:34:02.75

>>734
本体がstrict null check対応しても
モジュール側が対応してないとそこは無視するってことです？
例えばモジュールが強制的に T | undefined | null 型になるとかならいいんですけどね

**デフォルトの名無しさん** · 2017/06/19(月) 00:15:28.42

type Action =
{
type: “A”,
id: number
} |
{
type: “B”,
payload: any
} ….

みたいな定義がある時に

interface ALias {
[type: Action.type]: () => any;
}

export default <Alias> {
“A”: func1,
“B”: func2,
}

みたいに書けないですかね？
つまりAction.typeをinterface の条件に入れたいってことなんですが。

**デフォルトの名無しさん** · 2017/06/19(月) 09:56:19.65

インデックスシグネチャがstringかnumberしか受け入れない現状では
Aliasを定義する時点でキー(Action.typeの値)が
分かってるなら interface Alias { 'A'?: Func; 'B'?: Func; }
分からないなら interface Alias { [type: string]: Func; }

**デフォルトの名無しさん** · 2017/06/19(月) 20:30:47.90

>>730
interface Actions {
A: {id: number};
B: {payload: any}
}

interface Arias {[key in keyof Actions]: () => Actions[key]}

こういうことかな？

**デフォルトの名無しさん** · 2017/06/19(月) 21:29:43.40

携帯から書いたけどエラー起きてるし意図理解できてなかった。
こういうことかな？
type Action = { type: "A" } | {type: "B"};
type Arias = {[K in Action["type"]]: () => void}
http://i.imgur.com/17xtAlw.png

**デフォルトの名無しさん** · 2017/06/19(月) 22:19:36.13

Arias（笑）

**デフォルトの名無しさん** · 2017/06/20(火) 16:14:46.75

>>740
おー。聞いてみて良かったです。半分諦めてたんで。
上手く動きました。ありがとうございます。

**デフォルトの名無しさん** · 2017/06/21(水) 12:13:37.61

>>742
もっとこういう質問で賑わってほしい
書いてて気持ちいい言語だから
angularやreactは流行らなくていいけどフロント開発の標準はtypescriptになってほしい

**デフォルトの名無しさん** · 2017/06/21(水) 14:47:30.10

>>743
定義ファイルがなくて自作するハメになると途端に苦痛になるけどな。
あとReactというかReduxつかってて合わせてimmutable.js使ってると
いつの間にかclassがjsonに変わってることがあってその場合はtypescriptの型と合わなくなるから
しんどい。型が後付じゃない言語ならこういうことがないから、ちょっと辛い。
結局reducer内で使う時にjsonからimmuatblejsのclassに変換して
state返す時にjsonに戻す処理を毎回入れる方針になった。

immutable.jsは全然typescriptと相性が良くない。
XXX.set(‘member’, value) みたいな構文になるから。
もっとtypescriptで使いやすいimmutableなライブラリないかしら。

**デフォルトの名無しさん** · 2017/06/21(水) 16:08:20.66

>>744
新バージョンではXXX.setが型安全になるからもう少し待て
リテラル型とkeyofを使うらしい

**デフォルトの名無しさん** · 2017/06/21(水) 19:23:40.28

https://goo.gl/7Ty7Tq
こんな感じのコードでファイルのアップロード処理を作りたいんですが
上手く動かなくて悩んでいます。お助け下さい

**デフォルトの名無しさん** · 2017/06/21(水) 21:09:26.65

>>746
ブラウザのセキュリティ設定で、`input.click()`はfileエレメントには効かないみたいですね。
https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input

**デフォルトの名無しさん** · 2017/06/21(水) 21:50:59.59

>>744
immutablejsというのは使ったことないけど、
XXX.set(‘member’, value)みたいな処理もkeyof使ってラップしてあげればkey毎に違う型のvalueに対応できる。
例えばES6のMap<K,V>クラスをラップすれば以下みたいなこともできる。
まあ新しいバージョンで対応されるならわざわざラップクラス作る必要ないがｗ
class TypeSafeMap...(省略

interface IObject {
name: string;
height: number;
isYes: boolean;
}

const safeMap = new TypeSafeMap<IObject>();
safeMap.get("name") // string型
safeMap.get("height") // number型
safeMap.set("name", 1) // NG
safeMap.set("name", "one") // OK

https://goo.gl/j6hy4T

**デフォルトの名無しさん** · 2017/06/21(水) 22:49:52.97

>>747
こちらは結局イベントリスナーをcickではなくchange にすることで上手く動くようになりました。

>>748
typescriptのジェネリクスの性能いいですね。
結構知らない機能がまだありそう。

**デフォルトの名無しさん** · 2017/06/22(木) 00:17:25.62

>>749
それはよかったです、てっきりclickイベントをjsで発火させてファイル選択ダイアログを自動で開かせたいのか思ったw

**デフォルトの名無しさん** · 2017/06/22(木) 17:18:45.24

>>750
そうなんですけどリスナーのイベント指定がclickではなくchnageだったってことです。
https://goo.gl/QHZCsG

before
i.addEventListener(‘click’, async (e) => {
after
i.addEventListener('change', async (e) => {

**デフォルトの名無しさん** · 2017/06/22(木) 18:30:45.28

>>751
たしかのそれもひとつの原因ですね
ですがclickイベントの発火も多分動かないのでは？chブラウザにもよると思いますがchromeで動かなかったですよ

**デフォルトの名無しさん** · 2017/06/22(木) 19:47:44.81

>>752
動きましたよ。少なくともchromeでは。動くコードを>>751に貼ったんで

**デフォルトの名無しさん** · 2017/06/22(木) 20:06:21.77

>>753
>>751は手動のクリックイベントからclick発火してるので動きますね
>>746はsettimeout内でclick発火してるので、動かないです

**デフォルトの名無しさん** · 2017/06/24(土) 00:04:21.44

typescriptでreduxのミドルウェア書いてる人っていませんか？

export interface Middleware {
<S>(api: MiddlewareAPI<S>): (next: Dispatch<S>) => Dispatch<S>;
}

上記interfaceを満たすコードを書けなくて困ってます。サンプルコード的なのどっかにないですかね？

**デフォルトの名無しさん** · 2017/06/25(日) 15:04:59.28

reduxってreact関係の何かなのかな？
相変わらずreactの作法は意味不明
流行らずに消えてほしい

**デフォルトの名無しさん** · 2017/06/25(日) 15:18:46.73

すみません
今パッケージングというのかライブラリのシステムは何を使うのが正解何ですか？
electronやってみようと思ってタイプライブラリをいれようと思っていろいろなサイト見てやってるんですが
どれも失敗します

今の定番の方法を紹介してるサイトってありませんか？
それとも今は時期がまずいんでしょうか？

**デフォルトの名無しさん** · 2017/06/25(日) 16:41:50.61

npm -i @types/XXXX

**デフォルトの名無しさん** · 2017/06/25(日) 17:11:28.11

>>757
よくわからないけどelectronのtypescript開発は少しややこしい
メインプロセス側と画面側でプロジェクト分けるのが主流で、メインプロセス側はgulpビルド、画面側はwebpackビルドみたいになって少しややこしい

**デフォルトの名無しさん** · 2017/06/25(日) 19:32:19.06

回答ありがとうございました

もうしばらく待ってみます

**デフォルトの名無しさん** · 2017/06/26(月) 10:42:55.52

>>756
はやっちゃってるんだよなぁ。
React自体は凄くTypeScriptとの親和性は高い。というかむしろ推奨しているくらい。
ただReduxはTypeScriptからどう使えばいいのかよくわからなくて

**デフォルトの名無しさん** · 2017/06/26(月) 15:37:27.06

>>755
自己解決したので書いておきます
ただのロガーの場合

import { Action } from 'actions';
import { State } from 'reducers';

export function myMiddleware(store: redux.MiddlewareAPI<State>):
(next: redux.Dispatch<State>) => redux.Dispatch<State> {
return (next: redux.Dispatch<State>) => (action: Action): Action => {
console.log(store.getState());
let result = next(action);
console.log(store.getState());
return result;
};
}

**デフォルトの名無しさん** · 2017/06/27(火) 16:22:46.76

typescriptで書かれてる有名なライブラリって何があるの？
Rx.jsはtypeScriptで書かれてたね。

**デフォルトの名無しさん** · 2017/06/27(火) 16:42:32.21

フレームワークだけどngx

**デフォルトの名無しさん** · 2017/06/27(火) 18:35:39.52

Dartどっかいったな

**デフォルトの名無しさん** · 2017/06/27(火) 19:04:32.75

googleが作る言語はゴミばっかだからしゃーない
言語のセンスは圧倒的にMSの方が上
MSというよりヘルスバーグが有能すぎる

**デフォルトの名無しさん** · 2017/06/27(火) 22:13:14.24

>>766
goはいいぞ。素朴でモダンという相反する要素を持ち合わせてる。
エコシステムはモダン。
言語仕様は素朴。

**デフォルトの名無しさん** · 2017/06/27(火) 22:20:02.75

J++とかJ#とかManaged C++とか割と救いようのないものも作ってるけどねMicrosoft
でも全体としては確かに良い言語が多い印象

Googleの言語もGoとか(使ったことないけど)人気みたいだし, そもそも作った言語の数が大分違う気が

**デフォルトの名無しさん** · 2017/06/27(火) 23:37:36.64

>>767
ジェネリクス追加されるまでは様子見…

**デフォルトの名無しさん** · 2017/06/28(水) 03:33:15.38

マイクロソフトはvsc出したときはなんでatomの二番煎じやってんのって思ったけどやはり製品としての完成度高くて感動する。
開発環境作らせたら最強と言う噂は伊達じゃない。

**デフォルトの名無しさん** · 2017/06/28(水) 09:12:54.31

>>763
angular2

**デフォルトの名無しさん** · 2017/06/28(水) 14:22:19.39

Announcing TypeScript 2.4
https://blogs.msdn.microsoft.com/typescript/2017/06/27/announcing-typescript-2-4/

**デフォルトの名無しさん** · 2017/06/28(水) 16:15:00.25

MSは言語と開発環境では最強
ネットや機械学習ならGoogle
アップルは…嫌い

**デフォルトの名無しさん** · 2017/06/28(水) 16:19:23.04

MSは言語と開発環境では最強
ネットや機械学習ならGoogle
アップルは…嫌い

**デフォルトの名無しさん** · 2017/06/28(水) 16:28:12.57

>>774
何こいつ怖い

**デフォルトの名無しさん** · 2017/06/29(木) 16:13:29.70

すいません。

例えば以下のようにアクションを定義してあったとして

export type Action =
{
type: 'FETCH_MAIN_FEEDS';
} |
{
type: 'SET_MAIN_FFEDS';
payload: comm.Contentlist;
} |
{
type: 'DO_NOTHING'
};

ジェスリクスの仕組みを使って
type ActionType = 'FETCH_MAIN_FEEDS' | 'SET_MAIN_FFEDS' | 'DO_NOTHING'
をActionの内容変更に合わせて自動的に作る方法ってないですかね

**デフォルトの名無しさん** · 2017/06/29(木) 16:20:59.60

自己解決
export type Action =
{
type: 'FETCH_MAIN_FEEDS';
payload: undefined;
} |
{
type: 'SET_MAIN_FFEDS';
payload: comm.Contentlist;
} |
{
type: 'DO_NOTHING';
payload: undefined;
};

type ActionType = Action['type'];
type PayloadType = Action['payload'];

思いの外簡単であった

**デフォルトの名無しさん** · 2017/07/10(月) 13:26:30.50

typescriptのエラーってよくわかんないことある

(81,32): error TS2322: Type '{ path: "/logout"; component: typeof Logout; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: "/logout"; component: typeof Logout; }' is not assignable to type 'Readonly<RouteProps>'.
Types of property 'component' are incompatible.
Type 'typeof Logout' is not assignable to type 'StatelessComponent<RouteComponentProps<any> | undefined> | ComponentClass<RouteComponentProps<any...'.
Type 'typeof Logout' is not assignable to type 'ComponentClass<RouteComponentProps<any> | undefined>'.

ってでて、何のことかわからない。

偶然解決して、総合するとReact.Componet<P,S>のSをvoidに指定は駄目ってことらしい。
上記エラーメッセージからどう読み取ればそういうことなわけ？

**デフォルトの名無しさん** · 2017/07/10(月) 19:20:13.57

template登場したての頃のc++みたいだな

**デフォルトの名無しさん** · 2017/07/12(水) 20:52:57.67

@typesやパッケージ自身が持っているd.tsに問題があるとき、自分のプロジェクト内で
部分的に修正版と差し替えたりできないのかな？
Typescript2.4に上げたらいくつかのパッケージがエラーを出すようになってしまったんで
大元が対応するまでの間ちょっと回避したいんだが。

**デフォルトの名無しさん** · 2017/07/12(水) 21:44:01.43

>>780
https://teratail.com/questions/83920

**デフォルトの名無しさん** · 2017/07/12(水) 22:50:59.04

リンク先のそれは解決法として正しいのかという疑問はあるがとりあえず、declareで
定義を上書きできるということかな。試してみるわ。ありがとう。

**デフォルトの名無しさん** · 2017/07/13(木) 12:11:08.28

ここでredux-observale薦めてもらったのもあって試してるんだけど
epicを書く時 action$.ofType('FIRST’)って書いてfilterするのはいいんだけど返ってくる
Observaleがtype:’FIRST’に絞り込められてくれない。
無理やりキャストして使えってこと？
いい方法教えてください

**デフォルトの名無しさん** · 2017/07/14(金) 00:10:59.94

VS2017は2015と違ってJavaScriptで
var a = {};
a.b = 1;
と書いてその下に「a.」と入力しても候補にnumber型プロパティとしてのbはない
TypeScriptのnamespaceがブラウザの生JavaScriptでも使えるようになったら便利そうなんだけどな

**デフォルトの名無しさん** · 2017/07/14(金) 15:42:06.74

>>782
いやいや。具体的に指摘してほしいな。
reduxのactionは基本的にobjectであれば何でもあり。というスタンスのもので
そのactionに継承関係を設定してるのはたまたま定義ファイルの作者がなんとなく決めた程度のものでしかない。

となると元々の定義を修正してしまっても不都合はないと思うんだが。

更にいうとreduxのmiddlewareの定義ファイルも、結構declareで大元のreudxの定義を改変してる。
(redux-thunkとかredux-promiseとか)