[Typescript] 1. 기본 타입

Joy·2023년 3월 6일
0

Typescript

목록 보기
1/2
post-thumbnail
post-custom-banner

타입스크립트란?

간단히 말해서 자바스크립트에 타입을 부여한 언어다.
자바스크립트의 확장된 언어라고도 볼 수 있는데, 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한 번 변환해주어야 한다. 이 변환 과정을 우리는 컴파일이라고 부른다.

왜 써야하는가?

가장 큰 이유는 이 두가지가 아닌가 싶다.

  1. 에러의 사전 방지
  2. 코드 가이드 및 자동 완성 (개발 생산성 향상)

그래서 장점과 단점이 뭔데?

장점

  1. 높은 수준의 코드 탐색과 디버깅

코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들의 에러를 사전에 제거한다.
또, 실행 전 피드백을 제공해서 작업과 동시에 디버깅이 가능해 생산성을 높일 수 있다.

  1. 자바스크립트 호환

자바스크립트와 100% 호환이 가능해서 서버단에서 개발이 이루어지는 복잡한 대형 프로젝트에서도
사용이 가능하다.

  1. 강력한 생태계

라이브러리 지원이 잘되어있고 각종 에디터가 관련 기능 플러그인을 지원한다.

  1. 점진적 전환 가능

자바스크립트를 타입스크립트로 전환하는데 부담이 있다면 추가 기능이나 특정 기능에만 도입함으로써
점진적으로 전환할 수 있다.

단점

  1. 새로운 언어에 대한 러닝 커브
  2. 상대적으로 낮은 가독성
  3. 코드량 증가

- 결론 -
프로젝트의 규모가 크고 복잡하거나 유지보수가 중요한 장기 프로젝트일수록 타입스크립트를 쓰는 것이 좋다.

기본 타입 종류

String 타입

let str: string = 'hi';

Number 타입

let num: number = 10;

Boolean 타입

let isLoggedIn: boolean = false;

null / undefined 타입

let nullValue: null = null;
let undefinedValue: undefined = undefined;

Array 타입

let arr: number[] = [1,2,3]

또는 이런 식으로 제네릭을 사용할 수 있다.

let arr: Array<number> = [1,2,3]

Object 타입

let user: { name: string, age: number } = { name: '김객체', age: 30 }

Tuple 타입
원소의 수와 각 원소의 타입이 정확히 지정된 배열의 타입을 정의할 수 있는 타입
만약, 정의하지 않은 타입이나 인덱스로 접근 할 경우 오류가 난다.

let arr: [string,number] = ['hi', 10];

Enum 타입
특정 값(상수)들의 집합을 의미를 가진 타입

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

enum Avengers { Capt, IronMan, Thor }
let Hero: Avengers = Avengers[0];

Any 타입
모든 타입에 대해서 허용한다는 의미를 가진 타입

let str: any = 'hi';
let num: any = 1203;
let arr: any = ['a', 2, true]

Void 타입
변수에는 undefined와 null만 할당하고, 아무런 값도 반환하지 않는 함수의 반환 타입

let unuseful: void = undefined;
function notuse(): void {
	console.log('sth');
}

Never 타입
아무런 값도 가질 수 없는 타입텍스트

function neverEnd(): never {
	while (true) {
    
    }
}

References

https://joshua1988.github.io/ts/
https://yamoo9.gitbook.io/typescript/
https://ahnheejong.gitbook.io/ts-for-jsdev/
https://www.samsungsds.com/kr/insights/typescript.html

profile
새로운 거에 진심인 사람
post-custom-banner

0개의 댓글