Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
tsconfig.jsonを完全に理解する
Search
pco2699
October 08, 2019
Programming
1
1.6k
tsconfig.jsonを完全に理解する
pco2699
October 08, 2019
Tweet
Share
More Decks by pco2699
See All by pco2699
enebular x Hugging Faceで 自然言語処理の全能の神になる
pco2699
0
300
enebular x AutoML Visionで 爆速で画像判定アプリをつくる
pco2699
0
370
enebularで 爆速で機械学習APIをつくる
pco2699
0
140
JavaScriptアルゴリズム本を 技術書典7で頒布しました
pco2699
1
620
MIDI × MQTT × Twitterで ハッシュタグ自動作曲シンセを作ろう
pco2699
1
1.1k
enebular × MIDI × MQTT ハンズオンの反省をする
pco2699
1
410
MIDIキーボードとenebularをつなげてみよう
pco2699
0
490
Firebase Cloud Messagingで 通知の配信遅延とたたかってみた
pco2699
4
10k
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
Rethinking UI building strategies @ SFI 2024
letelete
0
270
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
見た目から始める生産性向上
ikumatadokoro
7
800
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
490
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
Ruby Pattern Matching
bkuhlmann
0
920
PHPはいつから死んでいるかの調査
chiroruxx
1
380
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.1k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
18k
VS Code をプロダクトにどう取り込むか
onomax
1
350
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Designing the Hi-DPI Web
ddemaree
276
33k
Building Adaptive Systems
keathley
31
1.9k
Typedesign – Prime Four
hannesfritz
36
2.1k
Optimizing for Happiness
mojombo
370
69k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Bash Introduction
62gerente
604
210k
Transcript
Completely understand tscon g.json @pco2699 Ginza.js#5 @ Plaid 1
Self Introduction Self Introduction Kazuyuki Takayama Twitter: @pco2699 Like: TypeScript
2
Content Content tscon g.jsonの中⾝を解説する 3
Goal Goal 雰囲気で理解している⼈が tscon g.jsonを完全に理解する 4
TypeScript Version TypeScript Version TypeScript 3.6準拠 コンパイラオプションは追加/変化するので注意 困ったら公式を参照︕ 5
What is tsconfig.json What is tsconfig.json TypeScriptのプロジェクトに置かれる設定ファイル 主にTypeScriptのコンパイラオプションを設定する 6
example - tsconfig.json example - tsconfig.json { "compilerOptions": { "noImplicitAny":
true, "removeComments": true, "preserveConstEnums": true, "outFile": "../../built/local/tsc.js", }, "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] } 7
コンパイル対象指定 コンパイル対象指定 les exclude include プロジェクト分割 プロジェクト分割 references/extends IDE IDE
typeAcquisition compileOnSave コンパイラオプション コンパイラオプション
compilerOptions 8
コンパイル対象指定 コンパイル対象指定 les exclude include tscでコンパイルする対象を指定する 9 . 1
files files lesは個別にコンパイル対象を指定 { "files": [ "core.ts", "sys.ts", "types.ts" ]
} 9 . 2
include/exclude include/exclude include/excludeはglobで対象・対象外を指定 { "include": [ "src/**/*" ], "exclude": [
"node_modules", "**/*.spec.ts" ] } 9 . 3
プロジェクト分割 プロジェクト分割 references/extends 10 . 1
references/extends references/extends tscon g.jsonを⼩さいプロジェクトに分割して 管理できるようにする 10 . 2
project structure project structure ./home ├── tsconfig-base.json ├── src │
└── tsconfig.json └── test # srcの型やソースコードに依存している └── tsconfig.json 10 . 3
home/tsconfig.json home/tsconfig.json ベースとなる設定を記載 (基底クラスのような働き) { "compilerOptions": { ... } }
10 . 4
src/tsconfig.json src/tsconfig.json 参照されるtscon g.jsonにはcompositeをつける { "extends": "../tsconfig-base.json", "compilerOptions": { //
compiler options "composite": true } } 10 . 5
test/tsconfig.json test/tsconfig.json referencesで参照する。 { "extends": "../tsconfig-base.json", "references": [ { "path":
"../src" } ] } 10 . 6
testを動かす際は、--buildでsrcをビルドする $ tsc --build src 10 . 7
IDE IDE typeAcquision compileOnSave 11 . 1
typeAcquision typeAcquision import時に、型ファイルをIDEが⾃動取得するか import React from 'react'; // reactの型ファイルを自動取得 11
. 2
compileOnSave compileOnSave tscon g.jsonを保存時にtsファイルをコンパイルし直 すか { "compileOnSave": true } 11
. 3
コンパイラオプション コンパイラオプション compilerOptions コンパイラオプションは⾮常に多い(85個) デフォルトのtscon g.jsonでtrueのものだけ説明 12
$ tsc --init { "compilerOptions": { "target": "es5", // コンパイル後のJSのバージョン
"module": "commonjs", // コンパイル後のimport/export方式 "strict": true, "esModuleInterop": true } } 13
strictオプション strictオプション 次のオプションをすべてONにする noImplicitAny noImplicitThis alwaysStrict strictBindCallApply strictNullChecks strictFunctionTypes strictPropertyInitialization
14 . 1
strictで怒られる簡単なコード strictで怒られる簡単なコード const hoge = (input) => { // noImplicitAny
error console.log(input); } hoge(1); const piyo: number = null; // strictNullChecks error 14 . 2
その他 その他 alwaysStrict: JSの use strictモードを有効化 strictBindCallApply: call,apply,bindも型チェック noImplicitThis: 暗黙のthis引き渡しを禁⽌
strictFunctionTypes: 関数引数の双変性を無効 strictPropertyInitialization: プロパティ初期化必須 14 . 3
esModuleInterop 15 . 1
Interoperability of CommonJS <=> ES6 Module Interoperability: 相互運⽤性 15 .
2
CommonJs import/export CommonJs import/export // export const hoge = ()
=> { // ...some func } exports = hoge // import const moment = require("hoge"); moment(); 15 . 3
ES6 Module import/export ES6 Module import/export // export export const
hoge = () => { // ...some func }; // import import { hoge } from 'hoge'; hoge(); 15 . 4
export: CommonJs import: ES6 Module export: CommonJs import: ES6 Module
esmoduleInterop: false esmoduleInterop: false esmoduleInterop: true esmoduleInterop: true import * as hoge from './hoge' hoge(); // *を呼び出すのはES6 Moduleの規約NG // CommonJSをdefault importでimportできる import hoge from './hoge' hoge(); // ES6 Module準拠 15 . 5
その他は を参照しましょう。 公式資料 15 . 6
まとめ まとめ tscon g.jsonを完全に理解した 次回は「コンパイラオプションを完全に理解する」 を40分かけてやりたい 16