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.8k
tsconfig.jsonを完全に理解する
pco2699
October 08, 2019
Tweet
Share
More Decks by pco2699
See All by pco2699
enebular x Hugging Faceで 自然言語処理の全能の神になる
pco2699
0
330
enebular x AutoML Visionで 爆速で画像判定アプリをつくる
pco2699
0
410
enebularで 爆速で機械学習APIをつくる
pco2699
0
170
JavaScriptアルゴリズム本を 技術書典7で頒布しました
pco2699
1
820
MIDI × MQTT × Twitterで ハッシュタグ自動作曲シンセを作ろう
pco2699
1
1.2k
enebular × MIDI × MQTT ハンズオンの反省をする
pco2699
1
550
MIDIキーボードとenebularをつなげてみよう
pco2699
0
550
Firebase Cloud Messagingで 通知の配信遅延とたたかってみた
pco2699
4
11k
Other Decks in Programming
See All in Programming
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
950
Datadog DBMでなにができる? JDDUG Meetup#7
nealle
0
150
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
270
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
Introduction to kotlinx.rpc
arawn
0
770
Swift Testingのモチベを上げたい
stoticdev
2
140
バッチを作らなきゃとなったときに考えること
irof
2
540
Jasprが凄い話
hyshu
0
180
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
It's Worth the Effort
3n
184
28k
Making Projects Easy
brettharned
116
6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Writing Fast Ruby
sferik
628
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
GitHub's CSS Performance
jonrohan
1030
460k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Embracing the Ebb and Flow
colly
84
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Code Reviewing Like a Champion
maltzj
521
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
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