본문 바로가기

Language/TypeScript4

타입스크립트 / 열거형과 리터럴 타입 Enum & Literal 1. 열거형 Enum : 연관된 아이템들을 함께 묶어서 표현할 수 있는 수단 (사용방법) enum을 선언해준다. 원하는 프로퍼티에 해당 enum의 변수를 타입으로 지정해준다. 아래와 같이 클래스.변수명 과 같은 형태로 사용하면 된다. 컴파일된 자바스크립트를 보면 아래와 같은 형태로 나온다. 0, 1, 2 의 형태로 각각 값을 가지는 것을 확인할 수 있다. 이것이 숫자열거형 Numeric Enum 이다. 근데 만약에 0,1,2의 값을 "Male", "Female"과 같은 String형태로 변경하고 싶다면?? 타입스크립트는 String enum을 지원한다. 2. 리터럴 타입 : enum 보다 심플하다. 그냥 스트링으로 적고 | 로 구분해주면 끝~ 본 포스팅은 땅콩코딩님의 유투브 강.. 2021. 6. 12.
타입스크립트 / 타입으로 사용하는 인터페이스 인터페이스를 타입으로 사용하여 더 간단하게 코딩할 수 있다. 위와 같이 인터페이스에 각 변수명마다 데이터 타입을 지정해주고 함수에 인터페이스를 리턴타입으로 명시해주면 된다. [선택적 프로퍼티] 인터페이스 내에 데이터 타입의 변수명 뒤에 ? 를 붙여주면 해당 함수의 리턴값에 해당 데이터 타입의 리턴값이 명시되어 있지 않아도 에러가 발생 하지 않는다. ex)age?:number 로 해놓으면 return시 age:값 이것을 입력하지 않아도 리턴 된다. 인터페이스로 타입을 지정해주면 다른 함수를 사용시 재사용도 가능한 장점이 생긴다. [인터페이스와 메소드] 인터페이스 안에 메소드도 정의할 수 있다. 이렇게 직접 선언하는 것과 Arrowfunction을 사용하여도 가능하다. [Read Only 프로터티] 읽기 전.. 2021. 6. 6.
타입스크립트 타입 추론 / 타입 명시 타입스크립트의 가장 큰 특징중 하나는 정적 타이핑 기능 (Static Typing) 을 자바스크립트에 제공하는 것이다. Static Typing 이란? 타입을 선언하고 선언된 타입에 맞는 값만 할당 및 반환 되어야 한다는 의미이다. 타입추론 (Type Inference) 예시를 하나 보자 이렇게 js에서는 타입을 초기화 한 후 다시 타입에 다른 값을 초기화 할때 타입이 달라도 문제 없지만 ts에서는 에러 밑줄이 나온다. 컴파일시에도 에러가 나온다. 즉, 타입스크립트에서는 타입 표기가 없는 경우 코드를 읽고 분석하여 타입을 유추해 낼 수 있다. 이것이 타입 추론! 단순히 변수에 뿐만아니라 함수의 파라미터와 리턴 타입에도 적용된다. 타입명시 (Type Anotations) 타입명시란? 변수를 선언할 때 변수.. 2021. 6. 5.
타입스크립트란 무엇일까? + 개발환경설정 타입스크립트란 무엇일까? 1. 타입스크립트란? 자바스크립트를 기반으로 한 superset이다. 자바스크립트의 기능 + 자바스크립트에 없는 기능 2. 타입스크립트의 특징 타입표기 : 변수 값에 데이터 타입 지정 가능 객체지향적 컴파일 타임 오류를 잡을 수 있다. 타입스크립트로 작성된 코드가 자바스크립트로 컴파일 되어야 한다. 왜냐면 브라우저는 JS만 이해가능 프로그래밍 언어인 동시에 컴파일러! 개발환경설정 1. VS Code 설치 구글 검색해서 다운 고고 https://code.visualstudio.com/ Extension 설치 (1) Prettier : 코드를 포맷팅하는 것을 도와주는 것, 코드를 보기 쉽고 읽기 쉽게 (2) ESLint : 코드 품질 도구, 코드 검사, 문제에 대해 경고 (3) Pa.. 2021. 6. 5.