타입 스크립트

Freesian·2023년 1월 18일
0

기존 자바스크립트는 자동으로 변수의 타입을 잡아주는 기능(any)이 있는데
이 부분이 어떻게보면 사용자에게는 굉장히 편리한 기능이지만
큰 프로젝트 같은경우에는 이 기능이 단점으로 작용 할 수 있다는 것이다.

그걸 보완하기 위해 나온 타입스크립트 , 마이크로 소프트 사에서 개발하고
아직까지도 업데이트가 활발히 진행중이다.

타입 스크립트의 큰 특징은 뭐냐면 기존 자바스크립트 문법에
'type'을 정해주는것.

예를 들어,

기존 자바스크립트 같은 경우는

let name = 'freesian'

이런 식으로 해도 무방하고 문자열이던 객체던 숫자던 name이라는 변수에
할당이 가능했다.

하지만 타입스크립트의 목적은 타입을 정하고 사용하자 라는것!
let name : string = 'freesian'
기존 js의 모양을 그대로 가져와 변수앞에 앞으로 변수가 받을 수 있는
타입(형)을 정하는 것이다.

변수의 타입을 정하는 방식이다.
크게보면 2가지 정도가 있다

1. 변수에 직접 타입을 작성한다.

타입 종류
1. string : 문자열
2. number : 숫자
3. boolean : 진실 혹은 거짓
4. [] : 배열 , Array 로 가능
5. {} : object
6. type alias : 이건 아래에 적어놓음
7. union : 형이 두개 이상, 아래에 적어놓음
8. any : 타입실드해제, 형이 정해지지 않을때 사용하는데 쓰지마셈
9. unknown : any와 같은 기능이지만 이걸 쓰셈 이유는 아래에

<일반형>

let name :string = 'freesian';
let age : number = 30;

<객체 : obejct>

let maratang : {name : string , price : number} = { name : '라복궁 마라탕' price:7000}
// 근데 이거 좀 긴것 같다. 아래로 바꿀수 있다.
let maratang : {[key:string] : string | number} = { name : '라복궁 마라탕' price:7000}
// 키 값은 모조리 string으로 타입을 잡고 그 이후에 value 값들은
//string 또는 number 타입 (union 타입)

tip> 
let maratang : {name? : string , price : number} = { name : '라복궁 마라탕' price:7000}

//name 앞에 ? 가 붙어있는데 이 의미는 들어올수 있고~ 안 들어올수 있다 라는 뜻. 
//바꿔서 쓰면 이렇게 쓸 수 있다
// name : string | undefined

<객체 : Array>

let freesian : string[] = ['김우상','개발자','마라탕러버']
// 만약 number형인 나이를 추가 할려고 하면 에러가 날 것이다. 
//왜냐하면 저 배열은 string 타입에 배열이기 때문,

let freesian : (string|number)[] = ['김우상',30,'개발자','마라탕러버']

2. type alias

<type alias : 타입 별칭 이라고 하는데 와닿는 단어가 아니라 그냥 타입 변수라고 할 예정>

1)

type Name = string // 이렇게 타입을 생성한다, 타입 변수의 이름  앞글자는 대문자로 약속함
let name:Name = 'freesian' // 해당하는 변수 앞에 넣는다

2) type Name = string | number // 이렇게 타입을 생성한다, 이 의미는 string 타입 일수 도 있고, number 일수도 있다.
이런걸 union type 이라고 한다.
이렇게 타입이 2개 이상인 경우에는 Narrowing을 사용해서
타입이 string 이 들어올때, number가 들어올때 각각 처리해주는 코드를 짜면 된다.

3.함수에 타입 설정

매개변수의 타입과 그리고 리턴값의 타입.
매개변수와 리턴값의 타입을 그대로를 가져와 사용 가능함.
하지만 리턴값이 "없는" 경우가 있음
그럴땐 void를 사용하면 된다.

function levelOfMaratang (level : number // 매개값의 타입설정) : number // 리턴값의 타입설정 {
	return level;
}

그리고 함수에도 type alias를 사용 할 수 있다.

type Levels = (level : number // 매개값 타입) => number // 리턴타입

//function 함수이름 : type alias (){} 이렇게는 안됨

let levelOfMaratang :Levels  = (level) => { return level}

그리고 앞으론 타입 스크립트를 쓸때
함수명과 매개값의 순서, 매개값의 타입 을 무!조!건! 맞춰야지만 함수를 호출 할 수 있다.
이거 진짜 매번 헷갈렸는데 타입쓰면서 이부분이 개선되어 넘 죠탕.

profile
prompt('마라탕 몇 단계요?');

0개의 댓글