TypeScript 강좌 8. 변수 Union Type과 범위 숫자 또는 문자열로 지정 가능한 변수// 태어난 연도를 숫자 또는 문자열로 설정 let birthYear: number | string; // 정상 birthYear = 1980; // 이것도 정상 birthYear = '천구백팔십'; // 대답하기 싫어서 null을 넣으면 에러 birthYear = null; // error TS2322: Type 'null' is not assignable to type 'string | number'. Union Type다음 타입스크립트 코드는 변수에 들어가는 값을 특정 문자열들로 제한하는 기능입니다. "|"으로 대입 가능한 여러 값을 열거합니다. 이렇게 복수 형태로 취하는 것을 Union Type 형태라고 합니다. 미리 정의되지 않은 문자열을 대입하면 오류입니다... 2020. 1. 15. TypeScript 강좌 7. 변수 선언 및 3가지 사용 방법 변수TypeScript와 JavaScript의 가장 큰 차이점은 형태(자료형)입니다. 타입스크립트 자료형이 등장하는 경우는 크게 세 가지입니다. 변수 (속성 포함)함수 인수함수 반환 값 이 글에서는 먼저 변수를 살펴보고 TypeScript의 타입 시스템 일부를 소개합니다. 함수는 함수의 장에서 설명합니다. 타입 시스템 세부 내용은 다른 장에서 각각 설명합니다. 세 가지 선언 구문변수 선언에는 const, let이 있습니다. 항상 const 사용을 먼저 고려하세요. 타입스크립트 변수는 일단 const로 선언하고 재할당이 필요한 곳만 let으로 변경합니다. 변경될 필요가 없다면 "이제 변하지 않겠어"라고 선언함으로써 코드 복잡성을 줄이고 가독성을 높입니다. 또한, const는 많은 C/C++ 경험자를 괴롭힌.. 2020. 1. 12. TypeScript 강좌 6. 프로젝트 환경과 명령어 실행 프로젝트 폴더 공유 후 환경 구축 팀 내부에선 git 등으로 TypeScript 프로젝트 소스 코드를 공유합니다. JavaScript 계열 프로젝트는 그 안에 package.json, package-lock.json이 있습니다. 타입스크립트 프로젝트 배포 시 환경 구축을 하는 등 공유한 사람은 개발 환경을 손쉽게 재현할 수 있습니다. npm install dependencies와 devDependencies를 설치 npm install --prod dependencies만 설치 npm ci dependencies와 devDependencies를 설치 package-lock.json은 갱신하지 않음 npm ci --prod dependencies만 설치 package-lock.json은 갱신하지 않음 설치.. 2020. 1. 8. TypeScript 강좌 5. Node.js 환경 체험하기 Node.js 생태계를 체험하자 TypeScript는 JavaScript로의 변환을 목적으로 만들어진 언어입니다. 공식적인 처리 루틴이 있고, 변환하면 JavaScript가 생성됩니다. 공부 목적으로 실행하려면 현재 몇 가지 옵션이 있습니다. 이 가운데 우선 안정적으로 사용할 수 있고, 비교적 간단한 것은 ts-node 입니다. 타입스크립트 웹 사이트 playground 1 : 공식 컴파일러로 변환하여 브라우저에서 실행tsc + Node.js : 공식 컴파일러로 변환하고 Node.js에서 실행babel + ts-loader + Node.js : Babel 통해 공식 컴파일러로 변환하고 Node.js에서 실행babel + @ babel / preset-typescript + Node.js : Babel에서.. 2019. 12. 17. TypeScript 강좌 4. 호환성 tsconfig.json TypeScript와 호환성인터넷에서 모든 사용자가 볼 수 있는 사이트를 만든다고 했을 때, 현재, 기능적인 하한선은 Internet Explorer 11 4입니다 (그러나, 우리나란 IE6까지 호환하는 걸 원하는 막장 상황). Google 검색 엔진 로봇도 이와 거의 똑같은 기능(const, let이 있는 클래스 제외)인 Chrome 41로 고정되어 있습니다. 그렇지만, 버전업이 더이상 지원되지 않는 iOS 및 Android 스마트폰의 경우엔 최신 기능이 작동하지 않을 수 있습니다. 브라우저 이외에, Google Apps Script가 ECMAScript3에만 대응하고 있습니다. 브라우저 호환성 100%를 만들고 유지한다는 것은 개발 자원이 아무리 많아도 불가능합니다. 그래서 공수와 현실적인 부분을 고.. 2019. 11. 11. TypeScript 강의 3. 자바스크립트 버전과 ECMAScript JavaScript 버전최근 JavaScript 사양은 커뮤니티에서 논의되고 있습니다. TC39라는 ECMA 내부의 Technical Committee가 바로 그곳입니다. 클래스 등 대폭적인 기능 추가가 이루어진 ES6는 정식 릴리즈 때 ECMAScript 2015라는 정식 명칭이 부여됐으며, 이후로는 릴리즈 연도를 버전 이름으로 사용하고 있습니다. 논의 결과와 현재 올라있는 제안들은 모두 GitHub에서 볼 수 있습니다. https://github.com/tc39/proposals 기능 단위로 제안이 이루어집니다. 처음에는 stage 0에서 시작하여 stage 1, stage 2으로 분기됩니다. 처음에는 아이디어로 시작하여 서서히 제대로 된 사양과 데모, 참고 구현 등 잘 동작한다는 결과(검증)를 요구.. 2019. 11. 10. TypeScript 강의 2. 웹 개발 위상과 도입해야할 이유 TypeScript 웹 개발 분야에서의 위상 프론트엔드 개발이 다양해지고 있는 동시에 개발의 동향 또한 다양해졌습니다. 일례로, 브라우저에서 동작하는 JavaScript를 직접적으로 쓰지 않게 되었다는 것입니다. JavaScript는 2015년 이전에는 보수적인 업데이트가 이루어졌었습니다. Netscape사(현 Mozilla)가 개발하여 기업 간 컨소시엄을 통해 사양이 책정되고 있었죠. 클래스를 도입하는 대규모 업데이트를 일단 목표로 했지만(ECMAScript 4), 당시엔 완성되지 못했습니다. 그러나 ECMAScript 2015 시점에서 대폭적인 업데이트가 더해져 더 개방적인 커뮤니티인 TC39에서 논의하게 되었습니다. 그러나 브라우저의 기본 언어인, 서버 어플리케이션(응용 프로그램) Java 또는 P.. 2019. 11. 7. TypeScript 강의 1. 프론트엔드 개발자와 TS 직장에서 바로 사용할 수 있는 TypeScript : 서문 - 본 문서의 위치 서문본 문서의 위치이 문서는 아직 미완성입니다. 웹 프론트엔드 개발을 배울 때 JavaScript를 거치지 않고 처음부터 TypeScript(타입스크립트)를 배운다는 시점에서 작성되었습니다. TypeScript는 기본적으로 JavaScript의 상위 호환이며, JavaScript는 오랜 역사만큼이나 안정적인 문법 또한 많습니다. 따라서 TS 문법을 배운다는 뜻에는 최신 웹 소스 코드 작성 기법을 배운다는 측면 또한 강합니다. 현재 B2B 기업, B2C가 아닌 기업들도 웹 프론트엔드 개발자가 부족하다고 말합니다. 이전에는 기업 시스템의 프론트엔드 개발자 업무라면 DB 테이블이 있고, 각 행의 CRUD(Create : 생성, Re.. 2019. 11. 3. 이전 1 다음
