Typescript #1 - install, Type
Typescript
- Javascript 위에서 구동되는 Javascript의 상위 version programming language이다.
Javascript는 다른 언어들과 다르게 data의 type을 정의하지 않아도 구현이 가능하지만 function을 만든다고 가정할 때 잘못된 arguments를 받고 잘못된 값을 반환하거나 오류를 마주쳤을 때 어디서 잘못된건지 알기 어렵다.
예를 들면 NaN과 같은 오류.
Typescript는 위와 같은 상황의 오류를 방지하기 위해 사전에 변수나 data의 type을 정의해주어 구현이 가능하게 해준다.
Install
npm install typescript
tsconfig.json
- TS는 JS의 Superset이지만 TS의 결과물을 확인하기 위해선 JS로 compile하여야 한다.
"CompilerOptions"
를 작성하여야 하는데 많은 option이 있다. 프로젝트를 진행하면서 적절한 option을 찾아 tsconfig.json에 설정해 주어야 한다.
tsc-watch
-
tsc
는 Typescript를 설치하면 compile을 도와주는 terminal 명령어이다. -
index.ts
const greeting = "Hello";
console.log(greeting);
아직 TS와 JS의 차이를 보이진 않지만 js를 node에서 확인하려면 terminal에서 node index.js
를 실행했던 것 같이 tsc index.ts
를 실행하면 tsc
가 index.ts
를 JS로 compile하여 위 console을 node에서 확인할 수 있다. tsconfig.json
에서 option을 설정해주어야 한다.
-
tsc-watch
는 node의nodemon
처럼 code의 변화를 감지하고 바로 전달해주는 역할을 한다.npm install tsc-watch --dev
-
위처럼
tsc
로 compile하게 되면tsc
는 compile을 하고 내용을 보여주면서 동시에 JS로 compile이 완료된 js 파일을 생성한다. js 파일 생성 경로는 tsconfig.json에서 설정할 수 있다.
Type
기본 type
string
number
boolean
null
undefined
array
tuple
object
enum
any
void
never
Type 정의
- variable, 변수
let variable;
JS에선 변수를 선언하면 저 변수안에 어떤 type의 값이든 다 가리킬 수 있다. TS에서도 type을 정의해주지 않으면 물론 실행은 가능하지만 그건 TS를 쓰는 의미가 없다.
let variable: string;
위처럼 변수의 type을 정의해주면 저 변수에는 string type의 값만 전달할 수 있다. 다른 type의 값이 들어가면
Type '전달한 TYPE' is not assignable to type '정의한 TYPE'
이라는 오류를 받게 된다.
- Array, 배열
let arr: number[] = [];
// 또는
let arr: Array<string>;
배열은 위처럼 type을 정의할 수 있다. 하지만 위처럼 할 경우 저 배열에는 하나의 type만 들어갈 수 있기 때문에 만약 다른 type의 값이 들어가야 하는 경우
Tuple
로 정의할 수 있다.
let arr: [string, number];
- Any
let anyType: any;
Type을 any
라고 정의해 주는 경우 이 변수에는 어떤 유형의 data든 다 받을 수 있다.
- function parameter, 함수 매개 변수
const func = (num, str) => {
console.log(num);
console.log(str);
console.log(num + str);
};
console.log(func(24, 34)); // 58;
숫자와 문자를 인자로 받고 그 인자와 인자의 합을 console에서 확인하려는 함수이다. JS에서는 문자 인자로 숫자가 들어왔음에도 실행되는걸 확인할 수 있다. 위에서 말한 잘못들어온 data인데도 JS에선 실행이되어 예상과는 다른 결과물을 볼수 있다는 오류로 잘 작성하진 못했지만 극단적인 예시이다.
TS에서는 위와같은 오류를 방지하기 위해 함수의 매개 변수의 type을 미리 정의해주어 해당 type의 인자만 받을 수 있다. 잘못된 type의 data가 들어오면 당연히 위 변수와 같이 type 오류가 발생한다.
const func = (num: number, str: string) => {
console.log(num);
console.log(str);
console.log(num + str);
}
console.log(func(24, 34)); // error!!
따라서 잘못된 인자를 받았을 경우 잘못된 결과물을 받는 것이 아니라 error를 발생시켜 어디서 잘못됐는지 JS보다 수월하게 확인할 수 있다.
또한 함수의 반환 값도 미리 type을 정의할 수 있다.
const func = (num: number): number => {
return num;
};
함수 매개 변수 뒤에 : number
라고 정의하면 이 함수는 숫자만 반환해야 한다. 위와 같은 경우 그럴일 없겠지만 숫자가 아닌 값을 반환할 경우 당연히 error!!
일반적이진 않지만 반환 값이 없어야 하는 함수의 경우 void
라고 type을 정의해주면 된다.
Reference
https://www.typescriptlang.org/docs/handbook/basic-types.html
Author And Source
이 문제에 관하여(Typescript #1 - install, Type), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@fstone/Typescript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)