TypeScript๋ฅผ ๊ณต๋ถํ๊ธฐ ์ ์ ๋จผ์ ํ ๊ฐ์ง ์ง๋ฌธ์ ๋์ ธ๋ณผ ํ์๊ฐ ์๋ค.
JavaScript๋ก๋ ์ ๋์ํ๋๋ฐ ์ ๊ตณ์ด TypeScript๋ฅผ ์ฌ์ฉํด์ผ ํ ๊น?
์ด ๊ธ์์๋ ๋ณธ๊ฒฉ์ ์ผ๋ก TypeScript ๋ฌธ๋ฒ์ ๋ค๋ฃจ๊ธฐ ์ ์ TypeScript๊ฐ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ์ด๋ค ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋ฑ์ฅํ๋์ง๋ฅผ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
TypeScript๋ฅผ ๋จ์ํ ๋ฌธ๋ฒ์ด ์๋, ๋ฌด์์ ์ํ ๋๊ตฌ์ธ์ง ์ดํดํ๋ ๊ฒ์ด ๋ชฉํ์ด๋ค.
TypeScript๋ JavaScript์ ํ์
(Type) ์์คํ
์ ์ถ๊ฐํ ์ธ์ด์ด๋ค. JavaScript์ ์์ ์งํฉ(Superset)์ด๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด JavaScript ๋ฌธ๋ฒ์ ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์๋ค.
TypeScript์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ ์ ์ ํ์
๊ฒ์ฌ(Static Type Checking)๋ฅผ ์ ๊ณตํ๋ค๋ ์ ์ด๋ค. ์ด๋ฅผ ํตํด ์ปดํ์ผ ์์ ์ ์ค๋ฅ๋ฅผ ๋ฏธ๋ฆฌ ๋ฐ๊ฒฌํ ์ ์๋ค.
์ฌ๊ธฐ์ ์ค์ํ ์ฌ์ค์ด ์๋๋ฐ TypeScript ์ฝ๋๋ ๊ฒฐ๊ตญ JavaScript๋ก ์ปดํ์ผ๋์ด ์คํ๋๋ค๋ ์ ์ด๋ค. Node.js๋ ๋ธ๋ผ์ฐ์ ๋ TypeScript๋ฅผ ์ง์ ์คํํ์ง ์๋๋ค. ๋ฐ๋ผ์ TypeScript๋ ์คํ ํ๊ฒฝ์ด ์๋๋ผ ๊ฐ๋ฐ ๊ณผ์ ์์ ์์ ์ฑ์ ๋์ด๊ธฐ ์ํ ๋๊ตฌ์ ๊ฐ๊น๋ค.
JavaScript์ ๋ํ์ ์ธ ํน์ง์ ๋ค์๊ณผ ๊ฐ๋ค.
function add(a, b) {
return a + b;
}
add(1, "2"); // ๋ฌธ์์ด ์ฐ์ฐ "12"
์ ์ฝ๋๋ ์๋ฌ ์์ด ์คํ๋์ง๋ง ๊ฐ๋ฐ์๊ฐ ์๋ํ ๊ฒฐ๊ณผ๊ฐ ์๋ ๊ฐ๋ฅ์ฑ์ด ๋๋ค.
TypeScript์ ์ ๊ทผ ๋ฐฉ์
function add(a: number, b: number): number {
return a + b;
}
add(1, "2"); // ์ปดํ์ผ ์๋ฌ ๋ฐ์
TypeScript๋ฅผ ์ฌ์ฉํ๋ฉด ์คํ ์ ์ ์ด๋ฏธ ํ์
์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ ์ ์๋ค.
*ํต์ฌ ์ฐจ์ด ์ ๋ฆฌ
JavaScript๋ ํ์
๊ฒ์ฌ๊ฐ ๋ฐํ์์ ์ด๋ฃจ์ด์ง๋ ๋ฐ๋ฉด TypeScript๋ ์ปดํ์ผ ์์ ์ ํ์
์ ๊ฒ์ฌํ๋ค. ์ด ์ฐจ์ด๋ก ์ธํด TypeScript๋ ์๋์ ์ผ๋ก ๋์ ์์ ์ฑ์ ์ ๊ณตํ๊ณ , ์ฝ๋ ๊ตฌ์กฐ๋ฅผ ๋ช
ํํ๊ฒ ์ ์งํ ์ ์์ผ๋ฉฐ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํนํ ๊ฐ์ ์ ๊ฐ์ง๋ค.
1. ์ค์๋ฅผ ๋น ๋ฅด๊ฒ ๋ฐ๊ฒฌํ ์ ์๋ค
JavaScript์์๋ ์๋ฌ๊ฐ ๋๋ถ๋ถ ์คํ ์์ (๋ฐํ์)์ ๋๋ฌ๋๋ค. ๋ฐ๋ฉด TypeScript๋ ์์์ ํ์ธํ๋ฏ์ด ์ปดํ์ผ ์์ , ์ฆ ์ฝ๋๋ฅผ ์์ฑํ๊ฑฐ๋ ํ์ผ์ ์ ์ฅํ๋ ์๊ฐ ํน์ CI ๋น๋ ๋จ๊ณ์์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ ์ ์๊ฒ ํด์ฃผ์ด ๋ฐฐํฌ ์ ์ ์ค๋ฅ๋ฅผ ์ฐจ๋จํ ์ ์๋ค.
2. ์ฝ๋์ ๊ฐ๋
์ฑ์ด ์ข์์ง๋ค
JavaScript์ ๊ฒฝ์ฐ ์ฝ๋๊ฐ ์ปค์ง์๋ก ํจ์์ ์
๋ ฅ๊ฐ์ด๋ ๋ฐํ๊ฐ์ด ๋ฌด์์ธ์ง ํ์
ํ๊ธฐ ์ด๋ ค์์ง๋ค.
function process(data) {
// data๊ฐ ๋ฌด์์ธ์ง ์๊ธฐ ์ด๋ ต๋ค
}
๋ฐ๋ฉด TypeScript์์๋ ํ์ ์ ๋ช ์ํจ์ผ๋ก์จ ์ฝ๋ ์์ฒด๊ฐ ๋ฌธ์ ์ญํ ์ ํ๊ฒ ๋๋ค.
function process(data: UserResponse): void {
// data๋ UserResponse ํ์
}
3. ํ์
์ ์๋ฌต์ ์ธ ๊ท์น์ ์ฝ๋๋ก ๊ฐ์ ํ ์ ์๋ค
์ด๋ค ๊ฐ์ด null์ด ๋ ์ ์๋์ง, ์ด๋ค ํ๋๋ ๋ฐ๋์ ์กด์ฌํด์ผ ํ๋์ง, ์ด๋ค ํํ์ ๊ฐ์ฒด๊ฐ ์ค๊ฐ๋์ง ๋ฑ TypeScript๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๋ฐ ๊ตฌ๋ ์ฝ์์ ํ์
์ผ๋ก ๊ฐ์ ํ ์ ์๋ค.
์ด๋ ํ์
๊ณผ์ ์์ ๋ฐ์ํ๋ ์คํด์ ๋ฒ๊ทธ๋ฅผ ํฌ๊ฒ ์ค์ฌ์ค๋ค.
*TypeScript๋ ๋ฐํ์ ์์ ์ ๋ฐ์ดํฐ ๊ฒ์ฆ์ ์ํํ์ง ์๋๋ค.
์๋ฅผ ๋ค์ด API ์๋ฒ๊ฐ ์๋ชป๋ ๋ฐ์ดํฐ๋ฅผ ๋ด๋ ค์ฃผ๋ ๊ฒฝ์ฐ, ์ธ๋ถ ์
๋ ฅ ๊ฐ์ด ์์๊ณผ ๋ค๋ฅธ ๊ฒฝ์ฐ ๋ฑ ์ด๋ฐ ๋ฌธ์ ๋ TypeScript๋ง์ผ๋ก๋ ํด๊ฒฐํ ์ ์๋ค.
TypeScript๋ ์ฝ๋์ ํํ๋ฅผ ๋ณด์ฅํ ๋ฟ ์ค์ ๋ฐ์ดํฐ์ ์ง์ค์ฑ์ ๋ณด์ฅํ์ง ์๋๋ค. ๊ทธ๋์ ์ค๋ฌด์์๋ ์ข
์ข
zod, joi, yup ๊ฐ์ ๋ฐํ์ ๊ฒ์ฆ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ค.
TypeScript๋ JavaScript๋ฅผ ๋์ฒดํ๊ธฐ ์ํ ์ธ์ด๋ผ๊ธฐ๋ณด๋ค JavaScript๋ฅผ ๋ ์์ ํ๊ณ ์์ธก ๊ฐ๋ฅํ๊ฒ ์ฌ์ฉํ๊ธฐ ์ํ ๋๊ตฌ์ด๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ TypeScript๋ฅผ ๊ณต๋ถํ๋ค๋ ๊ฒ์ ์๋ก์ด ์ธ์ด๋ฅผ ๋ฐฐ์ฐ๋ ๊ฒ์ด ์๋๋ผ JavaScript๋ฅผ ๋ ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋ ๊ณผ์ ์ ๊ฐ๊น๋ค.
