본문 바로가기

js/TypeScript

 (11)
TypeScript - 타입 별칭 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다. 예를 들면 아래와 같습니다. // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; 위와 같이 string, number와 같은 간단한 타입 뿐만 아니라 interface 레벨의 복잡한 타입에도 별칭을 부여할 수 있습니다. 아래 코드와 같이 말이죠. type Developer = { name: string; skill: string; } 타입 별칭에 제네릭도 사용할 수 있습니다. type User = { name: T } type vs interface 타입 별칭과 인터페이스..
TypeScript - 타입 호환 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미합니다. 예를 들면 아래와 같은 코드를 의미합니다. interface Ironman { name: string; } class Avengers { name: string; } let i: Ironman; i = new Avengers(); // OK, because of structural typing C#이나 Java였다면 위 코드에서 에러가 날겁니다. 왜냐하면 Avengers 클래스가 명시적으로 Ironman 인터페이스를 상속받아 구현하지 않았기 때문입니다. 하지만 위와 같은 코드가 타입스크립트에서 정상적으로 동작하는 이유는 자바스크립트의 작동 방식과 관련이 있습니다. 기본적으로 자바스크립트는 객체 리터럴이나 익명 함수 등을..
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; } 기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가하였습니다. 참고사항 -> 함수의 반환 값에 타입을 정하지 않을 때..

티스토리툴바