New 병아리 개발자

# TypeScript 

## 타입스크립트 기초_변수와 함수 타입 정의하기

TS 문자열, 숫자, 배열은 아래와 같이 선언.

1. 문자열
// JS 문자열 선언
var str1 = 'hello';

// TS 문자열 선언
// TS 사용 시 대부분 ES6 사용으므 var 보다는 let, const 사용.
let str2: string = 'hello';


2. 숫자
// TS 숫자
let num: number = 10;


3. 배열
// TS 배열
let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ['Capt', 'Thor', 10];   // tslint 설치 된 경우 변수타입에 어긋나는 경우 밑줄표시됨.
let items: number[] = [1, 2, 3];

TS 튜플, 객체, 진위값은 아래와 같이 선언.

1. 튜플
// TS 튜플 : 배열의 특정 순서(인덱스)의 타입까지 정의하는 것.
let address: [string, number]= ['gangnam', 15];

2. 객체
// TS 객체
let obj: object = {};
let person1: object = {
    name: 'capt',
    age: 100
};

let person2: { name: string, age: number } = {
    name:'capt',
    age: 150
};

3. 진위값
// TS 진위값
let show: boolean = true;

TS 함수 타입 (파라미터, 반환값)은 아래와 같이 선언.

1. 함수_파라미터 타입 정의
// 함수의 파라미터 타입을 정의.
function sum(a: number, b: number) {    // 파라미터 타입 정의.
    return a + b;
}

sum(10, 20);


2. 함수_반환 값 정의.
// 함수의 반환 값 정의.
function add(): number {    // 반환 값 정의.
    return 10;
}


3. 함수_타입 정의(기본)
// 함수에 타입을 정의.
function sum2(a: number, b: number): number {
    return a + b;
}

TS 함수 타입 (파라미터 제한하는 특성)

• 자바스크립트의 경우 아래와 같음.

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

sum(10, 20, 30, 40, 50);    // JS의 경우 정해진 인자 외에 추가로 인자를 넘길수 있음, 단 정해진 a, b만 반응.

• TS의 경우 아래와 같음.

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

sum(10, 20, 30, 40);    // TS의 경우 엄격하게 체크. (추가로 인자 넘기면 밑줄표시됨.)

TS 함수 (옵셔널 파라미터)

// 함수의 옵셔널 파라미터 (선택적 파라미터) - 옵셔널 파라미터에는 ? 사용.
function log(a: string, b?: string, c?: string) {
    
}

// 필요에 따라 다른 인자를 넘겨서 반환 받고 싶을때.
log('hello world');
log('hello ts', 'abc');

# TypeScript

## 타입스크립트 시작하기

프로젝트 시작 방법 (라이브러리설치와 TSC)

• getting-started 폴더 생성 > getting-started 폴더 하위에 index.ts 생성.

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

sum(10, 20);

• 컴파일 (Compile) : ts 파일을 js 파일로 변환하는 작업.
• index.ts 우클릭 > 터미널 열기.
• node -v : node 설치 여부 확인
• 라이브러리 설치 (노드 기반 타입스크립트 라이브러리 설치) : npm i typescript -g
• ts 파일을 js 파일로 컴파일 (입력 시 index.js 생성됨) : tsc index.ts

타입 스크립트 설정 파일

• getting-started 폴더 하위에 tsconfig.json 생성.
• tsconfig.json에 key-value 형태로 입력.

{
    "compilerOptions": {
        "allowJs" : true,
        "checkJs" : true,    // @ts-check와 동일한 역할.
        "noImplicitAny" : true	// 타입 명시 옵션(any라도 명시되도록)
    }
}

• 자세한 사항은 래퍼런스 참고. ( https://www.typescriptlang.org/tsconfig )

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

• 타입스크립트 페이지 진입 > 상단에 Playground 클릭하여 진입. ( https://www.typescriptlang.org/ )

• 왼쪽에 타입스크립트 코드 작성 시 오른쪽 화면에서 변환된 결과 확인 가능.

# TypeScript

## 개발환경 구성

• https://github.com/joshua1988/learn-typescript 

• Chrome
• Visual Studio Code
• Node.js LTS 버전 (v10.x 이상)
• Git

리포지토리 클론 및 VSCode로 폴더 열기

• 위 깃헙 접속하여 Clone, 원하는 폴더 위치에서 터미널 오픈(윈도우의 경우 cmd) 아래와 같이 입력하여 Clone 진행

C:\study>git clone https://github.com/joshua1988/learn-typescript.git

• VS Code 실행 후 Clone 해온 폴더 드래그 앤 드랍으로 실행.

VS Code 플러그인 설치 및 구성

• 왼쪽 플러그인(확장) 클릭하여 아래 플러그인 설치 진행.
• 색 테마 : Night Owl
• 파일 아이콘 테마 : Material Icon Theme
• 문법 검사 : ESLint, TSLint
• 실습 환경 보조 : Live Server
• 기타 : Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등

강의 교안

• https://joshua1988.github.io/ts/

## 타입스크립트

• 자바스크립트에 타입을 부여한 언어.
• 자바스크립트와 다르게 블라우저에서 실행하기 위해 파일을 한번 변환해줘야 한다. (컴파일)

## 타입스크립트 사용 이유.

에러의 사전 방지

/**
 * @typedef {object} address
 * @property {string} street
 * @property {string} city
*/

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
*/

/**
 * @returns {Promise<User>}
 */
function fetchUser() {
  return axios.get(url);
}

fetchUser().then(function(response){
  response.address.cit;		// 에러 사전 방지.
})

코드 자동 완성 가이드.

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

sum(10, 20);    // 30
sum(10, '20');  // 1020

• 아래와 같이 입력 타입, 반환 타입 설정 가능.
• 타입에 맞지 않는 값이 들어오는 경우 코드상에서 에러 표시 됨.
• 타입에 따라 제공되는 api 자동완성 기능 사용 가능.

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

var result = add(10, 20);
//add(10, '20');  // 정해진 타입이 아닌 경우, 코드상에서 에러 표시.

result.toLocaleString();    // 제공되는 타입에 따른 api 사용 가능.

 자바스크립트를 타입스크립트처럼 코딩하는 방법

// @ts-check

/**
 * @param {number} a 첫 번째 숫자
 * @param {number} b 두 번째 숫자
*/
function sum(a, b) {
    return a + b;
}

sum(10, 20);
sum(10, '20');  // @ts-check 설정 시 ts 사용하는 것 같은 효과 제공.