1. TypeScript 기초입문) 변수,함수,배열 사용하는 방법

요즘 프론트엔드 강의를 보면 타입스크립트를 안 쓰는 곳이 거의 없을 지경이라고 할 정도로 많이 쓴다.
Next.js 설치할 때 매번 타입스크립트 쓸 거냐는 말에 찔려 공부해서 정리할 겸 포스팅하게 되었다.

타입스크립트는 마이크로소프트에서 개발한 언어로 자바스크립트에 타입이 추가되었다고 생각하면 된다.
문자랑 숫자를 더해도 에러 안 뜨는 자바스크립트의 자유분방한 체계를 타입스크립트로 잡아주어
대규모 프로젝트에서는 코드의 구조화와 유지보수를 용이하게 할 수 있다고 한다.
나온 지는 10년이 이미 넘었고 최근에는 타입스크립트 컴파일러와 도구를 Go 언어로 포팅하여 개선했다고 하네요

 

 

1. 타입스크립트 웹 에디터

기본적인 문법을 간단히 익히거나 처음 사용하는거라면 간편하게 타입스크립트가 공식적으로 지원해 주는 것 같아 보이는? 웹 에디터 사이트가 있다. 간편해 보여서 쓰기 아주 좋아 보인다

https://www.typescriptlang.org/play/

TS Playground - An online editor for exploring TypeScript and JavaScript

2. 타입스크립트 기본 타입 종류

타입스크립트에서는 타입을 지정해서 체계를 잡아준다 

그중 많이 쓰는 타입 종류는  아래와 같다

타입	설명
number	숫자(정수,소수)
string	문자열
boolean	true/false
null	값 없는거
undefined	값이 정의 되지 않은거
any	이것 저것도 아닌 타입

any의 경우 어떤 데이터 타입이 올지 모를 때 사용한다

자바스크립트처럼 타입을 빼고 쓴다는 느낌이랄까 타입이 자주 바뀌는 경우에 any를 사용하는 것 같다

3. 변수명의 타입 지정 하는 방법

let a:number = 3
let b:string = "korea"
//타입 여러개 쓰는법
let c:number| string = 4

변수명 옆에 타입을 적어 놓으면 된다 여러 개 쓸 거면 | 작대기로 구분 지어서 나눠 코드를 작성하면 된다

변수 c처럼 하나의 변수에 여러 타입 중 하나를 허용할 수 있게 하는 것을 유니언 타입이라고 한다

 

4. 배열 사용 방법

//앞에 타입 지정[]
let e: string[] = ['apple','banan']
let arr: (string | number | boolean)[] = ['apple', 123, true]

타입이 여러 개인 경우 ()안에 |로 타입을 구분하여 작성해 줍니다

 

5. 함수에 타입 사용법

// add(3,5) 숫자를 넣었다고 가정

//올바른 예제
function add(a: number, b: number): number {
  return a + b;
}
// 맞지 않는 예제
function add(a: number, b: number): string {
  return a + b; // ❌ 에러: 숫자를 더했는데 반환 타입이 string이라고 돼 있음
}

a, b 매개변수 뒤 타입을 지정해 주고 () 뒤에 :number는 return해주는 반환값(a + b)이 number 타입인 것을 뜻 합니다

//타입 지정 여러개 
function printId(id: number | string): void {
  console.log("ID:", id);
}

파라미터의 타입을 여러 개 사용해야 된다면 유니언 타입으로 사용하면 된다

그리고 반환 값이 없는 함수의 경우 void를 작성해 주면 된다

void는 반환값없음을 뜻한다

 

--끝