[TS] 1. 타입스크립트 시작하기

타입스크립트란?

자바스크립트에 타입을 부여한 언어. 실행하기 위해 컴파일이 필요함

왜 써야할까?

→ 자바스크립트에 타입이 있으면 무엇이 좋을까

function sum(a,b){
    return a+b;
}
sum(10,'20'); //1020 (not 30)

자바스크립트에서는 의도하지 않은 인자의 전달도 실행돼 시스템의 오류를 일으킬 수 있음

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

result = sum(10, '22'); // error

result = sum(10, 22);
result.toLocaleString();

타입스크립트로 타입을 명시해주면 경고, 에러가 발생해 이를 방지할 수 있음

1. 사전방지
2. 결과물이 제공하는 api를 바로 볼 수 있음 (자동완성 및 타입에 맞는 메서드 추천 기능) → typescript intellisense

---

타입스크립트 프로젝트 시작하는 방법

npm i typescript -g 설치

터미널에서 tsc <typescript 파일.ts> 하면 js 파일 생성됨

타입스크립트 설정파일

실제 타입스크립트를 쓸 때는 매번 설정을 하는 등의 불필요한 소요를 줄이기 위해 webpack 설정 등을 해주는게 좋음!

tsconfig.json 생성 예시

{
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "noImplicitAny": true
    }
}

(noImplicitAny: 모든 타입에 대해서 최소 any 타입이라도 설정해주어야함)

TSConfig Reference - Docs on every TSConfig option

tsconfig reference 문서

---

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

타입스크립트 파일을 tsc 변환했을 때 결과를 미리 볼 수 있음

바벨의 js 변환 결과를 알려주는 것처럼

TS Playground - An online editor for exploring TypeScript and JavaScript

Babel · The compiler for next generation JavaScript

 

기본 타입

// var str = 'hello';
const str: string = "hello";
let num: number = 10;
let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ["captain", "thor", "hulk"];
let items: number[] = [1, 2, 3];

let address: [string, number] = ["gangnam", 100];
let obj: object = {};
// let person: object = {
//     name: 'capt',
//     age: 100
// };
let person: { name: string; age: number } = {
  name: "capt",
  age: 100,
};

let show: boolean = true;

함수 타입

// 함수에 타입을 정의하는 방식
function sum(a: number, b: number): number {
  return a + b;
}

sum(10, 20, 30, 40); // 2개의 인수가 필요한데 4개를 가져왔습니다.ts(2554) 

// 함수의 옵셔널 파라미터
function log(a: string, b?: string) {}
log("hello");
log("hello ts", "abc");