programming study/TypeScript (28) 썸네일형 리스트형 TypeScript(1) 본 내용은 Nomad Coders - TypeScript로 블록체인 만들기 강의를 토대로 작성하였습니다. 1. 타입 안정성 JavaScript는 런타임 에러를 방지해주지 않음 유저가 마주칠 수 있음 전혀 다른 타입끼리의 연산, 존재하지 않는 메서드의 호출, 함수 매개변수의 잘못된 전달 등을 감지하지 않음 TypeScript는 타입 안정성을 부여하여 런타임 에러를 최소화 시킬 수 있음 2. TypeScript 강타입의 프로그래밍 언어 JavaScript의 Super Set TypeScript는 JavaScript로 변환 브라우저가 JavaScript 만을 이해하기 때문 Node는 TypeScript, JavaScript 둘 다 이해 TypeScript에 에러가 발생(또는 감지)하면, JavaScript로 .. 이펙티브 타입스크립트(1) 본 내용은 댄 밴더캄, 『이펙티브 타입스크립트』, 장원호 옮김, 프로그래밍인사이트를 토대로 작성하였습니다. 1. 타입스크립트는 자바스크립트의 상위 집합 자바스크립트의 문법은 타입스크립트에 포함이 됨 타입스크립트만의 독자적인 문법이 있음(타입 체크 문법) 일부 자바스크립트만 타입 체크를 통과 호환성이 높아, 자바스크립트에서 타입스크립트의 마이그레이션에 엄청난 이점이 됨 단, 타입스크립트 설정을 느슨하게 시작해야 함(strct를 false) 타입스크립트 컴파일러는 자바스크립트를 포함하여 유용 타입추론으로 런타임 오류 방지 단, 타입스크립트가 모든 오류를 찾아낼 수는 없음 2. 타입스크립트 설정 타입스크립트 컴파일러에는 다양한 설정을 적용할 수 있음 nolmplicitAny, strictNullChecks는 .. 실전으로 배우는 타입스크립트 - 엄격한 타입 적용 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. strict 옵션 tsconfig의 옵션 코드에서 더 강하게 타입을 정의하도록 동작을 점검 추후 타입 정의에 대한 오류를 방지 애플리케이션 안전한 코딩을 위해 키는 것을 권장 true일 경우 아래의 옵션들도 활성화 alwaysStrict strictNullChecks strictBindCallApply strictFunctionTypes strictPropertyInitialization noImplicitAny noImplicitThis useUnknownInCatchVariables tsconfig.json 프로젝트의 타입스크립트 설정에 strict 활성화 { "compilerOptions": { .. 실전으로 배우는 타입스크립트 - API 함수 타입 정의 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. API 함수 타입 정의 Axios는 라이브러리 내부의 index.d.ts에 정의된 AxiosResponse 타입을 Promise로 반환한다. 제네릭을 사용하여 아래와 같이 타입 지정한다. // app.ts // CovidSummaryResponse는 해당 api가 응답하는 데이터의 타입 function fetchCovidSummary(): Promise { const url = 'https://api.covid19api.com/summary'; return axios.get(url); } 2. 타입 모듈화 API 함수 타입을 정의할 때 타입 코드가 너무 길어지면 가독성, 유지보수 측면에서 좋지 않음 도.. 실전으로 배우는 타입스크립트 - 외부 라이브러리 모듈화 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 라이브러리 로딩 방식 cdn에서 라이브러리를 불러오는 경우 자바스크립트 모듈로 인식할 수 있도록 모듈화를 해야 함 npm으로 설치 ... JavaScript Module NPM으로 설치된 패키지를 불러오거나 export된 함수, 변수를 가져올 수 있음 // 라이브러리 로딩 import 변수명 from '라이브러리 이름'; // 변수, 함수 임포트 문법 import {} from '파일 상대 경로'; 2. 라이브러리 타입 에러 라이브러리 내부에 타입 정의가 되어있어 별도 타입 정의를 하지 않아도 되는 라이브러리가 있는 반면 별도의 타입 정의가 필요한 라이브러리가 있음 index.d.ts 외부 라이브러리를.. 실전으로 배우는 타입스크립트 - 프로젝트 환경 구성 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 타입스크립트 개발 환경 관련 라이브러리 설치 타입스크립트 및 문법 검사, 코드 정리 도구 라이브러리 설치 devDEpendencies로 설치 npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier 2. ESLint ESLint 소개 JavaScript 코드에서 문제를 찾아 고침 런타임 에러를 코드레벨에서 미연에 방지 코드 문법 보조 도구 코드 자동완성,.. 실전으로 배우는 타입스크립트 - 점진적인 타입 적용 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 자바스크립트 프로젝트에 타입스크립트를 적용하는 순서 타입스크립트 프로젝트 환경 구성 NPM을 초기화하여 package.json 파일 생성 프로젝트 폴더에서 npm i typescript -D를 입력하여 라이브러리 설치 타입스크립트 설정 파일 tsconfig.json을 생성하고 기본 값 추가 서비스 코드가 포함된 자바스크립트 파일을 타입스크립트로 변환 tsc 명령어로 타입스크립트 파일을 자바스크립트로 변환 { "compilerOptions": { "allowJs": true, "target": "ES5", "outDir": "./dist", "moduleResolution": "Node", "lib": .. 실전으로 배우는 타입스크립트 - 타입 시스템 적용 본 내용은 인프런 장기효(캡틴판교)님의 실전으로 배우는 타입스크립트 강의를 토대로 작성하였습니다. 1. 기존 자바스크립트 코드에 타입스크립트 적용시 주의할 점 기능적인 변경은 절대 하지 않을 것 타입을 입히는 것을 우선으로 할 것 테스트 커버리지가 낮을 땐 함부로 타입스크립트를 적용하지 않을 것 처음부터 타입을 엄격하게 적용하지 않을 것 점진적으로 strict 레벨을 증가 any타입으로 루즈하게 시작 2. 타입스크립트 기본 환경 구성 NPM 초기화 타입스크립트 라이브러리 설치 타입스크립트 설정 파일 생성 및 기본 값 추가 3. 점진적인 타입 시스템 적용 - JSDoc 코드 상단에 @ts-check 를 주석 추가하면 TypsScript Language Server가 실행 JavaScript임에도 불구하고 .. 이전 1 2 3 4 다음