즐겨보던 코딩유튜브에서 타입스크립트 얘기가 많이나와서 그동안 궁금했었는데 이왕 코딩 맘먹고 배우는 김에 배워보자, 하고 인프런 강의를 결제했다.
자바스크립트만 알면 배우는데 크게 어렵지 않고 기존 자바스크립트보다 더 명확해서 회사에서도 쓸수 있는 사람을 더 선호한단다. 제대로 배워서 한달도 안남은 프로젝트에서 써먹을 수 있기를 바라며,, 블로그 작성해본다 ㅋㅎㅋㅎ

Achievement goals

🧩 타입스크립트 설정

• 타입스크립트 공식문서 : Playground

🧩 타입스크립트 변수/함수타입

• string / number / array / object / function

🧩 필수 extension

1. ESLint

2. TSLint

타입스크립트에서 필수로 사용되는 익스텐션이니 설치한다.

1.Getting Start

리액트를 구동하거나, 노드환경에서 명령어 칠때 npm , npx 를 사용했듯이, 타입스크립트에서는 tsc 라는 명령어를 사용한다.
tsc 명령어를 사용하기 위해 typescript 적용할 폴더에서 터미널 열고

npm i typescript -g 

명령어로 설치한다.
설치 한 후 tsc index.ts 를 치면 index.js 파일이 생긴다.
타입스크립트 작성할 파일명은 .ts 로 정해준다.

🧐 js 파일에서도 타입스크립트처럼 사용할수 있을까?

// @ts-check 

일반 js 파일에 위의 코드를 주석처리 하여 작성하면
타입스크립트 코드를 사용할 수 있다.

/**
 * 
 * @param {number} a 첫번째 숫자
 * @param {number} b 두번째 숫자
 * @returns 
 */

function sum(a,b){
  return a+b;
}
sum(10,'20')

위의 사진에서 함수의 첫번째, 두번째 매개변수 모두 number 타입으로 지정했다.
기존의 보통 자바스크립트 파일이었다면 오류처리가 되지 않았겠지만
타입스크립트처럼 처리해주어서 js 파일에서도 오류가 뜨게되고, 그 오류에 대한 명확한 이유가 나온다.

*하지만 매번 저런식으로 작성할 순 없어서 실제로는 웹팩을 많이 쓴다고 한다.

🧩 타입스크립트 변수/함수타입

기본적인 타입에 대해 알아보도록 하겠다.

1. String

let str = 'hello'; //-> js 형식
let str:string = 'hello';// -> ts 형식

2. Number

let num = 3; //-> js 형식
let num:number = 3; //-> ts 형식

3. Array

배열형태는 배열의 타입, 배열의 요소타입 전부 지정해 두어야 하며 여기에는
두가지 표기법이 있다.

3-1 Array<요소 타입> 방식

let arr = [1,2,3] //-> js 형식
let arr:Array<number> = [1,2,3]; //-> ts 형식
let heroes:Array<string> = ['capt','thor','hulk',3] //-> ts 형식

3-2 요소타입[] 방식

let items = [1,2,3]; //-> js 형식
let items : number[] = [1,2,3]; //-> ts 형식

4. 튜플

배열요소의 특정 순서, 즉 인덱스까지 정확하게 타입을 정하는 것을 튜플이라고 한다.

let address:[string,number] = ['gangnam',10];

5. Object

let obj = {}//-> js 형식
let obj:object = {};//-> ts 형식
/*let person : object = {
  name:'capt',
  age : 100
};*/
let person : {name:string,age:number} ={
  name:'thor',
  age:3000
} //-> ts 형식

6. Boolean

let isShow = true;//-> js 형식
let isShow:boolean = true;//-> ts 형식

7. function

7-1 함수의 파라미터에 타입을 정의하는 방식

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

7-2 함수의 반환 값에 타입을 정의하는 방식

function add() : number{
  return 10;
}

7-3 함수에 타입을 정의하는 방식 : js 와 다르게 유연하지않고 명확하다.

-> 파라미터의 갯수, 타입에 맞게 쓰지않으면 오류가 난다.

function sum2(a:number,b:number):number{
  return a+b;
}
sum2(1,2,3,4,5); //3;

설명이 따로 필요없을 정도로 오류의 이유가 너무나도 명확하게 나온다.

7-4 함수의 옵셔널 파라미터(선택적)

-> 물음표(?) 를 사용하여 선택적으로 쓰거나말거나 선택하도록 한다.

function log(a:string,b:string,c?:string){
  
}
log('hello wolrd');
log('hello ts','abc');

위 함수에서는 c 부분에만 물음표를 작성했기 때문에
a,b 에는 무조건 스트링형태의 인자가 와야하고 세번째는 안와도 된다.

끗~_~