dist
ํด๋๋ ๋ชจ๋ ์ถ๋ ฅ๊ฐ์ ๋ณด๊ดํ๋ ์์
์ ์ํํ๋ค. ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๊ณผ src
ํด๋์ ๋ชจ๋ ํ์
์คํฌ๋ฆฝํธ ํ์ผ์ด ๋ณด๊ด๋๋ฏ๋ก dist
์ src
ํด๋๋ฅผ ์
์ฑํ๊ณ , ํ์
์คํฌ๋ฆฝํธ ํ์ผ์ ์ ๋ถ src
ํด๋๋ก ์ฎ๊ธด๋ค. ๋ฃจํธ ์์น์ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํด๋๋ฅผ ์ญ์ ํ๊ณ tsc
๋ช
๋ น์ด๋ฅผ ์ฌ์ฉํด์ .ts
ํ์ผ์ ๋ค์ ์ปดํ์ผํ๋ค. ํ์
์คํฌ๋ฆฝํธ ๋์ปดํ์ผ๋ฌ๋ ํ์ ํด๋๋ฅผ ๋ค์ฌ๋ค๋ณด์ง๋ง, ์ถ๋ ฅ๊ฐ์ ์
๋ ฅํ์ผ ์์ ์๊ธฐ ๋๋ฌธ์ ์ด ์
๋ ฅ ํ์ผ์ outDir
๋ก ์ ์ดํ ์ ์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
}
}
outDir
๋ฅผ ์ค์ ํ๋ฉด, ์์ฑ๋ ํ์ผ์ด ์ ์ฅ๋๋ ์์น๋ฅผ ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ์ ์๋ฆด ์ ์๋ค. ๊ทธ๋ฆฌ๊ณ ์ด๋ฅผ dist
๋ก ์ค์ ํ ์ ์๋ค. ์ด ์์
์ ์ํํ ํ์ tsc
๋ช
๋ น์ด๋ฅผ ์คํํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ด src
ํด๋๊ฐ ์๋, dist
ํด๋์ ์์ฑ๋๋ค.<script src="app.js" defer></script>
<script src="analytics.js" defer></script>
index.html
๋ก ์ด๋ํ์ฌ app.js
๋ฅผ dist/app.js
๋ก, analytics.js
๋ฅผ dist/analytics.js
๋ก ์กฐ์ ํ๋ค. index.html
ํ์ผ์ dist
ํด๋๋ก ์ด๋์ํจ๋ค. ์ด์ dev
์๋ฒ๊ฐ ์ ๋๋ก ์๋ํ์ง ์์ ๊ฒ์ด๋ค.<script src="dist/app.js" defer></script>
<script src="dist/analytics.js" defer></script>
analytics.ts
ํ์ผ์ ๋์ผํ ์ด๋ฆ์ ํด๋๋ก ๋ง๋ค์ด์ ๊ทธ ์์ ๋ฃ์ด๋๊ณ tsc
๋ช
๋ น์ด๋ฅผ ์คํํ๋ค๊ณ ํด๋, ์ด์ ์ปดํ์ผ๋ js
ํ์ผ์ ์์์ dist
ํด๋ ์์์ ์์ฑ๋ ๊ฒ์ด๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
}
}
์ด์ rootDir
๋ฅผ ์ค์ ํ๊ณ src
์ ๊ฐ์ด ํ์ผ์ด ์ ์ฅ๋๋ ํด๋๋ฅผ ๊ตฌ์ฒด์ ์ผ๋ก ๊ฒฝ๋ก ์ค์ ํ์ฌ, ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ๊ฐ ํด๋์์ ๋ณด์ด์ง ์๋๋ก ํ๋ค. (์ด๋ ๋ฐ์ ์๋ include
์ต์
์ผ๋ก๋ ์ํํ ์ ์๋ ์์
์ด๋ค.) rootDir
์ค์ ์์ ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ๋ src
ํด๋๋ ํ์ธํ ๋ฟ๋ง ์๋๋ผ, ์ค์ ํ ํ๋ก์ ํธ ๊ตฌ์กฐ๊ฐ dist
ํด๋์์ ์ ์ง๋๊ณ ์๋์ง๋ ํ์ธํ๋ค. ์ด ์ต์
์ ์ฌ์ฉํ์ง ์๊ณ outDir
๋ฅผ ์ค์ ํ๊ฒ ๋๋ฉด, ๋ชจ๋ ํ์ผ์ dist
์์ฑ์ด ์ ์ฉ๋๋ฏ๋ก ์ฃผ์ํด์ผ ํ๋ค.
๋ฐ๋ผ์ rootDir
์ outDir
๋ฅผ ๋ชจ๋ ์ฌ์ฉํ ๋๋ ์
๋ ฅํ์ผ์ด ์๋ ์์น์ ์ถ๋ ฅ ํ์ผ์ด ์์ฑ๋ ์์น์ ๋ํด ์ ํํ๊ฒ ์ค์ ์ ํด์ผ ํ ๊ฒ์ด๋ค.
{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
}
}
removeComments
์ ๋ํด์๋ ์ดํด๋ณด์. ์ด๋ ์ด๋ฆ๋ง์ผ๋ก๋ ๊ธฐ๋ฅ์ด ์ง์ ๊ฐ๋ฅํ๋ค. removeComments
์ต์
์ ์ค์ ํ๋ฉด, ํ์
์คํฌ๋ฆฝํธ ํ์ผ์ ๋ชจ๋ ์ฃผ์์ด ์ปดํ์ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์์ '์ ๊ฑฐ' ๋๋ค! ์ด๋ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋๋ฐ ์ข์ ์ต์
์ด ๋ ์ ์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
// "noEmit": true,
...
}
}
noEmit
์ ์ด๋จ๊น? noEmit
์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ์์ฑํ์ง ์์ ๋ ์ค์ ํ๋ ์ต์
์ด๋ค. ํ์
์คํฌ๋ฆฝํธ ๊ฐ๋
์ด๋ผ์ ์กฐ๊ธ ์ด์ํ๊ฒ ๋ณด์ด๊ฒ ์ง๋ง, ์ด ์ต์
์ ํ์ผ์ด ์ ํํ์ง ํ์ธํ๊ณ ์ถ์ง๋ง ์๊ฐ์ ์ ์ฝํ๊ธฐ ์ํด ๋ชจ๋ ์ถ๋ ฅ ํ์ผ์ ์์ฑํ๊ณ ์ถ์ง ์์ ๋ ์ฌ์ฉํ๋ค. ์๋ฅผ ๋ค์ด, ๊ท๋ชจ๊ฐ ํฐ ํ๋ก์ ํธ์์๋ ์ด ๊ฐ์ ์ฐธ(true)์ผ๋ก ์ค์ ํ์ฌ ์ถ๋ ฅ ํ์ผ์ ๊ฐ์ ธ์ค์ง ์๊ณ ๋ ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ๊ฐ ํ์ผ์ ๊ฒ์ฌํ๊ณ ์ ์ฌ์ ์๋ฌ๋ฅผ ๋ณด๊ณ ํ๋๋ก ํ ์ ์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
// "noEmit": true,
// "downlevelIteration": true,
...
}
}
downlevelIteration
์ต์
์ ๊ณ ๊ธ ๊ธฐ๋ฅ์ด๋ค. for
๋ฃจํ๊ฐ ์๊ณ ์์ฑ๋ ์ฝ๋๊ฐ ํด๋น ๋ฃจํ์ ๋ค๋ฅด๊ฒ ์๋ํ๋ ๊ฒฝ์ฐ์๋ง ํด๋น ์ต์
์ ์ฌ์ฉํด์ผ๋ง ํ๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
}
}
noEmitOnError
์ต์
์ ์ผ๋ฐ์ ์ผ๋ก ํ์
์คํฌ๋ฆฝํธ ํ์ผ์ ์๋ฌ๊ฐ ์๋ ๊ฒฝ์ฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ(์ปดํ์ผ)์ ๊ฐ์ ธ์ค๊ณ ์ถ์ง ์์ ๋ ์ค์ ํ๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
"strict": true
}
}
strict
์ต์
์ ์ฝ๋์์ ์ฐ๋ฆฌ๊ฐ ์์
ํ๊ณ ์๋ ๋งค๊ฐ๋ณ์์ ๊ฐ์ ๋ช
ํํ ํ ์ ์๋๋ก ํด์ค๋ค. ์ด "strict": true
์ต์
์ผ๋ก ๋ชจ๋ "strict"
์ ํ์ ๊ฒ์ฌ ์ต์
์ ์ฌ์ฉํ ์ ์๋ค. ์ด ์ต์
์ ์ค์ ํ๋ฉด ๋ชจ๋ ์ต์
์ ๊ฐ๋ณ์ ์ผ๋ก ์ค์ ํ๋ ๊ฒ๊ณผ ๊ฐ์ผ๋ฏ๋ก ์ต์
์ ํ๋์ฉ ์ค์ ํ๊ฑฐ๋, "strict": true
๋ง ์ค์ ํ ์๋ ์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
// "strict": true,
"noImplicitAny": false
}
}
noImplicitAny
์ต์
๋ถํฐ ์ดํด๋ณด์. ์ด ์ต์
์ ๋ ๋์ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ๋์์ด ๋๋ ์์ฃผ ํฅ๋ฏธ๋ก์ด ์ต์
์ด๋ค.function sendAnalytics(data) {
// data์์ ํ์
์๋ฌ ๋ฐ์
console.log(data);
}
sendAnalytics("The data");
any
ํ์
์ ์ง๋๊ธฐ์ ํด๋น ์ต์
๊ณผ ์ฐ๊ด๋ ๊ฒ์ฒ๋ผ ๋ณด์ธ๋ค. ํด๋น ์ต์
์ false ๋ก ์ค์ ํ๋ ๊ฒฝ์ฐ ์๋ฌ๋ IDE ์์๋ ์ฝ๋๋ฅผ ์ปดํ์ผ ํ ๋๋ ๋ฐ์ํ์ง ์๊ฒ ๋๋ค. ๊ทธ๋ผ ์ด ์ต์
์ ๊ธฐ๋ฅ์ ๋ฌด์์ผ๊น? ์ด ์ต์
์ ์ฝ๋์์ ์ฐ๋ฆฌ๊ฐ ์์
ํ๊ณ ์๋ '๋งค๊ฐ๋ณ์'์ '๊ฐ'์ ๋ช
ํํ ํ ์ ์๋๋ก ํด์ค๋ค.function sendAnalytics(data) {
// data์์ ํ์
์๋ฌ ๋ฐ์
console.log(data);
}
sendAnalytics("The data");
sendAnalytics
์ด ๋จผ์ ์ ์ธ๋๋ค๋ ์ ์ด๋ค. ๋ฐ๋ผ์ ํจ์๊ฐ ์์ฑ๋๋ ์์ ์๋ ์ด๋ค ๊ฒฐ๊ณผ๊ฐ ๋ํ๋ ์ง ์ ์ ์๊ฒ ๋๋ค.function sendAnalytics(data: string) {
// data์์ ํ์
์๋ฌ ๋ฐ์
console.log(data);
}
sendAnalytics("The data");
let logged;
function sendAnalytics(data: string) {
console.log(data);
logged = true;
}
sendAnalytics("The data");
logged
๋ณ์๋ฅผ ์ ์ธํ๊ณ ๊ฐ์ ํจ์ ์์์ true ๋ก ์ค์ ํ๋ฉด ํด๋น ์ ์ธ์ ๋ํ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๊ฒ ๋๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
"strict": true,
"strictNullChecks": false,
}
}
strictNullChecks
์ต์
์ null
๊ฐ์ ์ ์ฌ์ ์ผ๋ก ๊ฐ์ง ์ ์๋ ๊ฐ์ ์ ๊ทผํ๊ณ ์์
ํ๋ ๋ฐฉ์์ ํ์
์คํฌ๋ฆฝํธ์๊ฒ ๋งค์ฐ ์๊ฒฉํ๊ฒ ์๋ ค์ค๋ค.const button = document.querySelector("button")!;
button.addEventListener("click", () => {
console.log("Clicked");
});
button
์ญ์ null
์ผ ์ ์๋ค. ์ฌ๊ธฐ์ ์ฌ์ด ํด๊ฒฐ์ฑ
์ ๋๋ํ ์ฐ์ฐ์๋ฅผ ๋ค์ ๋ถ์ด๋ ์ผ์ด๋ค.const button = document.querySelector("button"); // ! ํ์
์ ์ง์ ๋ค.
const button = document.querySelector("button"); // ! ํ์
์ ์ง์ ๋ค.
button.addEventListener("click", () => {
console.log("Clicked");
});
index.html
์ ๋ฒํผ ๋ถ๋ถ์ ์ฃผ์ ์ฒ๋ฆฌํ๊ณ ,<body>
<!-- <button>Click me</button> -->
</body>
addEventListener
๋ฅผ null
๋ก ๋ถ๋ฌ์ฌ ์ ์๊ธฐ ๋๋ฌธ์ด๋ค. ํด๋น ๋ฒํผ์ ์ฃผ์์ฒ๋ฆฌ ํ์ผ๋ฏ๋ก button์ ์ฌ๋ผ์ก๊ณ ,const button = document.querySelector("button"); // ! ํ์
์ ์ง์ ๋ค.
strictNullChecks
๋ฅผ true๋ก ์ค์ ํ์ฌ ๋ฐฉ์งํ ์ ์๋ ์ค์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
"strict": true,
"strictNullChecks": true,
}
}
strictNullCheck
๋ ์๋์ผ๋ก ์ค์ ๋์ด ํ์
์คํฌ๋ฆฝํธ ์์ ๋ถ์์ฌ๋ฅผ ๋๋นํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋๋ก ํด์ค๋ค. ๋ฌผ๋ก ์ฌ๊ธฐ์ ์ฌ์ด ํด๊ฒฐ์ฑ
์ ๋๋ํ ์ฐ์ฐ์์ด์ง๋ง ๋ง์ด๋ค."strict": true,
// "strictNullChecks": true,
// strict๋ฅผ true๋ก ์ค์ ํ๋ฉด `strictNullCheck`๋ ์๋์ผ๋ก ์ค์
!
์ฐ์ฐ์๋ ํ์
์คํฌ๋ฆฝํธ๊ฐ ๊ฐ๋ฐ์์๊ฒ ํด๋น ๋ฒํผ์ด ์กด์ฌํ๊ฑฐ๋ ์ด ์ฐ์ฐ์ด null์ด ์๋ ๊ฐ์ ๋ฐํํ๋ค๋ ๊ฑธ ์ ์ ์๊ฒ ํด์ฃผ๋ ์ญํ ์ ํ๋ค. ๋ณดํต html ์ฝ๋๋ฅผ ์์
ํ๋ฉด์ button
์๋ฆฌ๋จผํธ, ์ฆ ์ฌ๊ธฐ ์๋ selector๊ฐ ์๋๋๋ button
์ด ์์์ ์๊ณ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง๊ธฐ์ ๊ทธ์ ๋๋ํ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ฉด ๋ ๊ฒ์ด๋ค.const button = document.querySelector("button");!
if
๋ฌธ์ ์ฌ์ฉํด์ ๋ฌธ์ ๊ฐ ์์์ง๋ ๋ชจ๋ฅด๋ ์ฝ๋๋ฅผ ๊ฐ์ธ๋ ๊ฒ ์ข๋ค.const button = document.querySelector("button");
if (button) {
// truthy
button.addEventListener("click", () => {
console.log("Clicked");
});
}
if
๋ฌธ์ผ๋ก ๊ฐ์ธ๊ฒ ๋๋ฉด, ๋๋ํ ์ฐ์ฐ์๊ฐ ์์ด๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๊ฒ ๋๋ค. ์ด๋ฐ ๋ฐฉ์์ ๊น๋ํด๋ณด์ด์ง๋ง ๋ฌด์ธ๊ฐ ์กด์ฌํ๋ค๋ ๊ฒ์ด ํ์คํ๋ค๋ฉด ๋๋ํ ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ฝค ๊ด์ฐฎ์ ์ต์
์ด๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
}
}
strictFunctionTypes
์ ๋ณด๋ค ๊ณ ๊ธ ์ค์ ์ผ๋ก, ๋ง์ ์ ํ๋ฆฌ์ผ์ด์
์์ ๋ณผ ์ ์๋ ํ์ ๋ฐ์ค๋ฅผ ์ก๋๋ค. ์ด๋ ์ค์ ์ค์ธ ํจ์ ํ์
๊ณผ ๊ด๋ จ์ด ์์ผ๋ฉฐ, ํจ์ ๋ด์ ํ์
์ ์๋๋ค. ๊ทธ๋ฌ๋, ๋งค๊ฐ ๋ณ์์ ๋ฐํ ๊ฐ์ ๋ํด ํจ์๊ฐ ์ด๋ป๊ฒ ํ์๋๋์ง ์ ์๋๊ณ , ํจ์ ํ์
์ ์์ฑํ๋ ๊ฒฝ์ฐ ๋ฐ์ค๋ฅผ ์
๋ ฅํ ์ ์๋ค.{
"compilerOptions": {
/* Basic Options */
"target": "es6"
"module": "commonjs"
"lib": [
"DOM",
"ES6",
"DOM.Iterable",
"ScriptHost"
]
/* Specify library files to be included in the compilation. */,
...
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./dist", /* Redirect output structure to the directory. */
"rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
...
"removeComments": true,
...
"noEmitOnError": true,
...
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true, /* Enable strict checking of function types. */
"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
}
}
strictBindCallApply
๋ ๊ฒฐํฉํ๊ณ ํธ์ถํ๊ณ ์ ์ฉํ๋ ์์
์ ์ ์ฉํ๋ค.const button = document.querySelector("button");
function clickHandler() {
console.log("Clicked");
}
if (button) {
button.addEventListener("click", clickHandler);
}
addEventListener
์ด๋ฒคํธ๋ฆฌ์ค๋๋ก clickHanlder
ํจ์๋ฅผ ์คํํ๋ฉด์, ํน์ ์ธ์๋ฅผ ์ ๋ฌํ๊ฑฐ๋ ์ด๋ค ํค์๋๋ฅผ ํน์ ๊ฐ์ผ๋ก ์ค์ ํ๊ณ ์ ํ๋ค.const button = document.querySelector("button");
function clickHandler(message: string) {
console.log("Clicked" + message);
}
if (button) {
button.addEventListener("click", clickHandler);
}
clickHandler
ํจ์์ ์ ๋ฌํ ์ธ์๋ฅผ ์ฌ๊ตฌ์ฑํ๊ณ ์ ํ ๋ bind()
๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. bind()
๋ ์ฐ๋ฆฌ๊ฐ ์ด ํค์๋์ ๊ฒฐํฉ(bind)ํ๊ณ ์ ํ๋ ํญ๋ชฉ๋ ์ทจํ๋ ์ฒซ ๋ฒ์งธ ํจ์์ด๋ค.const button = document.querySelector("button");
function clickHandler(message: string) {
console.log("Clicked" + message);
}
if (button) {
button.addEventListener("click", clickHandler.bind(null));
}
null
์ด๋ ๊ฐ์ ๊ฒฐํฉ(bind)ํ๊ณ ์ ํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ๊ทธ๋ฆฌ๊ณ ํด๋น ์๋ฌ๋ strictBindCallApply
๋ฅผ false๋ก ์ค์ ํ๋ฉด ๋ฐฉ์งํ ์ ์๋ค. ์ด ์ต์
์ ๊ธฐ๋ฅ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํธ์ถํ๋ ค๋ ํจ์๊ฐ bind
, call
, apply
์ค ๋ฌด์์ ํด๋นํ๋์ง ํ์ธํ๊ณ ์ฌ๊ธฐ์ ํจ์๋ฅผ ์ ๋๋ก ์ค์ ํ๋์ง๋ฅผ ํ์ธํ๋ค. bind
๊ฐ ์ง์ ๋ clickHandler
์์ ๋งค๊ฐ๋ณ์๊ฐ ํ์ํ ๊ฒฝ์ฐ ์ด๋ฅผ ๊ตฌ์ฑํ์ง ์์ผ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. bind
, call
, apply
๋ฅผ ์ฌ์ฉํ๋ฉด์ ์ค์ํ์ง ์๋๋กํด์ฃผ๋ ์์ฃผ ์ ์ฉํ ์ต์
์ด๋ค.
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true,
๐จ ํด๋น ํฌ์คํ ์ Udemy์ Typescript :๊ธฐ์ด๋ถํฐ ์ค์ ํ ํ๋ก์ ํธ๊น์ง with React + NodeJS ๊ฐ์๋ฅผ ๋ฒ ์ด์ค๋ก ํ ๊ธฐ๋ก์ ๋๋ค.
โ๐ป ๊ฐ์ git repo ๋ฐ๋ก๊ฐ๊ธฐ