TypeScript

sooni·2023년 7월 14일
typescript
0

Typescript

목록 보기
1/1

💻 TypeScript란?

TypeScript란 Microsoft에서 개발 및 유지 관리 하는 오픈소스 프로그래밍 언어이다.

TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. 쉽게 말해 JavaScript에 타입을 부여한 언어이다.

JavaScript vs. TypeScript

  • JavaScript
    • 동적 타이핑 (Dynamic Typing)
    • 변수나 반환값의 타입을 사전에 지정하지 않는다.
    • 타입 결정 이후에도 같은 변수에 여러 타입의 값을 교차하여 할당 가능하다.
    • 런타임 시 에러를 발생시킨다.
  • TypeScript
    • 정적 타이핑 (Static Typing)
    • 타입을 명시적으로 선언한다.
    • 타입이 선언된 이후에는 변경할 수 없다.
    • 컴파일 시 에러를 발생시킨다.
    • JavaScript와 달리 브라우저에서 실행하려면 compile해야한다.

🤔 TypeScript를 쓰는 이유?

크게 에러의 사전 방지 및 코드 가이드 및 자동완성을 통한 개발 생산성 향상을 위해 사용한다.

에러의 사전 방지

// js
function sum(a, b) {
	return a + b;
}
// ts
function sum(a: number, b:number) {
	return a + b;	
}
sum(10, 20);	// ex1
sum('10', '20');	// ex2

sum 함수를 이용하여 ex1과 같이 숫자 10과 20을 더하게 되면 js, ts 모두 20을 얻을 수 있다.

ex2와 같이 숫자 대신 문자열을 더하게 될 경우 js는 1020 이라는 결과를 반환한다. 그러나, ts의 경우 컴파일 단계에서 오류를 발생시켜 의도하지 않은 코드의 동작을 예방할 수 있다.

코드 자동 완성과 가이드

TypeScript를 사용하게되면 Visual Studio Code 와 같은 개발 툴의 기능을 최대로 활용할 수 있다.

JavaScript로 코드를 작성하게 되면 작성 시점에 변수의 타입을 모르기 때문에 API를 사용할 수 없다. 그러나 TypeScript로 코드를 작성하게 되면 타입이 지정되어 있기 때문에 해당 타입에 대한 API를 미리 보기로 볼 수 있고 빠르고 정확하게 작성할 수 있다.

📑 기본 타입

JavaScript에서 추가된 데이터 타입이 있다.

  • tuple
  • enum
  • any
  • void
  • never

Boolean

let isTrue: boolean = false;

Number

let num: number = 6;

String

let name: string = "typescript";

Array

let arr: number[] = [1, 2, 3];	// []
let arr: Array<number> = [1, 2, 3];	// 제네릭 배열 타입

Tuple

요소의 타입과 개수가 고정된 배열을 표현 가능하다.

let arr: [string, number];
arr = ["hello", 1];

console.log(arr[0].substring(1));	// 정해진 인덱스에 위치한 요소에 접근 가능

Enum

특정 값이 어떤 Color enum멤버와 매칭되는지를 알고 싶을 때, 이 값을 이용하면 일치하는 enum 멤버의 이름을 알아낼 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any

알지 못하는 타입을 표현해야 할 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과시킬 때 사용한다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // success

또한, any 타입은 타입의 일부만 알고 전체는 알지 못할 때 사용한다. 예를 들어, 여러 다른 타입이 섞인 배열을 다룰 수 있다.

let list: any[] = [1, true, "free"];

list[1] = 100;

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다. 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다.

let unuseful: void = undefined;
function warnUser(): void {
    console.log("This is my warning message");
}

Null and Undefined

// 이 밖에 이 변수들에 할당할 수 있는 값이 없다!
let u: undefined = undefined;
let n: null = null;

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이다.

하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하다.

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

Object

object는 원시 타입(Primitive Type)이 아닌 타입을 나타낸다.

변수 선언 시 let을 사용하는 이유

값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.

  • let: 중복 선언 불가능 > 블럭 내부의 변수는 외부에서 사용 불가능
  • var: 중복 선언 가능 > 블럭 내부의 변수를 외부에서 사용 가능
var foo = 123;
console.log(foo); //123

{
    var foo=456;  // 중복선언이 가능, 위에 선언된 애를 블럭내에서도 참조가 되버림
}
console.log(foo); //456 , 블럭밖에서도 참조가 됩니다. 

let foo2_ = 789;
console.log(foo2_); //789
{
    let foo2_:number = 456; 
    // 중복선언이 불가능. 같은 변수를 두번 선언 할 수 없음. 
    // /위에걸 쓰는게 아니고 블럭내의 변수하나를 새로 만드는것
    let bar:number = 456;
    console.log(foo2_);
    console.log(bar); //456
}
foo2_ = 567;
console.log(foo2_); //789

⚙ TypeScript 개발 환경 설정

  1. TypeScript 컴파일러 설치
$ npm install -g typescript
  1. ts 파일 작성 (test.ts)
let helloWorld = "Hello World!!";
const user = {
	name: "TypeScript",
	id: 0,
};
  1. ts 파일 컴파일
$ tsc test.ts
  1. JavaScript 코드로 변환 (test.js)
var helloWorld = "Hello World!!";
var user = {
	name: "TypeScript",
	id: 0,
};
  • tsconfig.json에서 컴파일 옵션 수정이 가능하다.

📚 참고

profile
sooni

0개의 댓글