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

더미벨·2022년 8월 1일
14

사수님께서 이번 프로젝트는 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'으로 지정해주었기 때문.
profile
프론트엔드 개발자👩‍💻

1개의 댓글

comment-user-thumbnail
2022년 8월 3일

좋은 정보 감사드립니다!

답글 달기