Slide 1
Slide 1 text
Completely understand
tscon g.json
@pco2699
Ginza.js#5 @ Plaid
1
Slide 2
Slide 2 text
Self Introduction
Self Introduction
Kazuyuki Takayama
Twitter: @pco2699
Like: TypeScript
2
Slide 3
Slide 3 text
Content
Content
tscon g.jsonの中⾝を解説する
3
Slide 4
Slide 4 text
Goal
Goal
雰囲気で理解している⼈が
tscon g.jsonを完全に理解する
4
Slide 5
Slide 5 text
TypeScript Version
TypeScript Version
TypeScript 3.6準拠
コンパイラオプションは追加/変化するので注意
困ったら公式を参照︕
5
Slide 6
Slide 6 text
What is tsconfig.json
What is tsconfig.json
TypeScriptのプロジェクトに置かれる設定ファイル
主にTypeScriptのコンパイラオプションを設定する
6
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
コンパイル対象指定
コンパイル対象指定
les
exclude
include
プロジェクト分割
プロジェクト分割
references/extends
IDE
IDE
typeAcquisition
compileOnSave
コンパイラオプション
コンパイラオプション
Slide 9
Slide 9 text
compilerOptions
8
Slide 10
Slide 10 text
コンパイル対象指定
コンパイル対象指定
les
exclude
include
tscでコンパイルする対象を指定する
9 . 1
Slide 11
Slide 11 text
files
files
lesは個別にコンパイル対象を指定
{
"files": [
"core.ts",
"sys.ts",
"types.ts"
]
}
9 . 2
Slide 12
Slide 12 text
include/exclude
include/exclude
include/excludeはglobで対象・対象外を指定
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
9 . 3
Slide 13
Slide 13 text
プロジェクト分割
プロジェクト分割
references/extends
10 . 1
Slide 14
Slide 14 text
references/extends
references/extends
tscon g.jsonを⼩さいプロジェクトに分割して
管理できるようにする
10 . 2
Slide 15
Slide 15 text
project structure
project structure
./home
├── tsconfig-base.json
├── src
│ └── tsconfig.json
└── test # srcの型やソースコードに依存している
└── tsconfig.json
10 . 3
Slide 16
Slide 16 text
home/tsconfig.json
home/tsconfig.json
ベースとなる設定を記載 (基底クラスのような働き)
{
"compilerOptions": {
...
}
}
10 . 4
Slide 17
Slide 17 text
src/tsconfig.json
src/tsconfig.json
参照されるtscon g.jsonにはcompositeをつける
{
"extends": "../tsconfig-base.json",
"compilerOptions": {
// compiler options
"composite": true
}
}
10 . 5
Slide 18
Slide 18 text
test/tsconfig.json
test/tsconfig.json
referencesで参照する。
{
"extends": "../tsconfig-base.json",
"references": [
{ "path": "../src" }
]
}
10 . 6
Slide 19
Slide 19 text
testを動かす際は、--buildでsrcをビルドする
$ tsc --build src
10 . 7
Slide 20
Slide 20 text
IDE
IDE
typeAcquision
compileOnSave
11 . 1
Slide 21
Slide 21 text
typeAcquision
typeAcquision
import時に、型ファイルをIDEが⾃動取得するか
import React from 'react'; // reactの型ファイルを自動取得
11 . 2
Slide 22
Slide 22 text
compileOnSave
compileOnSave
tscon g.jsonを保存時にtsファイルをコンパイルし直
すか
{
"compileOnSave": true
}
11 . 3
Slide 23
Slide 23 text
コンパイラオプション
コンパイラオプション
compilerOptions
コンパイラオプションは⾮常に多い(85個)
デフォルトのtscon g.jsonでtrueのものだけ説明
12
Slide 24
Slide 24 text
$ tsc --init
{
"compilerOptions": {
"target": "es5", // コンパイル後のJSのバージョン
"module": "commonjs", // コンパイル後のimport/export方式
"strict": true,
"esModuleInterop": true
}
}
13
Slide 25
Slide 25 text
strictオプション
strictオプション
次のオプションをすべてONにする
noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictFunctionTypes
strictPropertyInitialization
14 . 1
Slide 26
Slide 26 text
strictで怒られる簡単なコード
strictで怒られる簡単なコード
const hoge = (input) => { // noImplicitAny error
console.log(input);
}
hoge(1);
const piyo: number = null; // strictNullChecks error
14 . 2
Slide 27
Slide 27 text
その他
その他
alwaysStrict: JSの use strictモードを有効化
strictBindCallApply: call,apply,bindも型チェック
noImplicitThis: 暗黙のthis引き渡しを禁⽌
strictFunctionTypes: 関数引数の双変性を無効
strictPropertyInitialization: プロパティ初期化必須
14 . 3
Slide 28
Slide 28 text
esModuleInterop
15 . 1
Slide 29
Slide 29 text
Interoperability of CommonJS <=> ES6 Module
Interoperability: 相互運⽤性
15 . 2
Slide 30
Slide 30 text
CommonJs import/export
CommonJs import/export
// export
const hoge = () => {
// ...some func
}
exports = hoge
// import
const moment = require("hoge");
moment();
15 . 3
Slide 31
Slide 31 text
ES6 Module import/export
ES6 Module import/export
// export
export const hoge = () => {
// ...some func
};
// import
import { hoge } from 'hoge';
hoge();
15 . 4
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
その他は を参照しましょう。
公式資料
15 . 6
Slide 34
Slide 34 text
まとめ
まとめ
tscon g.jsonを完全に理解した
次回は「コンパイラオプションを完全に理解する」
を40分かけてやりたい
16