[Typescript] 타입스크립트 사용 이유 & 필수 문법

타입스크립트란?

 

- MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어

 

- 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 지원함

 

- 정적 타입 언어(static type language)이기 때문에 컴파일 시 시간이 조금 걸리더라도

  안정성을 보장함.

 

 

타입스크립트는 자바스크립트보다 상위호환

 

특징

- 웹 브라우저에서는 타입스크립트를 인식할 수 없으므로 자바스크립트로 변환하는 과정이 필요함

 

- 변수명에 콜론(:)을 쓰고 자료형을 지정함 => let myValue :string

 

- 자료형은 아래와 같이 가능함

  : any, string, number, boolean, null, undefined, bigint, [], {} 등

 

사용 이유

- 코드 유연성이 높은 자바스크립트의 경우 규모가 큰 프로젝트에선
  문제 발생 가능성이 큼

 

- 변수의 자료형을 체크하므로 에러 메시지가 정확해짐 

 

 

* 코드 유연성?

: 자바스크립트는 Dynamic Typing 이 가능함, 예로 5 - '3' 같은 수식은
숫자와 문자를 연산했으므로 에러가 발생해야 하지만 문자인 '3' 을 숫자로 해석해
연산을 처리함, 프로젝트 규모가 커지면 이러한 것들은 문제가 될 수 있음

 

설치 및 사용방법

1. 최신 버전의 node.js 설치

2. Visual Code - 터미널 - 새 터미널

3. npm install -g typescript

4. [파일명].ts 로 새 파일 생성

5. 터미널에 tsc -w 입력 (작성한 .ts 파일을 .js 파일로 실시간 변환)

 

기본 예제

let myValue1 :string = 'Hello TS'  // 문자만 담는 변수
let myValue2 :string[] = ['Hello TS'] // 문자열만 존재하는 배열
let myValue3 :number[] = [123] // 숫자만 존재하는 배열
let myValue4 :{ name : string } =
{ 
    name : 'Mighty Otter'
} // Key는 name, Value는 string 형식을 가진 오브젝트만 담는 변수


 let myValue5 :{ name : string } =
{
    name : 'Mighty Otter',
    age : 255
} // 지정한 형식과 어긋나므로 에러 출력(오브젝트에 name 만 있는 형태로 지정되어있음)


let myValue6_1 :{ name? : string, age? : number } =
{ 
    name : 'Mighty Otter',
    age : 10
} 
let myValue6_2 :{ name? : string, age? : number } = { name : 'Mighty Otter' } 
let myValue6_3 :{ name? : string, age? : number } = { age : 10 }
let myValue6_4 :{ name? : string, age? : number } = {}
// '?' 는 해당 키가 있을수도 있고 없을 수도 있을 때 사용
 
 
let myValue7_1 : string | number = 26;
let myValue7_2 : string | number | null = "wan9s";
// '|' 는 변수에 여러 자료형을 지정할 때 사용


type myCustomType = string[] | number | {name:string, age:number};
let myValue8 :myCustomType;
// 변수에 지정할 자료형이 많은 경우 type 변수를 따로 선언하여 사용 가능 (Type Alias)


function myFunc(x?: number) :string {
    return '0'
}
// 함수의 파라미터 및 반환값에도 타입을 지정할 수 있음


type itemTypeA = [number, string, boolean];
let myValue9 :itemTypeA = [0, '수달', true]
// 배열의 특정 부분에만 타입 지정이 가능함 (Tuple 타입)


type itemTypeB = {
    [key :string] : number,
}
let myValue10 :itemTypeB =
{
    'Apple' : 14,
    'Banana': 22,
    'Carrot': 9
}
// string 값을 가진 모든 속성을 허용함 
// '[key :string]' = 모든 Object 속성


class Otter{
    name :string;
    constructor(name :string){
        this.name = name;
    }
}
// 클래스에서도 타입 지정이 가능함

 

참고

https://www.typescriptlang.org/

https://www.youtube.com/watch?v=xkpcNolC270