Front

interface User{ age : number; name : string } // 변수를 인터페이스 활용 var seho : User = { age : 33, name : '세호' }; // 함수의 인터페이스 활용 (많이사용) function getUesr(user : User) : void { console.log(user) } const capt = { age : 44, name : '캡틴' } getUesr(capt); // 함수 스펙(구조)에 인터페이스를 활용 - 구조를 정의하는 인터페이스 interface SumFunction{ (a: number, b: number) : number } var sum: SumFunction; sum = function(a : number, b : numb..

구체적인 타입 정의 let todoItems: { id: number; title: string; done: boolean }[]; // api 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; } // crud methods function fetchTodos(): object[] { const todos = fetchTodoItems(); return todo..

함수타입 - 파라미터, 반환값 // 함수에 파라미터에 타입을 정의하는 방식 function sum(a : number, b: number){ return a + b; } sum(10, 20); // 함수의 반환 값에 타입을 정의하는 방식 function add(): number{ return 10; } // 함수에 타입을 정의하는 방식 function sum2(a: number, b: number) : number { return a + b; } 함수타입 - 파라미터를 제한하는 특성, 옵셔널 파라미터 // 파라미터를 제한하는 특성 function sum3(a: number, b: number): number { return a + b; } sum3(10, 20, 30, 40, 50); //2개의 인수가 ..

기본타입 - 문자열, 숫자, 배열, 튜플, 객체, 진위값 // JS 문자열 선언 // var str = 'hello'; // TS 문자열 선언 let str : string = 'hello'; // TS 숫자 let num : number = 10; // TS 배열 let arr : Array = [1,2,3]; let heroes: Array = ['capt', 'thor', 'hulk']; let items : number[] = [1,2,3]; // TS 튜플 - 배열의 index에 각각 Type을 지정해주는것 let address2 : [string, number] = ['강남', 100]; // TS 객체 let obj : object = {}; // let person: object = { /..

https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org 타입스크립트 공식 문서

tsconfig.json 파일 { "compilerOptions": {// 컴파일할때 부과적인 옵션 설정 "allowJs": true, // 이 프젝안에 자바스크립트 허용 "checkJs": true, // 이 프젝안에 자바스크립트 허용 "noImplicitAny": true // 모든 type에 최소한 any라는 기본 타입이라도 넣어야하게 만드는 설정 } }

이렇게 하면 자바스크립트에서 무슨 타입을 받아야하는지 나옴 하지만 안타깝게도 number 타입을 string 타입으로 잘못 넣었을때 타입스크립트처럼 잘못됐다고 알려주지 않음 오류가 안남. @ts-check라는 기능을 사용하면 나름대로 자바스크립트에서 타입스크립트처럼 쓸 수 있음 근데 이렇게 쓰는거보다 타입스크립트를 배워서 쓰는게 훨씬 편함!

타입스크립트란? - 자바스크립트에 타입을 부여한 언어 - 자바스크립트의 확장된 언어 - 자바스크립트와 다르게 브라우저에 실행하기 위해 파일을 한번 변환해야함. 이 변환과정을 컴파일이라고 부름 왜 타입스크립트를 써야 좋을까? 1. 에러의 사전 방지 타입스크립트는 에러를 사전에 미리 예방할 수 있습니다. 아래 2개의 코드를 비교하여 어떻게 에러를 사전에 방지할 수 있는지 살펴보겠습니다. // math.js function sum(a, b) { return a + b; } // math.ts function sum(a: number, b: number) { return a + b; } 두 코드 모두 두 숫자의 합을 구하는 함수 코드입니다. 하나는 자바스크립트로 그리고 다른 하나는 타입스크립트로 작성하였죠. 이..

https://joshua1988.github.io/ts/ 타입스크립트 핸드북 joshua1988.github.io

VSCode 플러그인 목록 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 문법 검사 : ESLint, TSLint 실습 환경 보조 : Live Server 기타 Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등 ctrl+shift+P 누르고 file icon theme 한 후 Meterial Icon Theme 선택하면 폴더들이 의미에맞게 컬러 변경됨