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.9k
tsconfig.jsonを完全に理解する
pco2699
October 08, 2019
Tweet
Share
More Decks by pco2699
See All by pco2699
enebular x Hugging Faceで 自然言語処理の全能の神になる
pco2699
0
350
enebular x AutoML Visionで 爆速で画像判定アプリをつくる
pco2699
0
420
enebularで 爆速で機械学習APIをつくる
pco2699
0
180
JavaScriptアルゴリズム本を 技術書典7で頒布しました
pco2699
1
860
MIDI × MQTT × Twitterで ハッシュタグ自動作曲シンセを作ろう
pco2699
1
1.3k
enebular × MIDI × MQTT ハンズオンの反省をする
pco2699
1
600
MIDIキーボードとenebularをつなげてみよう
pco2699
0
580
Firebase Cloud Messagingで 通知の配信遅延とたたかってみた
pco2699
4
11k
Other Decks in Programming
See All in Programming
CSC307 Lecture 17
javiergs
PRO
0
110
Parallel::Pipesの紹介
skaji
2
900
Agent Rules as Domain Parser
yodakeisuke
1
480
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
270
インターフェース設計のコツとツボ
togishima
2
690
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
110
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
540
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
270
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
450
Interface vs Types ~型推論が過多推論~
hirokiomote
1
250
Featured
See All Featured
Designing for Performance
lara
609
69k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Music & Morning Musume
bryan
46
6.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Statistics for Hackers
jakevdp
799
220k
Designing for humans not robots
tammielis
253
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
4 Signs Your Business is Dying
shpigford
183
22k
Embracing the Ebb and Flow
colly
85
4.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
680
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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