본문 바로가기

WEB

 (37)
[Typescript] 제네릭(Generics) 제네릭을 사용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. 다양한 타입을 인자로 받을 때 함수 오버로드나 유니온 타입을 사용해도 되지만 타입이 많아질수록 복잡해진다. 선언할 때는 타입 파라미터만 적어주고, 생성하는 시점에 타입을 결정한다. function getSize(arr: T[]):number{ return arr.length; } const arr1 = [1, 2, "a"]; getSize(arr1); // 3 const arr2 = ["a", "b", "c"]; getSize(arr2); // 3 const arr3 = [false, true, true]; getSize(arr3); // 3 제네릭으로 함수를 선언하고 사용하는 예시이다. T를 타입 파라미터라고 한다. 다른..
[Typescript] 클래스(Class) ↓ 클래스에 대한 개념이 없다면 참고 https://winterflower.tistory.com/178 타입스크립트에서 클래스를 작성할 때는 멤버 변수를 미리 선언해주어야 한다. class car{ color: string; constructor(color: string){ this.color = color; } start(){ console.log("start"); } } const bmw = new Car("red"); 멤버 변수를 미리 선언하지 않는 방법도 있다. 접근 제한자나 readonly 키워드를 이용하면 된다. class car{ constructor(public color: string){ this.color = color; } start(){ console.log("start"); } }..
[Typescript] 함수 선택적 매개변수 function hello(name?:string){ return `Hello, ${name || "world"}`; } function hello2(name = "world"){ return `Hello, ${name}`; } const result = hello(); const result2 = hello("Sam"); const result3 = hello(123); // Error name이 없으면 "world"를 출력하는 코드이다. name은 있어도 되고 없어도 되는 매개변수이므로 뒤에 물음표를 붙인다. 이를 선택적 매개변수라고 부른다. 자바스크립트에서처럼 매개변수의 디폴트 값을 지정하는 것도 가능하다. function hello(age:number|undefined, name:..
[Typescript] 인터페이스(interface) let user:object; user = { name : 'xx', age : 30 } console.log(user.name); // Error object에는 특정 속성 값에 대한 정보가 없기 때문에 위 코드는 에러가 발생한다. 이처럼 프로퍼티를 정해서 객체를 표현하고자 할 때는 인터페이스를 사용한다. interface User { name : string; age : number; } let user : User = { name : 'xx', age : 30 } console.log(user.age); // 30 인터페이스를 활용해 user 객체의 age 속성에 접근하면 에러가 발생하지 않는다. optional, readonly, index type Score = 'A'|'B'|'C'|'F'; i..
[Typescript] 기본 타입 string, number let car:string = 'bmw'; let age:number = 30; Array 배열을 나타내는 두 가지 방법이 있다. 타입 뒤에 [ ]를 붙이거나 제네릭 배열 타입인 Array을 사용한다. let a:number[] = [1, 2, 3]; let a2:Array = [1, 2, 3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; 튜플(tuple) 동일하지 않은 타입을 배열로 표현할 수 있다. 인덱스를 사용해 배열의 요소에 접근할 경우, 해당 요소는 올바른 타입이어야 한다. let b:[string, number]; b = ['z', 1]; // OK b = [..
[Typescript] 타입스크립트를 쓰는 이유를 알아보자 브라우저들은 타입스크립트를 이해하지 못한다. 자바스크립트로 변환해서 로드해야 실행할 수 있다. 얼핏 생각해도 번거로울 것 같은데 어떤 장점이 있길래 타입스크립트를 쓰는 것일까? function add(num1, num2){ console.log(num1 + num2); } add(); // NaN add(1); // NaN add(1, 2); // 3 add(3, 4, 5); // 7 add('hello', 'world'); // "helloworld" 위 예시에서 add(1, 2)는 원하는 사용방식이고 결과도 잘 나오지만 나머지는 그렇지 않다. 원하는 결과가 나오지 않아도 자바스크립트는 에러 없이 실행된다. function showItems(arr) { arr.forEach((item) => { con..
[Javascript] async, await async, await를 사용하면 Promise의 then 함수를 체이닝 형식으로 호출하는 것보다 가독성이 좋아진다. async 함수 앞에 async를 붙이면 항상 Promise를 반환한다. async function getName() { return "Mike"; } console.log(getName()); // Promise {: "Mike"} getName().then((name) => { console.log(name); // "Mike" }); 리턴값이 프로미스이면 리턴한 프로미스를 그대로 사용한다. async function getName() { return Promise.resolve('Tom'); } getName().then((name) => { console.log(name); // ..
[Javascript] 프로미스(Promise) 상점에 가서 물건을 주문하는데 그 물건이 나올 때까지 시간이 걸린다고 가정해보자. 언제 완료되는지 알 수 없고, 물건을 만들다가 실패하는 경우도 있다. 이럴 때 소비자는 10초에 한 번씩 "다 됐나요?"라고 물어본다. 판매자는 "아니요" 또는 "다 됐습니다"라고 대답한다. 실패했다고 말하는 경우도 있다. 그러면 물건을 다시 주문해야한다. 이럴 때 상점에 주문을 하고 상품이 준비되었거나 실패되었으면 알려달라고 하면서 전화번호를 주고 나오는 게 낫다. 상품이 준비되는 동안 다른 작업도 할 수 있다. 상점은 이 번호를 기억했다가 작업이 완료되거나 실패하면 소비자에게 알려준다. 이와 같은 상황에서 사용할 수 있는 것이 Promise이다. 프로미스는 다음과 같이 사용한다. const pr = new Promise..

티스토리툴바