본문 바로가기

Language/Typescript

 (7)
[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] 리터럴, 유니온/교차 타입 literal type const userName1 = "Bob"; let userName2 = "Tom"; userName2 = 3; // Error userName1의 타입은 "Bob"이고 username2의 타입은 string이다. const로 선언한 값은 바꿀 수 없으므로 "Bob" 이외의 값은 가질 수 없다. 반면 userName2는 언제든 다른 값으로 바뀔 수 있으니 보다 넓은 개념의 string 타입으로 정의된다. userName2의 타입을 명시하지 않았지만 다른 타입으로 바꾸면 에러가 발생한다. userName1처럼 정해진 string 값을 가진 것을 문자열 리터럴 타입이라고 한다. type로 비슷한 형태를 만들 수 있다. type Job = "police" | "developer" | "..
[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..

티스토리툴바