๐ FrontEnd/TypeScript
-
TypeScript ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ์ด -2๐ FrontEnd/TypeScript 2022. 11. 8. 20:33
์์ํ๋ฉด์ ํ์ ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด๋ฅผ ๊ณต๋ถํฉ๋๋ค. ํด๋์ค ์ ์ ํด๋์ค๋ implements ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ํด๋์ค๋ ๊ฐ์ฒด์ ๋น์ทํด๋ณด์ด์ง๋ง, ์์์ ํ ์ ์์ต๋๋ค. // TS interface Car{ color:string; wheels:number; start():void; } // ์์ฑ์(constructor) ๊น์ง๋ control ํ ์ ์๋ค class Bmw implements Car{ // ':' ๋ง๊ณ implements ๋ฅผ ์ฌ์ฉํด์ผํ๋ค color; // TS ์์ ์๋ตํ๊ฒ ๋๋ฉด BMW ์์ color๋ฅผ ์ฐพ์ง ๋ชปํ๋ค. ๋ณ์๋ฅผ ๊ผญ ๋ง๋ค์ด ์ฃผ์ด์ผํ๋ค. wheels=4; // TS ์์ ์๋ตํ๊ฒ ๋๋ฉด wheels๋ฅผ ์ฐพ์ง ๋ชปํ๋ค. BMW class ์ Wheels ๋ณ์๋ฅผ ๋ง๋ค์ด ์ฃผ์ด์ผํ๋ค. construc..
-
TypeScript ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ์ด -1๐ FrontEnd/TypeScript 2022. 11. 8. 20:08
์์ํ๋ฉด์ ํ์ ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด๋ฅผ ๊ณต๋ถํฉ๋๋ค. TypeScript ๋? 2012๋ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ๋ฐํํ ํ์ ์คํฌ๋ฆฝํธ(TypeScript)๋ ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ์ ํ์ ๋ฌธ๋ฒ์ ์ถ๊ฐํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ๋๋ค. ์ปดํ์ผ ์ธ์ด, ์ ์ ํ์ ์ธ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋์ ํ์์ ์ธํฐํ๋ฆฌํฐ ์ธ์ด๋ก ๋ฐํ์์์ ์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ ์ ์์ต๋๋ค. ์ด์ ๋ฐํด ํ์ ์คํฌ๋ฆฝํธ๋ ์ ์ ํ์ ์ ์ปดํ์ผ ์ธ์ด์ด๋ฉฐ ํ์ ์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ ๋๋ ๋ฐ๋ฒจ(Babel)์ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ก ๋ณํ๋ฉ๋๋ค. ์ฝ๋ ์์ฑ ๋จ๊ณ์์ ํ์ ์ ์ฒดํฌํด ์ค๋ฅ๋ฅผ ํ์ธํ ์ ์๊ณ ๋ฏธ๋ฆฌ ํ์ ์ ๊ฒฐ์ ํ๊ธฐ ๋๋ฌธ์ ์คํ ์๋๊ฐ ๋งค์ฐ ๋น ๋ฅด๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. ํ์ง๋ง ์ฝ๋ ์์ฑ ์ ๋งค๋ฒ ํ์ ์ ๊ฒฐ์ ํด์ผ ํ๊ธฐ ๋๋ฌธ์ ๋ฒ๊ฑฐ๋กญ๊ณ ์ฝ๋๋์ด ์ฆ๊ฐํ๋ฉฐ ์ปดํ์ผ ์๊ฐ์ด ..
-
TypeScript ํ์ ์คํฌ๋ฆฝํธ ์ค์น ๋ฐ ์ฌ์ฉ (VScode ์์)๐ FrontEnd/TypeScript 2022. 11. 8. 18:21
์์ํ๋ฉด์ ํ์ ์คํฌ๋ฆฝํธ ์ค์น ํฌ์คํ ์ ๋๋ค. ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ค์นํ๊ธฐ ์ํด์ 2๊ฐ์ง๊ฐ ๋จผ์ ์ ํ๋์ด์ผ ํฉ๋๋ค. VScode node.js ์ด ๊ธ์ ์ ๋๊ฐ์ง์ ์ค์น ๋ฐ ์ธํ ์ด ๋๋ฌ๋ค๋ ๊ฐ์ ํ์ ์์ฑ๋์์ต๋๋ค. TypeScript ํ์ ์คํฌ๋ฆฝํธ ์ค์น 1. VScode ํฐ๋ฏธ๋ ์ฐฝ์ ๋ค์๊ณผ ๊ฐ์ด ์ ๋ ฅํด์ค๋๋ค. npm install -g typescript 2. TypeScript ํ์ผ์ ํ๋ ๋ง๋ค์ด์ค๋๋ค. (ex.ts) 3. ํฐ๋ฏธ๋ ์ฐฝ์ ๋ค์๊ณผ ๊ฐ์ด ์ ๋ ฅํ์ฌ ๋์ผํ ๊ฒฝ๋ก์ tsconfig.json ํ์ผ์ ์์ฑํด์ค๋๋ค. tsc --init 4. ํฐ๋ฏธ๋์ ๋ค์ ๋ ์ค์ ํ๋๋ฅผ ์์ฑํ์ฌ ts ์ฝ๋๋ฅผ js๋ก ๋ณ๊ฒฝํด์ค๋๋ค. tsc ex.ts -> (tsํ์ผ ์์ ์ ๋ง๋ค ๋ค์ ์ ๋ ฅํ์ฌ ์ปดํ์ผ ํด์ผํ๋ค) tsc -w -> ..