[타입스크립트] ts 시작하기, 필수 문법 정리

 

자바스크립트는 동적언어다.
즉, 런타임(실행될 때)에 타입이 결정되며 오류를 발견한다.

 

 

타입스크립트는 엄근진한 정적언어다.

 

그러나 타입스크립트는 정적언어다.
즉, 컴파일(컴퓨터 또는 다른 언어가 읽을 수 있는 언어로 변환) 될 때 타입이 결정되며 오류를 발견한다.

 

 

 

0. 타입스크립트

typescript 란 다이나믹하게 이래도되고 저래도되는 망나니 javascript를 엄격하게 관리하는 일종의 에디터다.

모든 데이터의 타입을 정하여 타입 언매치로 발생하는 오류나 예상밖의 결과값을 예방할 수 있다.

 

 

 

1. node.js 설치 

https://nodejs.org/ko

Node.js

 

 

 

2. vscode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

 

3. 터미널에서 타입스크립트 설치

npm i -g typescript

📌 용어 정리

1) npm : Node Package Manager (자바스크립트의 런타임 환경인 node.js의 패키지를 관리자)

2) i : install 의 약자

3) -g : 글로벌 설치 (전역 설치)

 

 

 

 

4. 주의사항

1) js 파일이 아닌 ts 파일에 작성한다.

2) 웹 브라우저는 ts 파일을 읽지 못하니 꼭 js 파일로 변환해줘야한다.

* 터미널에 아래 명령어 입력시 자동으로 변환

tsc -w 

* -w : watch 의 약자

 

3) ts 사용시 꼭 tsconfig.json 파일을 생성하고 그 안에 ts에서 js로 컴파일시 옵션을 작성해줘야 한다.

{

    "compilerOptions": {

        "target": "ES5",

        "module": "CommonJS"

    }

}

 

 

 

5. 필수 문법 맛보기

const vari :string = "okok" // 이 변수는 문자만 가능

const vari2 :string | number = 123 // 이 변수는 숫자 || 문자 다됨

type CustomType = string | number // 타입을 커스텀할 수 있음 (보통 대문자로 시작)

const vari3 :CustomType = 123;

const arr :string[] = ["kim", "lee"] // 이 배열은 문자만 됨

const arr2 :CustomType[] = ["park", 123] // 커스텀 적용

const arr3 :(string | number)[] = ["kim", 123] // 두가지 타입 묶어도 됨

// 객체도 프로퍼티 하나하나 타입 지정 가능

const obj :{

    id: number,

    name: CustomType,

    age: number,

    skill?: string, // '?' 이 프로퍼티는 옵션 = 있을 수도 있고 없을 수도 있음

    isdone: boolean

    } = {

        id: 1,

        name: "kim",

        age: 10,

        isdone: true

    }

 

 

// 인터페이스로 커스텀할 수 있음 (여기 있는 속성은 다 포함되어야 함. 옵션(?) 제외)

type Score = "A" | "B" | "C" | "F" // Score 타입은 이 4가지 문자만 올 수 있음.

interface Member1 {

    readonly id: number, // 추후 변경 불가능

    name: CustomType,

    age: number,

    skill?: string,

    isdone: boolean,

    [grade: number] : Score; // 여기서 grade는 개발자가 인식하기 위한 것으로 아무거나 써도 됨

}

const obj2 :Member1 = {

    id: 2,

    name: "josh",

    age: 3,

    isdone: true,

    1: "A",

    2: "B"

}

// 함수의 파라미터에 타입 정하려면 () 안에,

// 리턴 값의 타입을 지정하려면 ()과 {} 사이에 지정

function func(x :number):number{

    return x * 2

}

함수에서 리턴 값 없이 그냥 기능만 있다면 func():void  //이렇게 보이드로 설정하면 됨.

// array에 쓸 수 있는 tuple 타입, []로 감쌈.

// 무조건 어레이 첫번째는 숫자, 두번째는 불리언이 와야함

type Member = [number, boolean];

const user1 :Member = [123, false]

// 싸잡아 타입정하기

// 키값이 문자인 모든 경우, 벨류는 문자거나 숫자이다.

type Member2 = {

    [key :string] : string | number

}

// 겹치는 경우는?

// 따로 타입 정한 것이 우선

type Member3 = {

    [key :string] : string | number

    age: number

}

const josh :Member3 = {

    name: "josh",

    age: "123" // 오류!!

}

 

 

// 인터페이스 and, or 로 중복 시키기

// 1. or 두가지에 걸쳐두고 상황에따라 필요한 걸 쓰는 (Union Type)

interface Ainter {

    id: 1,

    name: string,

    age: number,

    say(): void

}

interface Binter {

    id: 2,

    name: string,

    color: boolean

}

const getSome = (element :Ainter | Binter) => {

   

    // 겹치는건 그냥 써도 됨

    console.log(element.name)

    // 안겹치는건 조건을 걸어서 특정해줘야 함.

    if(element.id === 1){

        element.say();

    }else{

        console.log(element.color)

    }

}

// 2. and 교차 타입 (Intersection Types)

// 만약 A,Binter 처럼 고유한 id 값이 부여되어 있다면 겹칠 수 없음.

    interface Cinter {

        id: number,

        name: string,

        age: number,

        say(): void

    }

    interface Dinter {

        id: number,

        name: string,

        color: boolean

    }

    // 두 인터페이스 속성을 모두 넣어줘야 함.

    const aandb : Cinter & Dinter = {

        id: 2,

        name: "coll",

        age: 23,

        color: true,

        say(){console.log("hello")}

    }

 

 

 

6. 간단하게 실습할 수 있는 곳

https://www.typescriptlang.org/

JavaScript With Syntax For Types.