javascript를 통해 개발을 하던 중 채용공고를 보니 대부분의 기업에서 typescript를 일정부분 또는 필수로 요구하는 곳이
많았다. 때문에 typescript를 알아보았고 정리를 해보자한다.
typescript 란?
TS는 무엇이냐? 그냥 간단한게 JS의 대용품 같은 언어라고 간단하게 보면 되겠다.
조금 더 자세히 말하자면, 정적 타입 검사자 (TypeScript: A Static Type Checker)라고 하는데
프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 말한다.
완전 다른 언어는 아니고 JS를 그대로 이용 가능한데 type 부분을 업그레이드해서 쓰는 JS 업그레이드 버전으로 보면되겠다.
JS는 dynamic typing을 제공하는 언어이기 때문에 아래의 구문이 정상적으로 동작하고 가능하다.
console.log(5 - '3'); // 2해당 코드를 보면 '3' 은 문자열이지만 숫자로 간주하고 정상적으로 계산을 해준다. 이렇게보면 좋은 것 같지만
프로젝트가 커지거나 코드가 길어질수록 자유도와 유연성은 적이 된다. (타입을 검사하는데 엄격하지 않아 문제가 발생)
물론 JS 만으로도 타입을 검사해줄 수 있지만 프로젝트 규모가 커지면 불편할 것이다. 그래서 쓰는 것이 typescript이다.
타입스크립트(TS)를 사용하게되면 위 코드의 타입을 엄격하게 검사해주는데 "숫자와 문자를 빼는 것은 이상하니 수정해주세요." 라고
알려주게된다.
사용 이유를 보다보니 가벼이 JS로도 충분히 타입을 검사할 수 있을 것 같고 굳이 TS를 사용해야 될까 싶지만,
코드가 1,000줄 ~ 10,000줄 된다고 생각하고 협업이나 레거시 코드를 고칠 생각을 해보니 TS는 필수라는 생각이 든다.
TS를 사용하게 되면 Type을 엄격하게 검사해주기 때문에 에러메세지의 정확도, 퀄리티가 올라간다.
떠올려보면 JS를 사용해 프로젝트를 진행할 경우 에러메세지가 추상적이고 추적이 어려운 경우가 있어서
살피는데 고생했던 기억이 있다. 때문에 TS를 사용해야 될 또 다른 이유라 생각된다. (TS는 오타 교정도 해준다.)
typescript를 코드 에디터 부가기능 역할로 봐도 될 듯 싶다. 왜냐하면 type을 지정하고 이후 사용하는 것은 JS와 동일하다고
보여지기 때문이다.
typescript 설치
$npm install -g typescript
1. 설치 후 코드를 작성할 파일을 생성한다. (index.ts)
2. tsconfig.json 파일 생성 ()
{
"compilerOptions" : {
"target": "es5", // JS 버전 설정, esnext(최신 JS 문법), es6(최신)
"module": "commonjs", // import 방식
}
}TS 를 JS로 컴파일하는 과정에 필요한 설정을 tsconfig.json을 통해 하게된다. (TS -> JS, 컴파일 시 옵션 설정 가능 )
코드를 작성하다보면 TS 파일은 브라우저에서 인식을 못한다. 때문에 터미널에 아래의 명령어를 쳐준다.
$tsc -w이렇게 치면 무언가 실행이 되는데 끄지만 않으면 브라우저에서 JS 파일로 읽는다. (index.js 파일도 생성된다.)
JS 파일로 변환하는 과정을 "컴파일한다" 라고 한다.
typescript 작성 방법
1. 변수 타입 지정
// javascript
let name = "홍길동";
// typescript
let name :string = '홍길동'; // string type
// name 변수는 이제 문자만 들어올 수 있다.
// name 변수에 숫자가 들어가면 에러 발생
// 간단한 변수 타입 지정 가능
let variable :string = 'string';
let variable :number = 123;
let variable :boolean = true; // or false
let variable :null = null;
let variable :undefined = undefined;
let variable :bigint = bigint;
let variable :[] = []; // array
let variable :{} = {}; // object
let variable :string[] = ['ko', 'hong', 'kim']; // string in array
let variable :{ name: string } = { name: 'kim' }; // string in object
// name이 들어올수도 있고 아닐수도 있다, 에러 내지 말아라
let variable :{ name?: string } = { name: 'kim' };
// 문자가 들어올수도 있고 숫자가 들어올수도 있다
let name :string | number = 'kim';
// 문자가 담긴 array가 들어올수도 있고, 숫자가 들어올수도 있다
let name :string[] | number = 123;
let name :string[] | number = [1, 2, 3, 4, 5];
// 타입을 변수로 지정도 가능하다
type MyType = string | number; // type 변수는 보통 대문자로 만든다
let name :myType = 'hong';
...2. 함수 타입 지정
// 1. 받아오는 매개변수의 타입을 지정
// 2. return 되는 값의 타입을 지정
function func(x :number) :number {
return x * 2;
} // 이 함수는 무조건 number 타입의 매개변수가 들어와야하고, number 타입이 return 되야한다.
func('string'); // error 발생
func(7); // 정상 작동3. array에 쓸 수 있는 tuple 타입
// 무조건 0번 째 인덱스는 number, 1번 째 인덱스는 boolean
type Member = [number, boolean];
let john :Member = [23, true];4. object에 타입 지정해야 할 속성이 너무 많으면
type Member = {
[key: string] :string, // [모든 object 속성]
} // 문자로 들어온 object 속성은 전부 string을 가져야한다.
let john :Member = { name: 'hong', age: '23'}; // 정상 작동5. class 타입 지정 가능
class User {
name :string; // 변수의 타입 지정
constructor(name :string) { // 받아오는 매개변수의 타입 지정
this.name = name;
}
}
전체적인 문법은 JS와 같다. 그러나 type 지정하는 문법만 다를 뿐이다.
코드를 짜다보면 typescript에서 지켜야할 코딩 룰도 있고 타입문법 외의 기능도 많다.
문법만 익히는 것과 실제 코드를 짜는 것은 다를 것이다. 실제로 작성하는 코드에 적용하면서 익히는 것이 좋다.