tsc
컀맨λλ₯Ό μ€ννλ κ²μ μ΄μ©μ§ λ²κ±°λ‘λ€. λ³κ²½μ¬νμ μλμΌλ‘ μ
λ°μ΄νΈνκ³ μ»΄νμΌ ν΄μ£Όλ watch mode
λ₯Ό μ¬μ©νλ©΄ ν¨μ¬ νΈλ¦¬νλ€.tsc app.ts --watch
tsc app.ts -w
tsc --init
tsc --init
λͺ
λ Ήμ΄λ₯Ό μ¬μ©νλ©΄ νμΌμ μ§μ νμ§ μμλ κ΄μ°° λͺ¨λλ‘ μ 체 νλ‘μ νΈ ν΄λλ₯Ό νμΈνκ³ μ
λ°μ΄νΈ μ¬νμ΄ μ μ©λ μ μκ² νλ©°, ν΄λΉ νλ‘μ νΈ ν΄λμ λͺ¨λ νμ
μ€ν¬λ¦½νΈ νμΌμ λ€μ μ»΄νμΌν μ μκ² λλ€. μ¦, μ΄ νλ‘μ νΈ ν΄λκ° νμ
μ€ν¬λ¦½νΈλ‘ κ΄λ¦¬ν΄μΌ ν νλ‘μ νΈλΌκ³ νμ
μ€ν¬λ¦½νΈμκ² μλ €μ£Όλ λͺ
λ Ήμ΄λΌκ³ 보면 λλ€. ν΄λΉ λͺ
λ Ήμ΄κ° μ€νλλ ν΄λμ λͺ¨λ νλͺ©μ νμ
μ€ν¬λ¦½νΈμ μλ €μ£Όλ μν μ νκ² λλ©°, ν΄λΉ νλ‘μ νΈλ₯Ό νμ
μ€ν¬λ¦½νΈ νλ‘μ νΈλΌκ³ νμ
μ€ν¬λ¦½νΈμ μ²μμ μλ €μ£ΌκΈ° μν΄ λ¨ ν λ²λ§ μ€ννλ©΄ λλ€. (λ°λΌμ, μ¬λ°λ₯Έ ν΄λ μμΉμ λͺ
λ Ήμ΄λ₯Ό μ¬μ©νλ κ²μ΄ μ€μνλ€.) μ€μΉκ° λλλ©΄, μ΄μ ν΄λΉ νλ‘μ νΈλ νμ
μ€ν¬λ¦½νΈκ° κ΄λ¦¬νκ² λλ©°, tsconfig.json
νμΌ μμ μμ±λλ€.
tsconfig.json
νμΌμ νμ μ€ν¬λ¦½νΈκ° κ΄λ¦¬ν΄μΌ νλ ν΄λΉ νμΌμ΄ ν¬ν¨λ νλ‘μ νΈμ λͺ¨λ ν΄λμ νμ ν΄λλ₯Ό μ°Έκ³ νκΈ° μν νμΌμ΄λ€. νμΌμ 보면 λ§μ μ΅μ μ μ€μ ν μ μλ νλͺ©λ€μ΄ μλ€. ν λ² νμΈν΄λ³΄μ.
tsc;
tsc
λͺ
λ Ήμ΄λ₯Ό νΉμ νμΌμ μ§μ νμ§ μκ³ ν λ²λ§ μ€ννλ©΄, νμ
μ€ν¬λ¦½νΈλ λͺ¨λ νμ
μ€ν¬λ¦½νΈ νμΌ, μ¦ ν΄λΉ νλ‘μ νΈμ λͺ¨λ νμ
μ€ν¬λ¦½νΈ νμΌμ μ»΄νμΌ νκ² λλ€. κ·Έλ¦¬κ³ tsc
λͺ
λ Ήμ΄ μ€νμ΄ λλλ©΄ λͺ¨λ νμ
μ€ν¬λ¦½νΈ νμΌμ΄ μ»΄νμΌλ javascript νμΌμ΄ μμ±λλ€.tsc --watch
tsc -w
watch
λͺ¨λλ₯Ό μ€ννλ€. μ΄ μμ μμμ tsc init
μΌλ‘ λͺ¨λ νμΌλ€μ νμ
μ€ν¬λ¦½νΈλ‘ κ΄λ¦¬ν΄μ£ΌκΈ°λ‘ νμΌλ―λ‘, νΉμ νμΌμ μ§μ νμ§ μμλ λͺ¨λ νμΌμ κ΄μ°° λͺ¨λλ₯Ό μ¬μ©ν μ μλ€. μ΄μ λ³κ²½ μ¬νμ μ μ©νλ©΄ λ³κ²½λ νμΌμ΄ λ€μ μλμΌλ‘ μ»΄νμΌ λλ©°, μλ°μ€ν¬λ¦½νΈ νμΌλ‘ λ³κ²½μ¬νμ΄ λ°μλλ κ±Έ μ μ μλ€.index.html
μ ν΅ν΄ λ νμΌμ ν κΊΌλ²μ κ°μ Έμ€κ³ μλ€.<script src="app.js" defer></script>
<script src="analytics.js" defer></script>
tsconfig.json
νμΌμ μ΄ν΄λ³΄μ.tsconfig.json
tsconfig.json
νμΌμ νλ‘μ νΈμ νμΌλ€μ μ΄λ»κ² μ»΄νμΌ ν΄μΌ νλμ§ νμ
μ€ν¬λ¦½νΈμκ² μλ €μ£Όλ μν μ νλ€. ν΄λΉ νμΌμ compilerOptions
μ€μ λ€μμ μ°λ¦¬κ° μ€μ ν μ μλ μ΅μ
μ λν΄μ μμ보μ. "exclude": [
"" // would be the default
]
exclude
μ΅μ
μ μ€μ ν΄λ³΄μ. μ¬κΈ°μ exclude
μ μΆκ°νλ©΄ μ΄λ λ¬Έμμ΄μ΄ λλ€. κ·Έλ¦¬κ³ κ·Έ κ°μΌλ‘ μ 체 νλ‘μ νΈλ₯Ό μλλ‘ tsc
λͺ
λ Ήμ΄λ₯Ό μ€νν λ μ»΄νμΌ λμλ μλλ νμΌμ λΆμν΄μ μ»΄νμΌμ λ§μμ€λ€. μλ₯Ό λ€μ΄, "exclude": [
"analytics.ts" // would be the default
]
analytics.ts
νμΌμ μ»΄νμΌμμ μ μΈ(exclude
)νκ³ μΆλ€λ©΄ μΆκ°νλ€. μ μ₯νκ³ tsc
λͺ
λ Ήμ΄λ₯Ό μ€ννλ©΄, analytics.ts
λ§ μ μΈνκ³ λͺ¨λ νμ
μ€ν¬λ¦½νΈ νμΌμ΄ μ»΄νμΌ λλ€. "exclude": [
"*.dev.ts" // would be the default
]
*
)λ₯Ό μμ μΆκ°νλ©΄ νμ
μ€ν¬λ¦½νΈλ dev.ts
κ° ν¬ν¨λ μ΄λ¦μΈ λͺ¨λ νμΌμ 무μνκ² λλ€. "exclude": [
"**/*.dev.ts" // would be the default
]
**/*
λ₯Ό μμ μΆκ°νλ©΄ λͺ¨λ ν΄λμμ μ΄μ κ°μ ν¨ν΄(dev.ts
)μ λͺ¨λ νμΌμ 무μνκ² λλ€. "exclude": [
"node_modules" // would be the default
]
node_modules
ν΄λλ₯Ό μΆκ°ν΄μ μ»΄νμΌμμ μ μΈ(exclude
)μν¨λ€.π
node_modules
ν΄λμλpackage.json
μ μ€μΉν λͺ¨λ μ’ μμ±μ μ΄ μ’ μμ±λ€μ λͺ¨λ μ’ μμ±μ΄ ν¬ν¨λμ΄ μλ€. μ¦, λ³κ²½νμ§ λ§μμΌ νλ νμ¬ λΌμ΄λΈλ¬λ¦¬λ₯Ό κ°μ Έμ€λ μμΉμ΄λ€. λν μ’ μμ±μ νμ¬ λΌμ΄λΈλ¬λ¦¬λ€ μ€ μΌλΆκ° νμ μ€ν¬λ¦½νΈ μ½λλ₯Ό μ 곡νλ κ²½μ° λΉμ°ν μ»΄νμΌ λλ κ²μ λ§μμΌ ν κ²μ΄λ€. μ»΄νμΌμ νκ² λλ©΄ μ°μ° κ³Όμ μ΄ λλ €μ Έμ μ΅μ μ κ²½μ°μ νλ‘μ νΈκ° λ§κ°μ§ μλ μκΈ° λλ¬Έμ΄λ€.
exclude
μ΅μ
μ μμ μ§μ νμ§ μκ² λλ©΄,// "exclude": [
// "node_modules" // would be the default
// ]
node_modules
λ κΈ°λ³Έ μ€μ μ μλμΌλ‘ μ μΈλλ€. λ°λΌμ κ΅³μ΄ node_modules
λ₯Ό μ»΄νμΌμμ μ μΈμν€κΈ° μν΄ exclude
μ΅μ
μ μΆκ°ν νμλ μλ€. μ¦, exclude
λΌλ μ»΄νμΌ μ μΈ μ΅μ
μ΄ μκΈ΄ νμ§λ§, μ μΈνκ³ μ νλ νλͺ©μ΄ node_modules
μΈ κ²½μ° exclude
μ€μ μ μΆκ°ν νμλ μ ν μλ€λ μλ―Έμ΄λ€. "include": [
"app.ts"
]
include
λ exclude
μ λ°λ κ°λ
μ μμ
μ μννλ€. include
λ μ»΄νμΌ κ³Όμ μ ν¬ν¨μν¬ νμΌμ νμ
μ€ν¬λ¦½νΈμ μλμ μΌλ‘ μλ €μ include
μ΅μ
μ ν¬ν¨λμ§ μμ κ·Έ μ΄λ€ νμΌμ΄λ ν΄λλ μ»΄νμΌλμ§ μλλ‘ νλ€. νμ§λ§ include
μ€μ μ νλ©΄ μ»΄νμΌνκ³ μ νλ 'λͺ¨λ ' νλͺ©μ ν¬ν¨μμΌμΌ νλ€. include
μ€μ μ νμ λ ν¬ν¨λμ§ μλ νμΌμ μ»΄νμΌ λμ§ μκΈ° λλ¬Έμ μ£Όμν΄μ μ¬μ©ν΄μΌλ§ νλ€. "files": [
"app.ts"
]
files
μ€μ μ include
μ λ€μ λΉμ·νμ§λ§ include
λ μ μΈνκ³ μ νλ νλͺ©μΌλ‘ μ 체 ν΄λλ₯Ό μ§μ ν μ μμ§λ§, files
μ€μ μ μ»΄νμΌ νκ³ μ νλ 'κ°λ° νμΌ'λ§μ μ§μ ν μ μλ€. ν΄λΉ μ΅μ
μ κ·λͺ¨κ° μμ νλ‘μ νΈμ μ¬μ©νλ©΄ μ’μ κ²μ΄λ€.tsconfig.json
νμΌμ 첫 λ²μ§Έ μ΅μ
μΈ compilerOptions
λ₯Ό μ΄ν΄λ³΄λ©΄, ν₯λ―Έλ‘μ΄ μ§μ μ΄ λ§λ€. compilerOptions
μ νμ
μ€ν¬λ¦½νΈ μ½λκ° μ»΄νμΌλλ λ°©μμ κ΄λ¦¬νλ μ΅μ
μ΄λ€. compilerOptions
μμλ μ΄λ€ νμΌμ μ»΄νμΌν μ§, κ·Έλ¦¬κ³ μ»΄νμΌλλ νμΌμ΄ νμ
μ€ν¬λ¦½νΈλ‘ μ΄λ»κ² μ²λ¦¬λμ΄μΌ νλμ§λ₯Ό μ€μ ν μ μλ€. μ΄ν΄λ³΄λ©΄, κΈ°λ³Έμ μΌλ‘ μ€μ λ μ΅μ
(μ£Όμ μ²λ¦¬λ)λ€μ΄ λ§μ κ±Έ μ μ μλ€. κ°κ°μ μ΅μ
μλ μ£Όμμ²λ¦¬μ ν¨κ» κ°λ¨ν μ€λͺ
μ΄ μλλ°, λλΆλΆμ μ΅μ
λ€μ μ€λ¬΄ νλ‘μ νΈμμ κ·Έλ€μ§ μ€μνμ§ μμ κ°λ₯μ±μ΄ λμΌλ―λ‘ λͺ¨λ μ΅μ
μ μ€μ νκ±°λ κ³ λ €ν νμλ μλ€.{
"compilerOptions": {
/* Basic Options */
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
"module": "commonjs"
}
}
target
μ΅μ
μ compilerOptions
μ κΈ°λ³Έμ μΌλ‘ μ€μ λμ΄ μλ€. μ΄ μ΅μ
μΌλ‘λ μ΄λ€ μλ°μ€ν¬λ¦½νΈ 'λ²μ 'μ λμμΌλ‘ μ½λλ₯Ό μ»΄νμΌν κ²μΈμ§ νμ
μ€ν¬λ¦½νΈμκ² μλ €μ€ μ μλ€. νμ
μ€ν¬λ¦½νΈλ μλ°μ€ν¬λ¦½νΈ μ½λμ μ‘΄μ¬νμ§ μλ νμ
μ£Όμκ³Ό κ°μ μλ‘μ΄ κΈ°λ₯λ§ μ»΄νμΌνλ κ²μ΄ μλκΈ° λλ¬Έμ΄λ€. λ°λΌμ μ΄ μ΅μ
μ νΉμ λΈλΌμ°μ μμ μ€νλλ μλ°μ€ν¬λ¦½νΈλ‘ μ½λλ₯Ό μ»΄νμΌνλ€. target
μ μ€μ νλ©΄, μ΄λ€ λΈλΌμ°μ κ° λμ»΄νμΌλ μ½λλ₯Ό μ§μνλμ§ μ μν κ²μ΄λ€. ν΄λΉ νλ‘μ νΈμ target
μ κΈ°λ³Έ κ°μ es5
μΈλ°, μ΄λ λͺ¨λ μ νμ μ½λκ° μ»΄νμΌλμλ€λ μλ―Έλ€. tsc
λͺ
λ Ήμ΄λ₯Ό μ€ννμ¬ λͺ¨λ νμΌμ μ»΄νμΌν΄λ³΄μ.app.ts
let age: number;
age = 30;
const userName = "Maximilian";
console.log(userName);
app.js
"use strict";
var age;
age = 30;
var userName = "Maximilian";
console.log(userName);
app.ts
λ letκ³Ό constλ₯Ό μ¬μ©νκ³ μλλ°, app.js
λ varλ₯Ό μ΄μ©νκ³ μλ κ±Έ μ μ μλ€. μ΄λ target
μ΅μ
μ κΈ°λ³Έ κ°μ es5
μ΄κ³ , es5
μλ letκ³Ό constκ° ν¬ν¨λμ΄ μμ§ μκΈ° λλ¬Έμ μΌμ΄λ μΌμ΄λ€. μ¬κΈ°μ μ μ μλ μ’μ μ μ νμ
μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μ΄μ λΈλΌμ°μ μμλ μλνλ μ½λλ₯Ό μμ±ν μ μλ€λ μ μ΄λ€.λ¬Όλ‘ target
μ΅μ
μ μ¬μ©νλ κ²μ μ μ μΌλ‘ μ νμ λ¬λ €μλ€. κ·Έλ¦¬κ³ νμ
μ€ν¬λ¦½νΈλ‘ κ΅³μ΄ μ΄λ° μμ
μ μννμ§ μμλ λλ€. μλ°μ€ν¬λ¦½νΈ λ³νμ μ§μνλ λ€λ₯Έ λΉλ λꡬλ€λ μΆ©λΆν λ§κΈ° λλ¬Έμ΄λ€. νΉμ μ΄ν리μΌμ΄μ
μ΄ μ΅μ λΈλΌμ°μ μμλ§ μ€νλμ΄μΌ νκΈ° λλ¬Έμ μ΅μ λΈλΌμ°μ μμλ§ μλνλ μ½λλ‘ κ΅¬μ±ν΄μΌ νλ κ²½μ°λ μμ λλΌλ©΄ κ΅³μ΄ target
μ΅μ
μ μ΄λ κ² μ¬μ©ν νμλ μμ κ²μ΄λ€.
λΉμ°ν, target
μ΅μ
μμ κΈ°λ³Έ κ°μΌλ‘ μ ννλ μλ°μ€ν¬λ¦½νΈ λ²μ μ΄ μ΅μ μΌ μλ‘ μμ±λλ μ½λλ λ κ°κ²°ν΄μ§λ©°, μ΄λ νμ
μ€ν¬λ¦½νΈκ° μ μ°¨ λ μ μ μμ μ½λλ₯Ό μ»΄νμΌνλ©° μ‘΄μ¬νμ§ μλ κΈ°λ₯μ λν΄ μμ
μ ν΄μΌνλ κ²½μ°κ° μ€μ΄λ€κΈ° λλ¬ΈμΌ κ²μ΄λ€. λ°λΌμ μ»΄νμΌλ μ½λλ target
μ΅μ
κ°μ΄ μ΅μ λ²μ μΌ μλ‘ λ κ°κ²°νκ³ μ§§μμ§λ€.
π¨ ν΄λΉ ν¬μ€ν μ Udemyμ Typescript :κΈ°μ΄λΆν° μ€μ ν νλ‘μ νΈκΉμ§ with React + NodeJS κ°μλ₯Ό λ² μ΄μ€λ‘ ν κΈ°λ‘μ λλ€.
βπ» κ°μ git repo λ°λ‘κ°κΈ°