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コーディングエージェントで書くために意識していること
shuyakinjo
1
300
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
970
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.3k
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
decksh - a little language for decks
ajstarks
4
21k
CSC305 Summer Lecture 05
javiergs
PRO
0
110
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
Flutterと Vibe Coding で個人開発!
hyshu
1
260
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
tool ディレクティブを導入してみた感想
sgash708
1
150
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Thoughts on Productivity
jonyablonski
69
4.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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