천천히 차근차근

// 인터페이스 확장 interface Person { name: string; age: number; } interface Developer extends Person { language: string; } let captain: Developer = { name: '캡틴', age: 30, language: 'Ko' }

// 인덱싱 interface StringArray { [index: number]: string; } let arr: StringArray = [ 'a', 'b', 'c']; arr[0] = 'D'; console.log(arr); interface로 배열의 데이터도 정의할 수 있다. index를 숫자로 받고, 배열의 값을 string으로 정의해서 사용할 수 있다.

// 연습 interface ConsoleFunction { (a: string, b: number): string } let test:ConsoleFunction = function(a: string, b: number ): string { return '제 이름은 ' + a + '이고, 나이는 ' + b + ' 입니다.'; } let test1:string = test('해리', 30); console.log(test1);

interface User { age: number; name: string; } // seho라는 변수는 User interface라는 타입으로 정의가 된다. let seho: User = { age: 30, name: '세호' } console.log(seho);객체를 생성할 때, 매번 타입으로 age, name을 명시해줄 필요없이 정의해둔 interface를 타입으로 활용하여 중복을 줄일 수 있다. // 인터페이스 : 상호간의 약속 interface User { age: number; name: string; } // seho라는 변수는 User interface라는 타입으로 정의가 된다. // 변수에 인터페이스 활용 let seho: User = { age: 30, name: &#3..

function fetchTodoItems(): { id: number; title: string; done: boolean }[] { const todos = [ { id: 1, title: '안녕', done: false }, { id: 2, title: '타입', done: false }, { id: 3, title: '스크립트', done: false }, ]; return todos; } 자바스크립트 코드를 타입스크립트로 변환하면서 위의 객체 배열 타입을 의미하는 객체의 속성을 모두 명시해주는 중복 코드가 발생하게 된다. 해결 방법 2가지 Type 별칭 부여 interface 사용 Type 별칭 부여 type Todo = { id: number; tit..

1번 function showCompleted(): object[] { return todoItems.filter(function (item) { if (item.done) { return item; } }); }2번 function showCompleted(): object[] { return todoItems.filter(item => item.done); } 같은 결과값을 return한다.

https://nodejs.org/ko/download/ node 설치 typescript 설치 npm i typescript -g ts 파일 콘솔 출력하는 방법 npm i ts-node -g ts파일을 js파일로 컴파일하는 방법 tsc 파일명 tsconfig.json 파일 생성 tsc --init js파일로 compile이 제대로 되지 않을 때 관리자 권한으로 visual studio code를 실행하여 터미널에서 위의 명령어를 입력한다. Set-ExecutionPolicy RemoteSigned 관리자 권한으로 실행하기 위한 Get-ExecutionPolicy 확인하기 위한 명령어

Arrow Function 표현식의 결과값을 반환하는 표현식 본문에 쓰인다. 상태 블럭 본문에 쓰인다. map의 두번째 인자로는 index를 파라미터로 받는다. //arrow function let arr = [1, 2, 3, 4, 5]; // map : for문 같은 loop, 자바스크립트에서 지원하는 배열 객체 내장 함수. // input이 파라미터로 전달되는 함수이고, outPut이 새로운 배열이다. let twice = arr.map(v=>v*2); /* 위와 같은 표현식 let twice = arr.map(function(val) { return val * 2; }); */ console.log(twice); // 상태블록 본문에 쓰인 예제 let arr2 = [1, 2, 3, 4, 5, 6];..

첫 번째 실습 프로젝트 소개, 환경 구성, 코드 분석 package.json에 설정한 타입스트립트, 바벨 관련 내용을 설치한다. npm i 위의 명령어를 입력하면 package.json에 정의한 설정들이 node_modules 폴더에 생성된다. npm i 명령어를 실행하고 node_modules가 보여지지 않는다면 새로고침을 해보도록 한다. VSCode 설정 (첫번째, 두번째를 모두 설정하기) 첫번째 window : ctrl + ',' format on save 검색 꺼져있는지 확인한다. 모두다 타입스크립트의 문법검사는 eslint를 사용할 것이기 때문에 포맷팅 관련한 프리티어나 뷰티파이 같은 것들을 꺼주어야 한다. 그래서 체크가 풀려 있는지 확인한다. 두번째 ESLint 플러그인이 설치된..

함수 타입 - 파라미터, 반환값 함수의 파라미터에 타입을 정의하는 방식 파라미터의 타입을 2개 모두 숫자로 정의했기 때문에 반환값도 숫자로 알맞게 자동으로 반환해주지만 명시적으로 표현할 수도 있다. 함수의 반환 값에 타입을 정의하는 방식 함수 반환 값의 타입을 정의하였기 때문에 함수는 필수로 return 값을 정해야 한다. 또한 반환 값을 숫자로 정의하고 반환값으로 문자열을 입력한다면 오류가 발생한다.

기본 타입-튜플, 객체, 진위값 TS 튜플 배열의 특정 인덱스에 특정값 타입을 지정할 수 있다. 모든 인덱스의 타입이 정해져 있는 배열 address2와 같이 배열(Array)을 선언하는 경우에는 제네릭 형식에 한개의 자료형만 입력할 수 있다. TS 객체 타입스크립트 객체 선언 방식은 2가지가 있다. 자바스크립트와 동일하게 선언할 수도 있고, 객체 속성의 타입까지 지정할 수가 있다. TS 진위값 let test: boolean = true;

타입스크립트를 공부를 시작하고 ts파일을 js파일로 compile 하던 중 오류 발생 오류 내용 tsc : 이 시스템에서 스크립트를 실행할 수 없으므로 해결 방법 Visual Studio Code를 관리자 권한으로 실행 작업 폴더 선택해서 우클릭 - 터미널 실행 이전에는 powershell로 확인되던 터미널이 bash로 실행됨 compile 재시도 ts파일을 js파일로 변환하여 브라우저에서 실행할 수 있도록 다시 compile 시도 tsc index.ts 명령어 입력 같은 폴더에 index.js 파일 자동 생성 현재 정책 확인하기 Get-ExecutionPolicy powershell에서 위의 명령어를 입력해야 가능하다. 보이는것처럼 bash 환경이 아닌 powershell에서 tsc 명령어를 사용하려고..