오늘은 TypeScript에 대해서 정리해 보도록 하겠습니다.
1. TypeScript
TypeScript 는 마이크로소프트에서 개발한 언어입니다.
이를 사용하는 이유는 크게 아래의 2가지 인데요.
- Type을 정의해서 사용하여 의도하지 않는 타입의 값이 들어가는 것을 방지
- 작성하는 최신의 타입스크립트 혹은 자바스크립트를 구버전으로 변환해주는 역할
Javascript의 역할이 커진 요즘 시대에서,
첫번째의 역할도 매우 중요하기는 하지만,
두번째 역할도 매우 중요합니다.
최신 자바스크립트의 언어를 쓸 수 있게 해주기 때문입니다.
TypeScript소개 화면도 마이크로소프트의 디자인느낌이 나는데요.
대기업이 관리하는 프로젝트인 만큼 유지보수에 걱정이 없습니다.
많은 프로젝트에서 사용되고 있기도 합니다.
2. 모듈 설치
사용하기 위해서는 먼저 TypeScript의 모듈을 설치해주어야 합니다.
sudo npm install typescript --save
참고로 react를 사용하시는 분들이라면,
아래 명령어로 react를 설치할 수 있습니다.
npx create-react-app <프로젝트명> --template typescript
3. tsconfig.json
이제 모듈이 설치 되었으므로 tsconfig.json 파일을 생성해 주어서,
typescript 모듈이 컴파일해서 js파일로 변환할 때 사용할 옵션값등을 정해 줍니다.
생성방법은 프로젝트의 루트디렉토리에서 아래와 같이 입력 해주면 됩니다.
tsc --init
아래와 같은 화면들이 나오면서,
아래의 기본값으로 tsconfig.json파일이 생성됩니다.
이 파일이 있으면, Typescript프로젝트의 루트디렉토리로 인식하게 되구요.
설정 값을 참조해서 typescript 파일로 컴파일 해 줍니다.
tsconfig.json파일을 열어보면 아래와 같이 설정되어 있는데요.
원하는 값은 json 타입으로 수정해서 넣어주기만 하면 됩니다.
{
"compilerOptions": {
"target": "es2016"
"module": "commonjs"
"strict": "true"
"esModuleInterop": "true"
"skipLibCheck": "true"
"forceConsistentCasingInFileNames": "true"
}
}
여기서 설정할 수 있는 옵션은 정말 다양한데요.
이 중 자주 사용할 만한 것들은 다음과 같은 것들이 있습니다.
| 구분 | 내용 |
| target | ts를 js로 변환하면서 어떤 버전의 자바스크립트로 컴파일할 것인지를 정합니다. 모던자바스크립트의 시작인 es5(es2016) 로 설정하는 경우가 많습니다. |
| module | NodeJS에서 사용하는 commonjs 모듈 방식을 사용할지, react에서 사용하는 esnext 를 사용할지를 정합니다. 서버에서 사용한다면 commonjs를, 프론트엔드에서 사용한다면 esnext를 사용해 줍니다. 모듈을 export, import하는 방식에 대한 정의입니다. |
| strict | typecheck 옵션을 모두 켜 주는 것 입니다. 타입스크립트의 꼼꼼한 타입체크나 기타 옵션들을 사용하고자 한다면, strict를 true로 설정해 주면 됩니다. |
| noImplicitAny | 의도하지 않은 any타입으로 추론 될 경우 에러를 발생시킴 typescript를 사용한다면 반드시 켜 두어야 합니다. typecheck옵션의 하나로서 strict가 true일 경우 true로 설정됩니다. |
| strictNullChecks | null 과 undefined가 사용되지 않아야 할 곳에 사용되면 에러가 발생됨 예> let a: string = null // 에러 const b: string | null = null //정상 null일 수 있는 것은, null체크를 거쳐서 작성해야 함 이 옵션도, typecheck옵션의 하나로서 strict가 true일 경우 true로 설정됩니다. |
참고로 typecheck 옵션은 아래와 같습니다.
strict를 true로 하면 모두 true가 되구요.
만약 strict를 false로 하고 몇가지만 true로 해 줄 수도 있습니다.
개발팀의 결정에 따라서 유연하게 설정할 수 있겠지요.
strict를 false로 하더라도,
noImplicitAny와 strictNullChecks 정도는 반드시 하시는 것을 추천드립니다.
설정할 수 있는 다양한 값들에 대한 공식문서는 아래링크에서 볼 수 있습니다.
>> https://www.typescriptlang.org/tsconfig
4. Typescript 파일 생성
4-1. 확장자명
이제 본격적으로 파일을 만들고 코딩을 할 준비를 할 텐데요.
TypeScript파일은 ts를 확장자명으로 가집니다.
예를 들어서, "index.ts"와 같이 작업할 파일을 생성해 줍니다.
4-2. Javascript 파일로 변환
타입스크립트 파일은 Javascript로 변환해서 사용해야 하는데요.
이 때 사용하는 것이 tsc 명령어입니다.
위에서 tsconfig.json 파일을 생성할 때 써 보았었는데요.
tsc명령어는 tsconfig.json 에 정의된 것을 참고해서 JS파일로 컴파일해 줍니다.
이렇게 컴파일을 할 때는 아래와 같은 명령어로 할수도 있구요.
실시간으로 컴파일러를 켜놓고 바로바로 js파일로 변환되도록 할 수도 있습니다.
매번 입력한다는 것은 너무나 불편하므로,
아래 명령어를 실행해서 자동으로 변환되도록 해 줍니다.
tsc -w
실행하면 아래와 같이 watching을 하면서 계속 변환을 해 줍니다.
이제 모듈 설치 및 파일 생성이 끝났네요.
본격적으로 typescript에 대해서 알아보도록 하겠습니다.
5. Types
먼저 Typescript에서 사용할 수 있는 타입들에 대해서 정리해 보겠습니다.
5-1. Primitive Types
typescript는 원시타입으로 string, number, boolean을 지원합니다.
아래와 같이 변수를 선언해서 사용할 수 있습니다.
| 구분 | 내용 및 예 |
| string | let myName: string = "Alice"; |
| number | let myNum: number = 33; |
| boolean | let myBool: boolean = true; |
5-2. Array, Tuple
Array타입은 아래와 같이 선언할 수 있는데요.
Tuple은 Typescript에서 Array의 일종입니다.
Tuple을 지정하고 지정한 타입에 맞게 데이터를 넣을 수 있습니다.
| 구분 | 내용 및 예 |
| Array | let myArr: Array<number> = [1,2,3]; myArr.push(7); let yourArr: number[] = [6,7,8]; yourArr.push(9); |
| Tuple | let stringNumberPair: [string, number]; stringNumberPair = ["good", 8]; console.log(stringNumberPair[0]); |
5-3. enum타입
타입스크립트에서는 열거형 상수 데이터타입을 사용할 수 있습니다.
enum 이라는 키워드를 사용하면 되는데요.
아래와 같이 사용할 수 있습니다.
enum Color {
Blue = "blue",
White = "white"
}
enum Car {
Tesla, Hyndai, Kia
}
let myColor: string = Color.Blue;
5-4. null, undefined
null과 undefined는 아래와 같이 사용할 수 있습니다.
| 구분 | 내용 및 예 |
| null | let myNull: null = null; 하지만 null타입으로 변수를 선언하는 일은 많지 않을 것 같습니다. let maybeNull: string | null = null maybeNull = "나" |
| undefined | let myUndefined: undefined = undefined; let maybeUndefined: number | undefined = undefined; maybeUndefined = 87; |
5-5. any 타입
typescript의 특별한 타입입니다.
이 타입을 이용하면 타입을 체크하지 않습니다.
(하지만 이 타입을 쓸거면 굳이 타입스크립트를 써야하는 이유가 없을 것 같습니다.)
let myAny: any = 8;
myAny = "고고";
myAny = false;
5-6. Generic
제네릭타입을 이용해서 동적으로 타입을 이용하기 시작할 때 정의해서 사용할 수 있다.
type MyType<T> = {
name: T
}
cosnt myObj: MyType<string> = {
name: "김"
}
6. 함수선언
위의 타입종류에서 보여진 예가 변수를 선언하는 방법인데요.
함수를 선언하는 방법에 대해서 보도록 하겠습니다.
함수는 아래와 같이 인수의 타입과 반환타입을 지정할 수 있는데요.
위의 타입종류에서는 다루지 않았지만,
아무것도 return하지 않는 타입일경우 아래와 같이 void를 사용해주면 되구요.
es6의 화살표 함수도 사용할 수 있습니다.
const myFunc = (myNumber: number): void =>{
console.log(myNumber);
}
아래는 number타입을 반환하는 함수를 보여주고 있습니다.
function yourFunc(num: number): number {
return num + 3;
}
console.log(yourFunc(78));
7. 객체선언
7-1. 객체선언
객체를 선언할 때 각 속성마다 타입을 지정할 수 있습니다.
아래에서는 객체의 변수를 선언하면서 미리 타입을 정하고 있습니다.
let myObj: {num: number, str: string, bool: boolean};
myObj = {
num: 80,
str: "go",
bool: true
}
console.log(myObj);
물론 아래와 같이 객체속성과 값을 같이 넣으면서 사용할 수도 있습니다.
7-2. Optional
객체 선언을 할 때는 아래와 같이 Optional로 선언할 수 있습니다.
아래 코드에서 age는 넣어도 넣지 않아도 되는 Optional 값입니다.
굳이 console.log로 출력해 보면, 값이 없을 경우, undefined가 출력됩니다.
이렇게 정의된 객체에는 Optional Chaining을 사용할 수 있는데요.
(?.)오퍼레이터를 붙여서 사용하면, null이나 undefined 이더라도,
에러를 발생시키지 않고 undefined를 반환해 줍니다.
옵셔널체이닝(?.)을 사용하였기 때문에 결과는 undefined가 된 것을 알 수 있습니다.
7-3. Type 정의
Typescript에서는 type을 정의해서 재활용할 수 있는데요.
변수에 담아서 사용할 수 있으므로 매우 유용합니다.
const myType = {
str: string;
num: number;
bool: boolean;
}
let me: myType = {
str: "김",
num: 88,
bool: false
}
const yourType = {
array: Array<number>
}
재활용도를 높이기 위해서,
파일에 타입들을 모으구요.
types같은 폴더를 만들어서 한곳에 모아서 저장하면 더욱 좋을 것 같습니다.
게다가 타입들은 아래와 같이 조합해서 사용할수도 있습니다.
"&"키워드를 사용해 주면 됩니다.
아래와 같이 타입들을 조합하여 사용할 수도 있습니다.
const superType: myType & yourType = {
str: "박",
num: 77,
bool: false,
array: [12,34]
}
이렇게 타입이나 타입과 정의된 코드는 JS로 컴파일될 때 모두 제거됩니다.
그런데 클래스를 타입에 넣어서 사용할 수도 있는데요.
이런 경우는 type에 들어간 코드가 클래스이므로 제거되지 않고 사용됩니다.
js로 컴파일된 파일을 보면 다음과 같습니다.
8. 정리
타입스크립트가 모든 에러를 컴파일 과정에서 막아주는 것은 아니지만,
특정버전의 자바스크립트로 트랜스파일해주는 것이나,
타입을 체크 혹은 그이상으로 코드에 대한 컴파일 에러를 보여준다는 면에서,
매우 훌륭한 도구인 것은 분명한 것 같습니다.
스크립트언어인 자바스크립트에서 타입스크립트만큼 훌륭한 컴파일러를 두고 사용한다는 것은,
너무나 든든한 일이라고 할 수 있겠네요.
댓글