티스토리

코딩기록지

검색하기

블로그 홈

코딩기록지

somv12.tistory.com/m

99% 까먹을 거 50% 까먹기 위해 기록하는 곳

구독자: 0

방명록 방문하기

주요 글 목록

타입스크립트 타입 조작 - 맵드 타입 / 템플릿 리터럴 타입 맵드 타입 📌기존의 객체 타입을 기반으로 새로운 객체 타입을 만든다. interface Animal { type:string; name:string; age:number; color:string; } 동물의 정보를 Animal 타입과 같이 저장해놓는다. 그리고 동물의 정보를 수정 가능한 함수가 있다면 function UpdateAnimal(animal:Animal){ ...내부함수 } UpdateAnimal( {color:"점박이"} ) 이와같이 내가 color만 변경하고 싶다고 해서 color 프로퍼티만 함수에 넣을 수는 없다. 이미 이 함수의 매개변수 타입은 Animal 타입으로 정해져있기때문이다. 여기에 수정하고 싶은 프로퍼티만 골라담을 수 있는 타입이 하나 더 필요하다. type AnimalMod.. 공감수 0 댓글수 0 2024. 1. 4.
타입스크립트 타입 조작 - keyof와 typeof keyof 연산자 📌객체 타입에 이용된다. 📌객체타입에 있는 모든 프로퍼티의 key들을 string literal union으로 추출해낸다. 예를들어 type objKey = { name:string; age:number; position:string } 이라는 타입의 프로퍼티는 세 개다. 각각의 프로퍼티 키 네임은 각각 name, age, position이고 타입을 따져보면 각각 name,age,position이라는 고유한 값을 가지는 string literal이다. 여기서 string literal union이라하면 name | age | position 이 된다. interface Person { name:string; age:number; } function getKey(person: Person.. 공감수 0 댓글수 0 2024. 1. 4.
타입스크립트 타입 조작 - 인덱스드 엑세스 인덱스드 엑세스 타입 인덱스를 이용해 다른 타입내의 특정 프로퍼티 타입을 추출한다. 객체,배열,튜플에 사용 가능 📌객체 프로퍼티의 타입 추출 interface Post { title:string, content:string, author: { id:number, name:string } } 만약 여기에서 author 프로퍼티의 타입에 관심이 있다면 function printInfo(author: {id:number, name:string}){ console.log(`${author.id} - ${author.name}`) } printInfo 함수의 인자는 author 프로퍼티이고, id와 name의 타입을 직접 명시해주면 나중에 타입 프로퍼티가 추가or삭제or수정되었을 때 귀찮아진다. 뭐든 중복되는 코.. 공감수 0 댓글수 1 2024. 1. 3.
타입스크립트 기초 문법 - 제네릭과 프로미스 프로미스 기초 📌const promise = new Promise(실행함수) 📌비동기처리를 위한 내장 객체 📌매개변수로는 resolve / reject 두 가지를 받는다. ✔️resolve - 비동기 작업의 상태를 성공으로 바꾸는 함수 ✔️reject - 비동기 작업의 상태를 실패로 바꾸는 함수 📌then과 catch는 각각 비동기처리가 성공했을 때, 실패했을 때 실행되는 함수이다. const promise = new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(10) // 10은 비동기작업의 결과값 },3000) }) 3초 후 resolve를 호출해 비동기 작업을 성공 상태로 바꾼 후 작업의 결과값을 "인수"로 전달한다. then은 resolve가 실행.. 공감수 0 댓글수 1 2024. 1. 3.
타입스크립트 기초 문법 - 제네릭 인터페이스 / 타입 별칭 / 클래스 제네릭 인터페이스 interface Test { name:T; age:V; } let testValue:Test = { name: "이름", age:20 } 제네릭 인터페이스를 사용 할 경우 꼭 사용할 타입을 명시해줘야한다. 함수는 전달하는 매개변수의 타입으로 자동추론하지만 인터페이스는 자동추론 할 방법이 없기때문이다. 인덱스 시그니처 활용 인터페이스보다 훨씬 유연하게 프로퍼티와 값 정의 가능 interface Test { [key:string] : T; } let test:Test = { numberlist: [100,10,20] } 제네릭 타입 별칭 type Test = { [key:string] : T } let test:Test = { name: "username1" } 타입별칭도 인터페이스 활용.. 공감수 0 댓글수 0 2024. 1. 3.
타입스크립트 기초 문법 - 제네릭과 map,foreach 함수 📌Map과 ForEach 함수의 차이점 map - 배열 각 요소에 콜백함수를 실행한 후 새로운 배열을 반환해줌 foreach - 배열 각 요소에 콜백함수 실행만 해줌, 반환값 X Map과 제네릭 function map(arr:unknown[], callback:(item: unknown)=> unknown ): unknown[]{ let result = []; for(let i=0; i item * 2); 이 경우 매개변수 arr와 map함수 반환값 타입은 number[ ] , 콜백함수의 인수와 반환값 모두 number타입이다. 그래서 위 함수 식을 제네릭 함수로 바꾸면 function map(arr:T[], callback:(item: T)=> T): T[]{ let result = []; for(le.. 공감수 0 댓글수 0 2024. 1. 3.
타입스크립트 기초 문법 - 제네릭 기초 제네릭 function func(value:any){ return value; } let num = func(10); //any 타입 let str = func("string") //any 타입 any타입인 변수에 다른 타입의 값을 넣어도 any타입이 된다. 반환값 value를 기준으로 타입 추론이 되기때문이다. ex. let Test:any Test=10; Test //any 타입 Test 변수를 any타입으로 설정한 후 다른 타입을 재할당해도 any타입인것을 생각해보면 된다. 이렇게 만들어진 함수에 num.toUpperCase();를 실행해도 오류를 감지하지 못한다. 그래서 필요한 것이 모든 타입의 값을 적용할 수 있는 제네릭 함수이다. 제네릭 기본 문법 function func(value){ ret.. 공감수 0 댓글수 1 2024. 1. 2.
타입스크립트 기초 문법 - 클래스 클래스 동일한 모양의 객체를 더 쉽고 간결하게 만들어주는 "틀"의 역할. 필드, 생성자, 메서드 세 구간으로 나눌 수 있다. class Employee { // 필드 name: string; age:number; position:string; //생성자 constructor( name: string , age:number , position:string ) { this.name=name; this.age=age; this.position=position; } //메서드 work(){ console.log('working') } } let employee = new Employee("사람1",20,"개발자"); 클래스는 타입으로도 사용 가능 let employee: Employee = { name:"이름".. 공감수 0 댓글수 0 2023. 12. 29.
타입스크립트 기초 문법 - 인터페이스 인터페이스 - 타입 별칭처럼 타입에 이름을 지어주는 문법이다. interface Test { name:string; age:numer; } type Test = { name:string; age:numer; } 타입 별칭과는 등호 표시 빼고는 문법이 같다. 타입 별칭이 갖고있는 기능, 예를 들면 선택적 프로퍼티, 읽기전용 프로퍼티 역시 설정할 수 있다. 메서드 오버로딩 호출 시그니처를 이용해 오버로딩 구현도 가능하다. 함수 타입 표현식은 안됨 type Foo = (a:number) => number; //함수타입표현식 type Foo = { //호출시그니처 (a:number) : number } interface Test { foo(a:number):void; foo(a:number, b:number):.. 공감수 0 댓글수 1 2023. 12. 27.
타입스크립트 기초 문법 - 함수 오버로딩, 사용자 정의 타입가드 오버로딩 - 함수는 하나, 매개변수의 갯수 or 타입에 따라 다르게 구현되도록 하는 것 함수의 선언부와 구현부로 나눠서 살펴보자면 ☘️선언부 (오버로드 시그니쳐) - 다양한 버전을 나타냄 function foo(a:number):void; //foo의 버전1 function foo(a:number,b:number,c:number):void; //foo의 버전2 ☘️ 구현부 function foo(a:number, b?:number, c?:number) { if(typeof b === "number" && typeof c === "number") { console.log("버전2일 때의 구현부") } else { console.log("버전1일 때의 구현") } } 이 때 버전1과 버전2는 매개변수가 1개.. 공감수 0 댓글수 0 2023. 12. 27.
타입스크립트 기초 문법 - 함수 타입과 호환성 1. 함수에서의 타입 정의 보통의 함수에는 매개변수와 반환값이 존재한다. 반환값은 타입을 설정하지 않아도 자동으로 추론되지만 매개변수는 타입을 꼭 설정해줘야한다. ✔️화살표함수도 마찬가지 function foo(a:number,b:number){ return a+b; } const foo = (a:number,b:number) => a+b; 타입 별칭에서도 선택적 프로퍼티를 사용할 수 있듯이 함수의 매개변수도 선택적으로 사용할 수 있다. function foo(name:string, age?:number){ ... } 하지만 이 경우 선택적 매개변수는 지정된 타입 혹은 undefined로 추측되기때문에 타입좁히기가 필요하다. function foo(name:string, age?:number){ if(t.. 공감수 0 댓글수 1 2023. 12. 27.
타입스크립트 기초 문법 - 서로소 유니온 타입 서로소 - 겹치는게 하나도 없음 type Customer= { name:string; point:number; } type Admin= { name:string; sale:number } type Food = { name:string; price:number; } type Super = Customer | Admin | Food ; function cart(super:Super){ if("point" in super ) { console.log(`${ super.name} 의 포인트는 ${super.point} 점이다`) } else if ("sale" in super) { console.log(`${super.name}의 판매량은 ${super.sale}이다.`) } else { console.log(.. 공감수 0 댓글수 1 2023. 12. 26.
타입스크립트 기초 문법 - 타입 추론, 타입 단언, 타입 좁히기 1.타입 추론 타입 추론이 되는 경우 초기값이 설정된 변수와 객체 let num1 = 100; // number type으로 추론 let str1 = "type" // string type으로 추론 let object1 = { name: "이름", // string으로 추론 age: 100, //number으로 추론 skill : { kill: "test" //string으로 추론 } } 객체와 배열의 구조분해할당 let object1 = { name: "이름", age: 100, skill : { kill: "test" } } let {name, age, skill} = object1; //각각 string,number,string으로 추론 let [one,two,three] = [true,122,"문.. 공감수 0 댓글수 1 2023. 12. 26.
타입스크립트 기초 문법 - 대수타입 대수타입 여러가지 타입을 합성해서 만드는 타입이다. 합집합(Union)타입 let test:string | number; 바( | )를 이용해서 정의한다. 유니온타입으로 묶인 타입들은 슈퍼-서브관계가 아니어도 상관없음 배열에도 사용 가능 let Arr : (string | number | boolean)[]=["test",12,true] 객체 type에도 사용 가능 type One = { name:string; type:string; } type Two = { name:string; price:number; } type Unions = One | Two 예시로 든 type Unions인 객체들은 크게 세 가지로 나뉠 수 있다. - name과 type 프로퍼티 두 가지만 갖거나 - name과 price 프.. 공감수 0 댓글수 0 2023. 12. 22.
타입스크립트 기초 문법 - 타입 호환, 객체 호환 1.사전 지식 타입스크립트의 호환을 이해하기 위해서 부모타입=슈퍼타입=상위타입 자식타입=서브타입=하위타입 업캐스팅 : 서브타입을 슈퍼타입 값으로 취급한다. 즉, 작은놈을 큰놈에 집어넣음 다운캐스팅: 슈퍼타입을 서브타입으로 취급한다. 큰놈을 작은놈에 집어넣음 집합의 개념으로 생각 해 보면 업캐스팅은 대부분의 경우 가능하지만 다운캐스팅은 불가한 경우가 많다. let num1:number = 10 //넘버타입 let num2:20 = 20 //넘버 리터럴타입 ① num1 = num2 //가능 ② num2 = num1 //오류 (A) = (B) 일 때 B를 A로 취급한다, B를 A에 집어 넣는다 라고 생각하면 이해가 쉽다. 넘버타입은 넘버리터럴타입보다 집합범위가 넓기때문에 ①은 가능, ②는 불가능하다. 2.특이.. 공감수 1 댓글수 1 2023. 12. 22.
타입스크립트 기초 문법 - 타입의 종류(2) 1.Enum (열거형 타입) 기본형은 이렇다. enum Test { ADMIN, CUSTOMER, USER } 숫자를 직접 할당해도 되지만 굳이 입력하지 않아도 자동으로 할당된다. enum Test { ADMIN = 0, CUSTOMER = 1, USER=2 } 배열처럼 처음부터 0,1,2 순서로 할당됨. 물론 원하는대로 할당 숫자와 위치를 지정할 수도 있다. enum Test { ADMIN , CUSTOMER = 10, USER } Test.ADMIN //0 Test.CUSTOMER //10 Test.USER //11 프로퍼티값이 많고, 코드가 복잡할 경우 혹시 모를 오타와 통일되지 않는 값을 적어넣는 등의 실수를 방지할 수 있다. const user1 = { name:"이름이다", (중간에 많은 프로.. 공감수 0 댓글수 0 2023. 12. 21.
타입스크립트 기초 문법 - 타입의 종류(1) 1.원시타입 하나의 값만 저장 가능하다. number,string,boolean var extra:number = 10 //변수 extra는 숫자타입이다. var extra:string="테스트" //변수 extra는 문자타입이다. var extra:boolean=true //변수 extra는 boolean타입으로 true 혹은 false 값만 담을 수 있다. null과 undefined는 그 자체만 넣을 수 있다. var extra:null = null; var extra:undefined=undefined; 2.리터럴타입 변수에 담긴 값 그 자체가 타입이 된다. var Test:10 = 10 var Test2:false = false 리터럴타입으로 변수를 정의하게 되면 변수에 다른 값은 할당할 수 없.. 공감수 0 댓글수 0 2023. 12. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.