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
2k
tsconfig.jsonを完全に理解する
pco2699
October 08, 2019
Tweet
Share
More Decks by pco2699
See All by pco2699
enebular x Hugging Faceで 自然言語処理の全能の神になる
pco2699
0
360
enebular x AutoML Visionで 爆速で画像判定アプリをつくる
pco2699
0
430
enebularで 爆速で機械学習APIをつくる
pco2699
0
190
JavaScriptアルゴリズム本を 技術書典7で頒布しました
pco2699
1
910
MIDI × MQTT × Twitterで ハッシュタグ自動作曲シンセを作ろう
pco2699
1
1.3k
enebular × MIDI × MQTT ハンズオンの反省をする
pco2699
1
630
MIDIキーボードとenebularをつなげてみよう
pco2699
0
600
Firebase Cloud Messagingで 通知の配信遅延とたたかってみた
pco2699
4
12k
Other Decks in Programming
See All in Programming
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
110
Introduction to Git & GitHub
latte72
0
110
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
140
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.3k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
コンテキストエンジニアリング Cursor編
kinopeee
1
530
実践!App Intents対応
yuukiw00w
1
290
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
290
パスタの技術
yusukebe
1
390
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
130
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
380
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Why Our Code Smells
bkeepers
PRO
338
57k
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