HJ's WEB Dev BLOG

🎈 함수의 옵셔널 파라미터

function log(a: string, b?:string) {

}
log('hello world');
log('hello ts', 'abc');

함수의 옵셔널 파라미터란 해당 값에 ? 물음표를 넣어주면 파라미터에 속한 인자값과 출력되는 값이 비례하지 않아도 된다. 위 코드처럼 log를 두 줄 넣었을 때 첫번째 log는 출력되는 값이 1개 일 때 function log(a:string, b?:string) 여기 b에 물음표가 없으면 첫번째 log에 빨간 에러 표시가 생긴다. 이걸 바로 함수의 옵셔널 파라미터(선택적 파라미터)라고 부른다.

👩🏻 이 쯤되면 눈치 챘을텐데 타입스크립트의 포인트는 코드를 작성할 때 원래 사용하던 자바스크립트의 타입을 좀 더 정확하게 명시적으로 나타내주는 것이다. 그래서 타이핑이 필요하다. 타이핑이란 타입이 정의되지 않은 코드에 타입을 입혀주는 행위이다.

🎈 TS를 편리하게 코딩할 수 있도록 JSON파일 생성

[tsconfig.json]

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noImplicitAny": true
  },
  "include": ["./src/**/*"]
}

여기서 "noImplicitAny": true 이것은 함수 타입을 any라도 지정해주어라 라는 뜻이다.

🎈 자주 사용하는 변수 & 함수의 타입 정의

예시

💛TS문자열
let str: string = 'hello';

💛TS숫자
let num: number = 10;

💛TS배열
let arr: Array<number> = [1,2,3];
//Array는 다른 타입과 다르게 첫 글자가 대문자여야 된다.
//<>괄호에는 어떤 타입만 들어올 수 있는지 선언해주기

let heroes: Array<string> = ['Capt', 'Thor', 'Hulk', 10];
//만약 이렇게 문자열 타입으로 선언했는데 숫자 10이 들어오면 빨간 줄로 에러표시가 생긴다.

let items: number[] = [1,2,3];
// [] 이거는 배열 리터럴이란 뜻이다. []괄호 앞에 number라는 타입을 지정해주기

💛TS 튜플
let address01: [string, number] = ['gangnam', 100];
// 배열의 각각 인덱스에 타입이 정의되어 있다.

💛Object
let obj : object = {};
let person01: object = {
  name: 'capt',
  age: 100
}
//객체 속성은 어떤 타입이 들어오던 크게 신경 쓰지 않는다.

let person: { name: string, age: number } = {
  name: 'thor',
  age: 1000
}
// 각 인자마다 타입을 지정해주면, 이렇게 객체 함수를 나타낼 수도 있다.

💛boolean 진위값
let show: boolean = true;

🎈 문자열 선언방식 + 함수에 타입을 정의하는 방식

👉🏻일반 JS 문자열 선언방식
var str = 'hello';

👉🏻TS 문자열 선언방식
let str: string = 'hello';

// -------------------------------
// 함수에 타입을 정의하는 방식

💛JS
function sum(a, b) {
  return a + b;
}

sum(10, 20, 30, 40, 50);

💛TS
function sum3(a: number, b: number): number {
  return a + b;
}

sum(10, 20, 30, 40, 50);

JS의 경우 파라미터 값이 2개여도 30,40,50은 자동으로 유연하게 무시해준다. 하지만 TS의 경우 30, 40, 50에 에러밑줄이 생기는데, 이유는 TS가 JS에 비해 파라미터를 엄격하게 체크해주기 때문이다. 만약 인자 갯수보다 sum 파라미터 인자 갯수가 적을 경우에도 에러가 난다. 무조건 파라미터 인자 갯수와 리턴되는 인자 갯수가 비례해야 된다.

🎈 타입스크립트 시작하기

1. 노드 버전을 설치해야한다 (버전 10이상)
2. 타입스크립트 라이브러리를 설치해준다 $npm i typescript -g
3. 타입스크립트의 파일을 js파일로 변환해준다. $tsc [변환할 ts 파일명]

이 과정까지 하고 나면 같은 폴더 경로 안에 index.ts가 index.js라는 파일로 변환되어 나타난다. 하지만 매번 tsc라는 명령어를 통해 귀찮게 파일을 컴파일 시켜줄 수 없으니 웹팩 또는 걸프같은 모듈 번들러를 사용해서 자동화 시켜주면 효율적이고 좋다. 추후에 웹팩 반드시 공부하기!

[index.ts] 파일 생성하여 아래와 같은 코드 입력하기

```
function sum(a: number, b: number) : number {
  return a + b;
}

sum(10, 20);
```

이런 코드가 index.ts 라는 확장자 파일에 담겨있을 때 브라우저로 인식할 수 있도록 컴파일 해주어야 한다. 여기서 말하는 컴파일이란 ( ts => js)로 변환해주는 과정을 뜻한다.

🎈 타입스크립트 환경세팅 속성 알아보기

https://www.typescriptlang.org/tools

이 사이트에 들어가서 TSConfig Reference 라는 페이지에 들어가면 tsconfig.json 파일에 환경 세팅 해줄 속성들이 많이 나오니, 필요한 속성들을 이 공식문서를 보고 찾아서 사용하면 된다.

🎈 타입스크립트 플레이 그라운드 소개

ts식 코드를 쳤는데 오른쪽에는 js로 컴파일 된 코드들을 확인 가능하다. 바벨도 자바스크립트의 최신 문법을 많은 브라우저에서 호환 될 수 있게 해주는 도구이다.