코딩애플 보고 정리한 TypeScript 기본 문법

사수님께서 이번 프로젝트는 next.js와 타입스크립트를 사용해볼거라고 하셨다.

그게 뭔데...ㅠ

당장 오늘부터 개발에 들어가야 하기 때문에 주말동안 부랴부랴 공부해본 내용을 정리해보고자 한다..!^^

TypeScript란?

자바스크립트는 dynamic typing을 지원해주는 언어이기 때문에 자유도/유연성이 매우 높다. 하지만 프로젝트의 규모가 커지면 커질수록 이러한 자유도는 오히려 독이 될 수 있다. 에러를 잡아주지 못하기 때문이다.

let a = 1; // a에 number타입의 데이터 할당.
a = 'Dumibell' //a에 string타입을 재할당해도 아무런 에러를 뱉지 않음.

타입스크립트는 이러한 자바스크립트의 문제점을 보완하기 위해 나왔으며 타입을 매우 엄격하게 검사해준다.

그럼 이제부터 타입스크립트의 기본적인 문법에 대해 알아보자!

1. 변수의 타입 지정

• 변수에 타입 지정 가능 → 타입이 실수로 변경될 때 에러를 내준다.

// 변수명 :타입
let name :string = 'kim';
name = 123; //에러 뜸

let age :number = 26;
number = //숫자만 들어올 수 있음

let members :string[] = ['kim', 'park'] // 배열 안에는 string만 들어갈 수 있음.

let members :{ member1: string, member2: string} = { member1: 'kim', member2: 'park'}

하지만 타입스크립트는 대부분 타입을 자동으로 지정해주기 때문에 꼭 수동으로 타입을 지정해주지 않아도 된다.

let name = 'kim'
//이미 name이라는 변수의 type은 string으로 지정이 됨.

• Union type: 타입 2개 이상 합친 새로운 타입 만들기

let member :(number | string | boolean) =123;
let members :(number | string)[] = [1, '2', 3];
let members : number | string[] // 다음과 같이 소괄호가 없으면 members = 123 또는 members = ['1', '2', '3'] 
let object :{a : string | number} = { a: '123' }

• Any type: 모든 자료형을 허용해줌 ⇒ 타입실드 해제 문법

let name :any;
name = 123;
name = true; 
//전부 허용

• Unknown 타입: 모든 자료형을 허용해줌 ⇒ any보다 안전함

let name :unknown;
name = 123;
name = {};

let a :string = name; //현재 name은 object이기 때문에 에러 발생.

let c :unknown;
c - 1 //에러 발생. 

⇒ ‘any', 'number', 'bigint', 'enum' 타입일 경우에만 연산이 가능하다고 나와있다.

• 타입스크립트는 엄격하기 때문에 간단한 수학 연산도 타입이 맞아야 한다.

let age :string | number;
age + 1; 
//에러 발생.

2. 함수

• 함수에 type 지정하기

function mutiply(x :number) :number {
	return x * 2
}
// parameter의 타입과 return값의 타입 지정.

multiply(2); 
// 위에서 parameter의 타입을 지정해주었기 때문에 함수를 실행할 때 꼭 parameter값을 넣어주어야 함.

function multiply(x? :number) :number {
	return x * 2
}
//만약 parameter가 옵션일 경우에는 위와 같이 ?를 붙여주면 됨.

function multiply(x :number | undefined) :number {
	return x * 2
}
//?를 붙여주지 않고 위와 같이 쓸 수도 있음. parameter의 값이 숫자 타입 또는 정의되지 않았다는 뜻이니까.

• void 타입: 함수에서 활용 가능

function plus(x :number) :void {
	1 + 1
}
//return을 아무것도 하지 않을 때 void 사용. 만약 return 쓰면 에러남

• narrowing

아래와 같이 함수를 짜면 에러가 난다. 당연함. number는 number끼리, string은 string끼리만 연산이 가능하기 때문이다.

function plusTwo(x : number | string)  {
	return x + 2 // 에러 발생
}

그 때 narrowing을 사용하면 문제가 해결된다.

function plusTwo(x :number | string) {
	 if(typeof x === 'string') {
		return x + '2'
	} else {
		return x + 2
	}
}

• assertion: 타입을 간편하게 assert

function plusTwo(x :number | string) {
	return(x as number) + 2;
}

간편하지만 무슨 타입이 들어올지 100% 확실할 때만 써야함. parameter에 string을 넣어도 에러를 반환해주지 않는다. 그래서 사실상 쓸 필요가… 버그 추적이 잘 안됨.

3. Type 키워드

• Type Alias: 변수에 타입 ‘저장’

type AnimalType = string | number | undefined;
let animal :AnimalType = 'Bell'

//object 형태도 저장 가능
type AnimalType = {name : string, age : number }
let animal:AnimalType = {name: 'Bell', age: 20 }

타입 변수 작명을 할 때는 대문자로 시작한다.

뒤에 Type을 관습적으로 붙임

//함수도 저장 가능
type funcType = (x :string) => number; // parameter는 stirng타입, number타입을 return

let func :funcType = function(x) {
	return 10
} //함수 표현식에만 type alias 사용 가능

• Type 변수 union type으로 합치기

type Name = string;
type Age = number;
type Person = Name | Age;

• Type 변수를 &연산자로 extend하기

type PositionX = { x : number };
type PositionY = { y : number };

type NewType = PositionX & PositionY;

let position :NewType = { x : 10, y : 20}; // 가능

• Readonly

type PetType = {
	readonly name :string;
}

const pet :PetType = {
	name : 'Bell'
}

pet.name = 'Dumi' // 에러 뜸

4. Literal Type

• 변수가 뭐가 들어올지 더 엄격하게 관리가 가능하다

let me : '조예지' | '더미벨';
//me라는 변수에는 앞으로 저 두 개만 들어올 수 있음

• literal type의 문제점

var doc = {
	name: 'kim'
}

function 함수(x: 'kim') {

}

함수(doc.name) //에러 뜸

여기서 parameter의 타입 지정을 ‘kim’으로 해 준 것은 kim이라는 자료만 들어올 수 있다는 뜻이 아니라 kim이라는 타입만 들어올 수 있다는 뜻이다. doc.name은 ‘kim’이라는 자료이고, 타입 자체는 string이기 때문에 오류가 나는 것이다.

• as const
  • object value값을 그대로 타입으로 지정해줌.
  • object 속성들에 모두 readonly를 붙여준다.

var doc = {
	name: 'kim'
} as const

function 함수(x: 'kim') {

}

함수(doc.name) // 에러 안남. 타입까지 doc의 value값인 'kim'으로 지정해주었기 때문.