TypeScript 설치와 타입지정

설치

1. nodejs설치
2. VScode 터미널 오픈후 npm install -g typescript

.ts 확장자인 파일하나를 생성한다.

index.ts 생성

tsconfig.json 생성

//tsconfig.json
{
    "compilerOptions": {
        "target" : "es5",
        "module" : "commonjs",
    }
}

이 파일에 대해서는 나중에 알아볼 것이다.

TypeScript 의 Type

//index.ts
let name1 = "kim";

ts파일은 브라우저가 읽을 수 없다.

ts파일을 js파일로 변환해야사용할 수 있음.

//index.ts
let name2 :string = "park";
name2 = 123

타입스크립트는 변수에 type지정을 할 수 있다. name2라는 변수에는 string만 들어올 수 있다. 따라서

name2에 number type이 들어오면 에러가 발생한다.

let arr : string[] = ['kim','park'];
let arr : string[] = [123, 'park']; //error

array는 []안에 어떤 형태의 자료형으로 구성되어있는지를 지정한 뒤 사용한다. 만약 array의 요소의 타입이 맞지 않으면 에러가 발생.

let obj : { name : string } = {name : 'park'}

object 자료형의 type은 object와 똑같이 생긴 형태로 작성해주고 안에 속성 name이 어떤 타입으로 들어올지에 대해 지정할 수 있고

let obj : { name? : string } = {name : 'park'}

name이라는 속성이 들어올 수도 있고 안 들어올 수도있을 때, 옵션으로 지정해서 ? 를 사용하면 name이 들어올 때만 string을 지정한다.

let name3 : string | number = 'park'

Union Type : 다양한 타입이 들어올 수 있게할 때는 | 기호를 써서 사용한다. name3는 string형태와 number형태로 들어올 수 있다.

type MyType = string | number;
let name4 : MyType = 123;

typescript에서는 Type도 변수에 담아서 쓸 수 있다.

type은 보통 대문자로 시작하는 변수명을 짓고 변수의 Type지정에 변수로 지정한다.

function func(x : number) : number{
    return x*2;
}

함수도 type을 지정할 수 있다. 함수의 파라미터의 type을 지정하는것도 가능하지만 return 값의 type을 지정할 수도 있다.

위의 함수는 파라미터로 number, return 값으로도 number를 리턴한다.

type Member = [number, boolean];
let john:Member = [123,true];
let john:Member = ['123',true]; //Error

array에 쓸 수 있는 tuple 타입 john의 타입이 Member이므로 john에는 첫번째 요소가 number 두 번째 요소가 boolean 값인 튜플이 들어와야한다.

type Member = {
    name : string
}

let john : Member = {
    name : 'kim'
}

object 형태의 타입지정에서 name 속성을 string으로 지정하면 string만 허용한다. 하지만 object에 타입 지정해야할 속성이 너무 많을 때는 속성을 다 지정하기 어려울 수 있다. 그럴 땐

type Member = {
    [key :string] : string, // 글자로된 모든 object 속성의 타입은 string
}

let john : Member = {
    name : 'kim',
        age : 123,
}

문자로 들어오는 object 속성들은 모두 string을 가진다는 의미를 갖는다.

class User{
    name :string ;
    constructor(name :string ){
        this.name = name;
    }
}

class 도 마찬가지로 type 지정이 가능하다.