TypeScript(8) - Mapped Types
·
🥏TypeScript
맵드 타입을 이용하면 중복을 피하기 위해서 다른 타입을 바탕으로 새로운 타입을 생성할 수 있습니다.Mapped type을 사용하는 것은 type이 다른 type에서 파생되고 동기화 상태를 유지해야 하는 경우에 특히 유용하다.//현재 사용자의 구성 값type AppConfig = { username:string; email:string};//사용자에게 구성 값을 변경할 수 있는 권한이 있는지 여부type AppPermissions = { changeUsername :boolean; changeEmail : boolean;};여기서 Appconfig 와 AppPermissions사이에 암시적 관계가 있기 때문에 문제가 있다.새 구성 값이 AppConfig에 추가될때마다 AppPermission에 해당..
TypeScript(7)-Implements vs Extends, Keyof operator
·
🥏TypeScript
ExtendsExtends 키워드는 자바스크립트에서도 사용할 수 있으며 부모 클래스에 있는 프로퍼티나 메소드를 상속해서 사용할 수 있게 만들어준다.ImplementsImplements 키워드는 새로운 클래스의 타입체크를 위해서 사용되며, 그 클래스의 모양을 정의할때 사용한다.(부모 클래스의 프로퍼티와 메소드를 상속받아서 사용하는게 아님!!!!)class Car{ mileage =0 ; price =100; color ='white'; drive(){ return 'drive!'; } brake(){ return 'brake'; }}class Ford extends Car{ }const myFordCar = new Ford();myFordCar.color여기서 아래부분을 imp..
TypeScript(6)-Utility Type
·
🥏TypeScript
Utility Typepartial파셔 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.interface Address{ email:string; address:string;}const all: Address = {email:"asd@asd.com",address:'john'};//const you = {email:"asd@asd.com"};//all과 다르게 속성이 둘다 있지않아서 Address타입 사용불가 -> 파셔 사용해보자const you:Partial = {email:"asd@asd.com"};const me:Partial = {};pick픽 타입은 특정 타입에서 몇개의 속성을 선택하여 타입을 정의한다.interface Todo{ title: string; descript..
TypeScript(5)-함수 오버로딩,Generics
·
🥏TypeScript
함수 오버로딩두 함수를 하나로 만들어 주려면?function saySomething(word:string | string[]):string{ if(typeof word ==="string"){ return word; }else if(Array.isArray(word)){ return word.join(" "); throw new Error("unable to say something"); //string,string[] 타입이 둘다아니면 undefined 오류가 나서 throw처리 } 이렇게 할 수 있지만 함수 오버로딩을 사용해보자함수 오버로딩은 type선언와 함수구현이 나눠진다.function saySomething(word: string):stringfunction say..
TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처
·
🥏TypeScript
🐳Type Alias , Interfacetype alias타입 별칭과 interface는 타입의 이름을 지정하는 방법으로 매우 유사하며 대부분의 경우 자유롭게 선택할 수 있다.interface People { name : string age : number}const me: People ={ name: 'john', age:50,}💥차이점- interface 확장 : extends 사용interface Animal { name : string;}interface Bear extends Animal { honey:boolean;}const bear1:Bear = { name:'honey bear', honey:true}- type 확장 : intersection 사용type Animal..
TypeScript(3)-tsconfig.json
·
🥏TypeScript
tsconfig.json설정type assertion, GuardTS에서 시스템이 추론 및 분석한 타입내용을 우리가 원하는대로 얼마든지 바꿀수 있다. 이때 type assertion이라는 타입단언이라 불리는 매커니즘을 사용한다.TS의 타입단언은 프로그래머가 컴파일러에게 내가 너보다 타입에 더 잘 알고 있고 , 나의 주장에 대해 의심하지 말라고 하는것과 같다.Type assertion을 사용하면 값의 type을 설정하고 컴파일러에 이를 유추하지 않도록 지시하는 것!!!!var foo ={};foo.bar =123; //오류 : 속성 bar가 {}에 존재xfoo.bar = "hello"; //오류: 속성 bar가 {}에 존재x컴파일러는 foo type이 속성이 없는 {}라고 가정하기 때문에 위에서 컴파일..
TypeScript(2)-Type,Type annotation
·
🥏TypeScript
TypeScript 추가 제공 타입Any애플리케이션 만들때, 잘알지 못하는 타입을 표현해야할때가 있다. 이 값은 유저로 부터 받은 데이터나 서드파티 라이브러리 같은 동적인 컨텐츠에서 올 수도 있다.이 경우, 타입검사를 하지않고, 그 값들을 컴파일 시간에 검사할때 타입검사를 통과하기를 원한다.하지만 any를 최대한 안쓰는 걸 추천그래서 nolmplicitAnt라는 옵션을 주게되면 any를 썻을때 오류가 나오게 할 수 있음let someting :any = "hello";something = 23;something = true;let arr:any[] = ["john",212,true];arr.push("smith");console.log(arr);//output : ['john',212,true,'smit..
TypeScript(1)
·
🥏TypeScript
타입스크립트란타입스크립트는 자바스크립트에 타입을 부여한 언어이고 자바스크립트의 확장된 언어 superset이라고 볼 수 있다. 타스는 자스와 달리 브라우저에 실행하려면 파일을 한번 변환해야하며 이 과정을 컴파일러라고 한다.정적타입(static) 컴파일 타임 코드 작성단계에서 오류확인라고동적타입(dynamic)런타임에서 동작할 때 타입오류를 확인함.그래서 사용하는 이유는TS는 JS코드를 단순화하여 더 쉽게 읽고 디버그할 수 있게함.TS는 코드유형 검사를 통해 JS를 작성할 때 개발자가 일반적으로 겪는 버그를 피하는데 도움을 준다-> TS를 사용하자~~~타입이란그 value가 가지고있는 프로퍼티나 함수를 추론할 수 있는 방법이다."apple"이라고 하면단순히 string문자열이기도 하지만, value인데 문..