✅오늘 뭐했니?
💡 타입스크립트 위키백과
타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[4] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다.
타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[5] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다.
위키백과의 설명 중 몇가지 키워드를 통해 타입스크립트가 무엇인지 파악해보도록 하겠습니다.
💡자바스크립트의 슈퍼셋
TS = Typescript
JS = Javascript
슈퍼셋은 TS ≥ JS 관계가 성립할 때, TS는 JS의 슈퍼셋이라고 볼 수 있습니다.
그림으로 표현한다면 다음과 같습니다.
타입스크립트는 자바스크립트를 포함하고 그 이상의 것들을 제공하는 프로그래밍 언어입니다.
그렇다면 타입스크립트에서 제공하는 그 이상의 것들은 무엇일까요?
💡엄격한 문법
타입스크립트는 ‘엄격한 문법을 지원한다고’ 적혀있습니다.
그렇다면 반대로 자바스크립트는 엄격하지 않은(유연한) 문법을 지원한다고 볼 수 있겠네요.
엄격한 문법이란 무엇일까요?
다음의 예제를 살펴보겠습니다.
let myName = "h662";
// 문자열 -> 숫자로 변경
myName = 662;
// 숫자 -> 참/거짓(Boolean)으로 변경
myName = true;우리가 많이 작성해 본 자바스크립트의 문법입니다.
자바스크립트만 써보셨다면 따로 이상한 점을 살펴볼 수 없고, 실제로 실행도 잘 되는 것을 확인할 수 있습니다.
하지만 ‘myName이라는 변수가 회원가입에 사용이 되며 문자열을 제외한 다른 변수는 받아서는 안 된다.’라고 한다면 위 코드는 에러를 발생시켜야 합니다.
(그렇지 않다면 데이터베이스에 문자를 저장해야 되는 곳에 엉뚱한 값을 저장을 시도하게 되고 치명적인 에러가 될 수도 있습니다. 🥶)
왠만한 것은 수용해버리는 유연한 언어는 배우는 단계에서는 장점이 될 수 있지만, 서비스를 해야 되는 단계에서는 오히려 독으로 작용할 수 있습니다.
그렇기에 우리는 엄격한 언어인 타입스크립트를 통하여 자바스크립트의 단점을 보완하게 된 것입니다.
💡컴파일 에러 VS 런타임 에러
컴파일 에러와 런타임 에러는 에러가 발생하는 시점에 있습니다.
컴파일 에러는 프로그래밍 언어의 문법을 잘못 작성해서 컴파일(실행을 할 수 있는 상태)을 할 수 없는 에러입니다.
반면에 런타임 에러는 컴파일 상에는 문제가 없지만 실행되는 시점에 발생하는 에러입니다.
프로그래머의 실수로 설계가 잘못되었거나, 프로그램이 동작 중에 운영체제나 하드웨어에서 정상적으로 실행되지 않을 때 발생합니다.
우리가 공부하는 단계에서는 컴파일 에러 때문에 많이 고생합니다.
이제는 더 이상 이런 실수는 없겠죠?
하지만 컴파일 에러는 프로그래머에게 있어 굉장히 고마운 에러입니다.
우리가 잘못 작성한 부분을 알려주고 고치면 다시 정상적으로 실행이 될 것입니다.
문제는 런타임 에러에 있습니다.
실행시점에서 에러가 발생한다는 점은 서비스가 배포된 상태에서 발생할 수 있다는 점입니다.
(서비스가 배포된 상태에서 사용자한테서 발견되는 에러는 그닥… 상상하고 싶지 않네요 🥹)
타입스크립트에서 제공하는 타입 체킹 기능은 우리가 런타임 에러를 발생시키는 가능성을 상당히 줄여줍니다.
그렇다면 타입스크립트가 제공하는 타입 체킹 기능이 무엇인지 살펴보도록 하겠습니다.
💻타입스크립트 따라해보기
💡타입스크립트 실행 방법
2.ts
let myName: string = "h662";
console.log(myName);자바스크립트와 별 차이 없어 보이지만 myName이라는 변수 뒤에 : string이란것이 붙어있는 것을 볼 수 있습니다.
이는 뒤에 살펴보기로 하고 우선 실행하여 보겠습니다.
기본적인 타입스크립트 파일의 실행방법은 총 3단계로 나누어집니다.
npm install typescript타입스크립트 설치npx tsc hello.ts타입스크립트 파일을 자바스크립트로 변환node hello.js변환된 자바스크립트 파일을 실행
타입스크립트 파일 자체를 실행하는 등의 여러가지의 실행 방법이 존재하지만, 기본적으로는 타입스크립트로 작성된 파일을 자바스크립트로 변환해서 실행해야 합니다.
💡타입 체킹 기능
타입스크립트라는 이름에서도 알 수 있듯이 타입스크립트에서는 엄격하게 타입을 체크합니다.
let myName: string = "h662";
// 에러발생!!!
myName = 1;
console.log(myName);
string 타입에 number형 변수를 할당하고자 한다면 에러가 발생하는 것을 볼 수 있습니다.
이렇게 엄격하게 타입을 체크함으로써 프로그래머가 발생시킬 수 있는 실수를 줄여줍니다.
타입스크립트에 존재하는 다양한 타입에 대해서 살펴보도록 하겠습니다.
💡다양한 타입들
- 기본 타입들 (number, boolean, string)
타입스크립트의 기본 타입들로는 number, boolean, string이 있습니다.
3.ts
let myName: string = "h662";
let age: number = 99;
let isRich: boolean = false;
console.log(myName);
console.log(age);
console.log(isRich);
- 문자열을 담는 변수에는
string - 숫자를 담을 때는
number - 참/거짓 변수를 담을 때는
boolean이 사용됩니다.
- null / undefiend
프로그래밍에서는 비어있다라는 것을 나타내주어야 할 때가 있습니다. (0, “”, false 등은 비어있는 상태가 아닙니다 🧐)
이 때 타입스크립트에서는 null / undefined를 사용하게 됩니다.
let nullable:null = null;
let undefinedable:undefined = undefined;
// null, undefined에 값을 할당하고자 하면 에러가 발생합니다!!!
nullable = 0;
undefinedable = "";
이렇게 null / undefined로 선언한 변수는 값을 할당할 수 없게 됩니다. (때문에 독자적으로만 사용하기보다는 유니언 타입이라는 것을 활용해 다른 타입과 같이 사용합니다.)
null과 undefined의 차이는 초기화를 했는지의 여부에 차이가 있습니다.
- undefined - 초기화 하지 않음
- null - 초기화 후 null값을 할당
자세한 null과 undefined의 차이를 공부하려면 아래의 링크를 참조하세요
- any
타입스크립트에서도 마치 자바스크립트의 변수처럼 모든 타입을 수용할 수 있는 타입이 있습니다.
바로 any타입입니다.
let myName: any = "h662";
console.log(myName);
// any는 어떠한 타입도 수용합니다.
myName = 123;
console.log(myName);
myName = false;
console.log(myName);
무언가 편리한 것 같아보이지만… 이렇게 코딩한다면 사실상 자바스크립트를 사용하는 것과 별반 차이가 없게 됩니다.
하지만 any타입이 필요할 때도 있습니다. 예를들어 백엔드로부터 데이터를 받아오는데 타입을 추론할 수 없을 때와 같이 불가피하게 any타입을 사용해야 하는 경우가 아니라면 any의 사용은 지양해야 합니다.
- 유니온 타입
이러한 상황도 있을 수 있을것 같습니다.
🤔 나는 `string` 혹은 `number` 타입만 받고 싶어.이러한 상황에서는 어떻게 해야 할까요? any타입을 사용하면 될까요? 그렇게 한다면 boolean 타입 등 필요하지 않은 타입도 받아지게 되겠죠?
이럴때 사용할 수 있는 타입이 있습니다. 유니온 타입입니다.
let nameOrAge: string | number = "h662";
nameOrAge = 99;
// 이제부터는 string 혹은 number
nameOrAge = false;
유니온 타입을 사용하면 단일 타입이 아니라 좀 더 복합적으로 다양한 타입을 수용할 수 있게 됩니다.
- Array
자바스크립트에서 많이 사용한 배열도 타입스크립트에서는 타입으로 표시해주셔야 합니다.
let leaders: string[] = [
"김가형",
"김강현",
"김백기",
"박범진",
"서재민",
"이주열",
"전도현",
"조성윤",
"최균호",
"하유민",
];
// string만 담기로한 배열에는 number형 값을 담을 수 없습니다!!!
leaders[6] = 663;
배열은 어떠한 변수를 담을지 타입을 적어준 뒤string, 대괄호[] 로 배열이라는 것을 표현해주면 됩니다.
string만 담기로 약속을 했기 때문에 number는 담을 수 없다는 것을 확인할 수 있습니다.
- Object
자바스크립트는 Object의 언어입니다. 많은 것들이 전부 객체(Object)로 구성 되어 있습니다.
그 만큼 중요하다는 이야기입니다. 타입스크립트에서는 Object를 어떻게 표현하는지 살펴보도록 하겠습니다.
let myInfo: { name: string; age: number; isRich: boolean } = {
name: "h662",
age: 99,
isRich: false,
};
console.log(myInfo.name);
Object(객체)는 Key(키)와 Value(값)로 구성되어 있습니다.
타입을 표현할 때는 중괄호{} 안에 사용할 키와 값의 형태를 적어주면 됩니다.
그 외에는 자바스크립트의 객체 사용법과 동일하게 작동합니다.
- Function
타입스크립트에서는 함수에도 타입을 적어주어야 합니다.
function Add(a: number, b: number): number {
return a + b;
}
console.log(Add(1, 2));
함수는 Input 인자 값의 형태랑 Output 반환 값을 형태를 적어 주어야 합니다.
각각 함수의 소괄호 기준으로 안(Input)과 밖(Output)에 적어주시면 됩니다.
function Add(a: number, b: number): void {
console.log(a + b);
}
Add(1, 2);
반환값이 없는 형태의 함수에는 void라고 적어주시면 됩니다.
