8
TSの機能としては見つけられませんでしたが、tslintならばそれっぽいルールが有りました。
restrict-plus-operands です。
ルールのテスト例: https://github.com/palantir/tslint/blob/master/test/rules/restrict-plus-operands/test.ts.lint
7
直接的な方法はないと思います。オブジェクト指向の「オブジェクト」はデータと操作をひとまとめにして扱うものであるのに対して、シリアライズはオブジェクトの「データ」の部分のみを保存したり復元するものであり、原理的にオブジェクト指向の「オブジェクト」はデータの永続化と相性の悪いものだからです。
幾つか解決策は考えられます。
1. 我慢してそれぞれのオブジェクトの内容にあわせていちいちプロパティを復元する方法
質問者さんが提示したサンプルコードの方法です。Penオブジェクトと対応するJSON形式のデータをまったく別々に扱います。デシリアライズの時にいちいちコンストラクタを呼ばなければなりませんし、プロパティが増減したらその都度デシリアライズの部分も修正します。とにかく手間がかかり面倒ですし、...
5
このコードのように変数の宣言と代入を別のところで行うとhoge==falseの部分がエラーに
なりません。
これは、2.2.1 の "Control flow based type analysis" が不十分だからだと思います。
2.5.2 においてはエラーになります。
この点を以下で説明します。
(literal) true 型 などについてはrio.irikami さんの回答を参照下さい。
boolean 型は Union 型 (true | false) と等しい
これはドキュメントに記述を見つけられませんでしたが、実際の挙動や意味から考えて、boolean は Union 型なのだろうと思います。
Union 型の変数には "Control flow based type analysis"...
5
おそらくですが、number型へのcast(変換)です。
// 文字列の前に + を付けるとnumber型が返る
const str = '0';
const num = +'0';
console.log(str + 1);
console.log(num + 1);
例えば他にも以下のような方法があります。
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
https://lealog.hateblo.jp/entry/2013/02/28/005010
var str = '123';
+str; // 123
-(-str); // 123
~~str; // 123
str&-1; // 123
str|...
5
MDN では 単項正値演算子 という名称で説明されていました。
#単項演算子 式と演算子 - JavaScript | MDN
この演算子が文字列に対して使用された場合、
数値に変換可能な文字列であった場合は数値
数値に変換不可能であった場合は NaN
に変換されます。
また、#数値 JavaScript 「再」入門 - JavaScript | MDNでは、
parseInt() や parseFloat() との違いが説明されており、
parseInt() および parseFloat() 関数は文字列を、規定の数値書式に該当しない文字が現れるまで解析し、その箇所までの数値を返します。一方、"+" 演算子は適切でない文字を含む文字列を NaN に変換します。
と書かれています。
...
4
文字列.match(正規表現) でマッチした結果が配列で得られます。
数値は(\d+)の様にマッチする部分を指定します。
/は、\/のようにエスケープします。
(間のスペースが複数だったり単数だったりゆらぎがある場合にはその部分も正規表現とする必要があります。)
(result[0]はマッチした全体、以降は( )で指定した部分マッチ)
(result =の部分は[dummy, year, month, number] =にもできます。(ブラウザによっては未サポートであることに注意下さい)dummyが必要なのは最初がマッチの全体なため)
以下例:
let title1 = "2017年 3月号 / No.98";
let result = title1.match(/(\d+)年 (\d+)月号 \...
4
投稿の内容に誤りと思われる箇所がありましたので訂正します。また、mjyさんによる回答を推薦します。以下参考までにご覧いただければ幸いです。
basarat/typescript-bookのTypeScript's Type System > Literal Typesが参考になるかと思われます。
TypeScriptにおけるLiteral Typesとは、雑に言えば「リテラルとして存在する値固有の型」のようなものです。たとえば、trueというリテラルはliteral true型の値trueです。あるいは、falseというリテラルはliteral false型の値falseです。
true === (true as true);
false === (false as false);
literal ...
3
以下の様に定義すれば使えるかと思います。
型定義ファイル:
declare module draggabilly {
export class Draggabilly {
x: number;
y: number;
constructor(container: any, options: any);
disable(): void;
enable(): void;
destroy(): void;
}
}
import Draggabilly = draggabilly.Draggabilly;
declare module "draggabilly" {
import Draggabilly = draggabilly....
3
つまり実現されたいことは以下のようなコードでしょうか?
React.FC<>を使わない場合
const Child = (props: { toggle: boolean, setToggle: (value: boolean) => void }) => {
const { toggle, setToggle } = props;
return (
<>
<input type="checkbox" onClick={() => setToggle(!toggle)} />
</>
);
};
React.FC<>を使った場合
const Child: React.FC<{ ...
3
config系に応用するのはやや困難ですが一応回答を残します。
根本的な原因は、['foo', 'bar']という式が型註釈無しでは[string, string]ではなくstring[]に推論されてしまうことです。これをタプル型が推論されるように矯正するにはas constを用います。これはasという構文を含みますが、あくまで推論方法を変えるフラグであり型を強制的に変えるものではないためas typeとは異なり安全です。
ただ、as constを使うと結果がreadonly [string, string]のような変更不可の型になるという副作用があります。そのため、元のコードにただas constを付加するだけではうまくいかず、Entryの型もreadonlyをつけて修正する必要があります。
そのため、...
3
上記結果より、引数名 this が特別扱いされているのだろうと予想しましたが、この挙動は実際にはどういう仕様に拠るものでしょうか。
TypeScriptのdocumentで this parameters と呼ばれてるものです。
https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters
this parameters are fake parameters that come first in the parameter list of a function:
3
英語版にも同趣旨の質問をしていましたが、回答のワークアラウンドで目的は達成できました。
https://stackoverflow.com/questions/63842382/how-to-apply-tsconfig-json-to-the-emacs-org-babel
#+BEGIN_SRC typescript :cmdline --strictNullChecks :results output
let data_1: string = undefined;
let data_2: string = null;
#+END_SRC
3
TypeScript 4.1以降の機能でTemplate literal typesを使うと表現ができるようになるかと思います。まだ正式リリース版ではないので、Playgroundなどで試してみると良いと思います。
DEMO
Playground
サンプルコード
inferなど使えば境界値を厳しく表現できますが、簡単で直感的な例として次のような感じにかけます。
type Concat<S1 extends number, S2 extends number> = `${S1}${S2}`;
type SingleDigitNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type HH = Concat<0 | 1, ...
3
method: POST とされていますが、その形式は HTTP GET に見えます。POST の場合は body パラメータに ${query} を指定するのではないでしょうか。`
metropolis さん、ありがとうございました。
その通りでした。body に渡すことで解決しました。
2
ES Modules 前提の環境では次の記述で十分ですね。
// mymodule.ts
export class Klass {}
// index.ts
import { Klass } from './mymodule';
klass = new Klass();
2
単一のクラスしか使わないため、可能なら m のようにモジュール名を指定したくない
モジュールから単一のクラスしかexportしない場合であれば、export =でクラスそのものを直接エクスポートすることで以下のように書けます。
// mymodule.ts
class Klass {}
export = Klass;
// index.ts
import Klass = require('./mymodule');
var klass = new Klass();
あるモジュールの指定したクラスだけを使いたい場合にモジュール名を指定せずに済む方法
複数のオブジェクトをexportしているモジュールから、特定のものを直接importする、というのはできなさそうです。言語仕様書の"11.2.2 ...
2
BaseClass で g メソッドを以下のように宣言すればよさそうです。
class BaseClass {
g?(): void
説明:
質問のコードから見るところ、g は「有っても無くてもよいメソッド」です。
「有っても無くてもよい」ことを表現する型で公式ドキュメントに説明が有るのは、Advanced Typesの「Optional parameters and properties」で、要するに ? を付ければよいとのこと。
そこでは触れられていませんが、メソッドもプロパティ等と同じように ? を付ければOptional になるようですので、上のコードとなります。
なお、Optional な型を使用する場合は strictNullChecks を有効にすることで、if (this.g) ...
2
TypeScriptは扱かったことがないので、オブジェクト指向的な考え方からの回答になります。
BaseClassに定義しているfメソッドは抽象メソッドとして定義を行うべきです。
その後ExampleClassA、ExampleClassBでそれぞれでfメソッドの内容をオーバーライドして実装するべきだろうと考えます。
もしくは、BaseClassにgメソッドへの参照をなくし、ExampleClassA側のみfメソッドをオーバーライドして内部でgを呼ぶべきと考えます。
直接の回答ではありませんが、何か参考になれば幸いです。
2
ActionScriptの類似機能
(ActionScript3でのinterfaceとの違いやメリットが解らない?同じようなものなのか、全く違うものなのか)
私はActionScriptは解りませんが、一般論で言うとインターフェースとジェネリクスは全く違うものです。
想像ですが、ActionScriptにジェネリクスに相当する機能が無いのであれば、ActionScriptからは離れて、ジェネリクスが有る言語の解説書で理解するのが早そうです。
それでもあえて、ジェネリクスに似ているActionScriptの機能を挙げるならVectorの型パラメーターだと思います。
ActionScriptでは Vector.<T> として 要素がT型であるVectorを示すようです。
...
2
値からキーを逆引きできる機能は reverse mapping と呼ばれていますが、TypeScrip 2.5 現在、この機能はメンバーが number 型である enum で使うことが想定されています。特に、string 型のメンバに対しては実装されていません。実際 TypeScript のドキュメントにも
Keep in mind that string enum members do not get a reverse mapping generated at all.
と書かれています。これは実装上 enum のキーは string であり、キーと値の型が同じだと面倒だからです (たとえば文字列として同一なキーと値があるときに困ります)。このことは一般の型に対する enum を導入したこの ...
2
この質問はhttps://teratail.com/questions/142007にも投稿し、有用な回答を得られたので、こちらにも記載し回答済みとします。
(下記の内容はteratailユーザー:keisukehさんの回答を元にしています)
質問に対する回答は2つです。
1.ngOnInitでDOMにdirectiveを追加する処理を書くのではなく、directiveで実装したいことを直接ngOnInit内に書く
<コーディング例>※Util.convertHAN2ZENは自作の関数です。import文などは省略しています。
element: HTMLElement;
constructor(private el: ElementRef,private renderer: ...
2
私の場合は、これで動いてくれました:
{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ["pug-plain-loader"]
}, {
use: [
"html-loader",
"pug-html-loader"
]
}]
}
2
こんな感じで置換可能でした。
import fetch, { Request, RequestInit, Response } from 'node-fetch';
interface Global { fetch(url: string | Request, init?: RequestInit | undefined): Promise<Response> }
declare var global: Global
global.fetch = fetch
2
質問内容が「変数が定義済みか」なのか「プロパティが定義済みか」なのか、判断に迷うところですが、両方の観点から回答します。
TypeError
if (typeof (data) !== 'undefined' && typeof (data.value) !== 'undefined') {
console.log('defined:' + data.value);
}
こちらのコードは data === null の際に期待通りに動作しません。
var data = null;
typeof (data.value) !== 'undefined'; // TypeError: Cannot read property 'value' of null
...
2
Promise<>の使い方を説明しているサイトがあったら教えてください。
MDNに詳しい使い方が日本語で紹介されてましてので、こちらが参考になると思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises
navigator.mediaDevices.getUserMediaで悩んでいます。
getUserMediaで取得できるMediaStreamを取り出して別の関数で使いたい、と認識しました。
こんなかんじでthenの中から別の関数を呼び出すのでは、解決できないでしょうか?
const render = (stream) => {
const video = document....
2
このエラーメッセージは、default exportをインポートする構文を用いてdate-utilsをインポートしなければならないと指摘しています。つまり、次のようにすればエラーが消えると思われます。
import dt from 'date-utils'
追記
上記に加えて、さらにtsconfig.jsonから"allowSyntheticDefaultImports": falseの設定を削除しないとエラーが消えませんでした。
esModuleInteropとこのallowSyntheticDefaultImportsはどちらもcommonjsモジュールをESModuleとして扱う場合に関係するオプションで、前者がランタイムのサポート、後者が型システム上のみのサポートという違いがあります。
...
2
2つ紹介します。
1.シンプルな構造
簡易なやり方を紹介します。next.jsのcreate-next-appが分かりやすい例です。
規模の小さなライブラリや、別のライブラリにコアな実装が切り出された場合に向いています。
create-next-app
├── package.json
├── index.ts # TypeScriptの実装
└── tsconfig.json # distディレクトリを成果物の出力先に指定
2. 既存のライブラリにCLIを追加する場合の構造
GitHubにts-cli-templateというサンプルプロジェクトを用意したので、これを題材に紹介します。後付でCLIライブラリを作成する場合や、webpackなどJavaScript/...
2
TypeScript の構文は JavaScript の構文を拡張する形で作られています。つまり JavaScript で使える構文は TypeScript でも使えます(あくまで構文の話であって、コンパイルすると型エラーが出ることはあるかもしれませんが)。
つまり、class を extends する構文は JavaScript で使えますが、TypeScript でも使えます。どちらでも使える構文です。
2
searchResult.mapをラップしている({})が不要ですね。
<ul></ul>の中身を次のように置換すると良いでしょう。
{searchResult !== null && searchResult.map((item: any) => {
return <li>{item.volumeInfo.title}</li>;
})}
1
性能上の問題が出ていないならば、入れ替えのような難しいことは考えずに、一から順に作り直すのが楽だと思います。
とりあえず、ごく素直に考えると以下のようになりました。
作り直す前に元のオブジェクト達をどこかに保存しておかなければならないので、以下ではそれを mkObjectTable にやらせていますが、質問の例のように元のリストが単純な一次元配列なら、そのままコピーしておけばいいですね。
type MyObj = {
objectId: number,
children?: MyObj[],
}
function mkObjectTable(list: MyObj[], table: MyObj[] = []): MyObj[] {
for (const o of list) {
...
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
typescript × 110javascript × 42
reactjs × 24
node.js × 14
vue.js × 7
webpack × 6
angularjs × 5
material-ui × 5
nuxt.js × 4
react-jsx × 4
html × 3
angular × 3
jestjs × 3
next.js × 3
html5 × 2
json × 2
emacs × 2
firebase × 2
vscode × 2
テスト × 2
react-native × 2
redux × 2
aws × 1
go × 1
正規表現 × 1