Front

유니온 타입 ( 하나의 Type 이상의것을 쓸 수 있게 만든것 ) function logMessage(value : string | number){ console.log(value); } logMessage('hello'); logMessage(30); 유니온 타입의 장점 var seho : string | number | boolean; function logMessage(value : string | number){ if(typeof value == 'number'){ value.toLocaleString(); } if(typeof value == 'string'){ value.toString(); } throw new TypeError('value must be string or number'); ..

타입 별칭은 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것과 같습니다. 이러한 특징은 VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인해볼 수 있습니다. 아래는 인터페이스로 선언한 타입을 프리뷰로 확인한 결과입니다. 아래는 타입 별칭으로 선언한 타입을 프리뷰로 확인한 결과입니다. type vs interface 타입 별칭과 인터페이스의 가장 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다. 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다. 따라서, 가능한한 type 보다는 interface로 선언해서 사용하는 것을 추천합니다. TIP 좋은 소프트웨어는 언제나 확장이 용이해야 한다는 원칙에 따라 가..

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; } 두 코드 모두 두 숫자의 합을 구하는 함수 코드입니다. 하나는 자바스크립트로 그리고 다른 하나는 타입스크립트로 작성하였죠. 이..