본문 바로가기

코딩

 (133)
TypeScriprt - 타입 추론 타입 추론(Type Inference) 타입 추론이란 타입스크립트가 코드를 해석해 나가는 동작을 의미합니다. 타입 추론의 기본 타입스크립트가 타입 추론을 해나가는 과정은 다음과 같습니다. let ex= 5; 위와 같이 ex에 대한 타입을 따로 지정하지 않더라도 일단 ex는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화 할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 가장 적절한 타입(Best Common Type) 타입은 보통 몇 개의 표현식(코드)을 바탕으로 타입을 추론합니다. 그리고 그 표현식을 이용하여 가장 근접한 타입을 추론하게 되는데 이 가장 근접한 타입을 Best Common Type이라고 합니다. 잠깐 ..
TypeScript - Generics 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 아래 코드를 보겠습니다. function getName(name){ return name; } getName('zontae'); // zontae getName(5); //5 getName(true); //true 위 함수는 name라는 파라미터에 값을 넘겨 받아 name를 반환해줍니다. zontae, 5, true 등 어떤 값이 들어가더라도 그대로 반환합니다. 이 관점에서 제네릭을 한번 살펴보겠습니다. function getname2(name:T): T{ return name; } 위 함수는 제네릭 기본 문법이 적용된 형태입니다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있..
TypeScript - Class readonly 클래스의 속성에 readonly 키워드를 사용하면 아래와 같이 접근만 가능합니다. class Student { readonly name :string; constructor(name :string){ this.name = name; } } let zontae = new Student("zontae"); zontae.name = "jontae"; // readonly 이기 때문에 오류가 난다. 이처럼 readonly를 사용하면 constructor() 함수에 초기 값 설정 로직을 넣어줘야 하므로 다음과 같이 인자에 readonly 키워드를 추가해서 코드를 줄일 수 있습니다. class Student2 { readonly name :string; constructor(readonly name..
TypeScript - 이넘(Enums) 이넘(Enums) 이넘은 특정 값들의 집합을 의미하는 자료형입니다. 예를 들면 아래와 같은 목록이 이넘이 될 수 있습니다. 숫자형 이넘 타입스크립트에서 숫자형 이넘은 아래와 같이 선언합니다. enum Book { 해리포터 = 1, 반지의제왕, 삼국지 } 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. 해리포터 - 1 반지의제왕 -2 삼국지 -3 만약 아래와 같이 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. enum Book { 해리포터 , //0 반지의제왕,//1 삼국지//2 } 숫자형 이넘 사용하기 이렇게 선언한 이넘은 아래와 같이 사용할 수 있습니다. enum Book { 해리포터 , //0 반지의제왕,//1 삼국지//2 } function book..
TypeScript - 인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스 맛보기 인터페이스에 대해 알아볼 수 있는 간단한 예제를 봅시다. let person ={name : 'zontae' ,age : 10}; function logAge(obj : {age:number}){ console.log(obj.age); //10 } logAge(person) 위 logAge() 함수에서 받는 인자의 형태는 age를 속성으로 갖는 객체입니다. 이렇게 인자를 받을 때 단순한 타입 뿐만 아니라 객체의 속성..
TypeScript - 함수 타입스크립트에서의 함수 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의할 수 있습니다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조 타입 함수의 기본적인 타입 선언 타입스크립트의 함수 선언 방법을 이해하기 위해 먼저 간단한 자바스크립트 함수를 보겠습니다. function sum (a,b,c){ return a + b + c; } 위 자바스크립트 함수에 타입을 부여하면 아래와 같습니다. function sum (a:number,b:number ,c:number){ return a + b + c; } 기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였습니다. 참고사항 -> 함수의 반환 값에 타입을 정하지 않을 때..
TypeScript - Union Type Union Type 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다. 아래 코드를 보겠습니다. function logMessage(value: string | number) { console.log(value); } 위 함수에 value 에는 문자열 타입이나 숫자 타입 모두 가능합니다. | 연산자는 타입을 여러 개 연결하는 방식 이며 이러한 방식을 유니온 타입 정의 방식이라고 말한다. Union Type의 장점 유니온 타입의 장점은 아래 2개의 코드를 비교하면 바로 알 수 있습니다. // any를 사용하는 경우 function getAge(age: any) { age.toFixe(); // 에러 발생, age의 타입이 any로 추론되기..
TypeScript - 기본 타입 타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있습니다. 타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다. Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never String 자바스크립트 변수의 타입이 문자열인 경우 아래와 같이 선언해서 사용합니다. // 문자열 const str: string = 'hello'; Number 타입이 숫자이면 아래와 같이 선언합니다. // 숫자 const num: number = 10; Boolean 타입이 진위 값인 경우에는 아래와 같이 선언합니다. // 진위값 let isLogin: boolean = false;​ Object 타입이 객체면 아래와 같이 ..

티스토리툴바