첫시작

타입스크립트

타입스크립트 실행 방법

Tsc 명령어

tsc –init 을 통해 디폴트 tsconfig.json 파일을 생성할 수 있고, 이 이후로는 tsc명령어로 현재 디렉토리에 있는 ts 파일들을 컴파일 할 수 있다

tsc 특정 파일 을 통해서 특정 파일만 컴파일 할 수도 있다

컴파일이 완료되면 ts파일들은 전부 각 파일 이름의 js파일이 생성되고, 기존 자바스크립트 실행하 듯이 실행시키면 된다 node 자바스립트 파일

실행하고 나면 디렉토리가 js파일들이 남아있어서 좀 더러워지는데 tsc –build –clean 으로 생성된 js 파일들을 모두 지울 수 있다

Ts-node

npm install -g ts-node 으로 설치할 수 있고, 이 이후로는 ts-node ts파일 로 실행 시킬 수 있다.

React나 Vue처럼 실시간으로 파일을 변경시키면서 컴파일 시키고, 웹페이지에 반영되어야 하는 상황이 아니고 타입스크립트를 공부하는 입장에서는 두 방법 중 무엇을 선택해도 상관 없을 듯싶다. (충분히 편하다는 뜻)

ts-node로 실행하면 깔끔하게 ts파일이 js로 변환되고 실행된다, js파일은 따로 남지 않는다

기본 타입스크립트 문법

Type Annotation

const <변수명>: <타입> = <값>; 의 형식
 
// 기본 자료형
const userName: string = "jeongHoon";
const userAge: number = 24;
const isConditionGood: boolean = false;
 
// 함수
function printMessage (message: string): void {
	console.log(message);
}
 
// 객체에서 타입선언
let myInfo: {name: string, age: number, isConditionGood: boolean} =
	{
		name: "jeongHoon",
		age: 24,
		isConditionGood: false,
	}
 
// 선택적 속성 (?)
let myInfo: {
		name: string,
		 age: number,
		 isConditionGood: boolean,
		 gender?: string  // 선택적 속성(필수적으로 넣을 필요는 없다)
		 } = {
		name: "jeongHoon",
		age: 24,
		isConditionGood: false,
	}

기본타입 7종

null: 의도적으로 값이 없음
undefined: 변수에 값이 할당되지 않은 경우, 의도하지 않은 값의 부재
boolean: true, false 두가지 값을 가지고 있는 타입
string: 문자열 의미
number: 정수, 부동소수점, 16진수, 8진수 등등 숫자
bigint: 매우 큰 숫자도 할당할 수 있는 타입, 숫자 뒤에 n을 붙여 표현
symbol: 불변이면서 유니크한 값을 표현하는 자료형

타입 계층도

객체에 대한 타입명시는 위와 같고, 객체와 튜플 그리고 any, void, never에 대해 알아보자

배열과 튜플

````ad-white
title: 배열
```ts
// 배열 타입지정 (두 방식으로 타입지정 가능)
const numbers: number[] = [1, 2, 3, 4, 5];
const stringArray: Array<string> = ["a", "b", "c", "d", "e"];
 
// 객체의 배열 타입 지정 (마찬가지로 두 방식으로 타입지정 가능)
const idols: {name: string, birth: number}[] = [
	{ name: "minji", birth: 2004 },
	{ name: "hani", birth: 2004 },
	{ name: "htelin", birth: 2008 },
];
 
const idols: Array<{name: string, birth: number}> = [
	{ name: "minji", birth: 2004 },
	{ name: "hani", birth: 2004 },
	{ name: "htelin", birth: 2008 },
];
```
````
 
````ad-white
title: 튜플
```ts
// 튜플은 원소의 개수만큼 타입 정의가 필요
const myTuple: [string, number] = ["jeongHoon", 24];
 
// 튜플은 함수의 매개변수가 여러 개일 때 유용
function printMyInfo(label: string, info: [string, number]): void {
	console.log(`[${label}]`, ...info);
}
 
// 튜플을 반환하는 함수
function fetchUser(): [string, number] {
	return ["jeongHoon", 24];
}
 
// 비구조화(Destructuring)을 통해 분해하여 받을 수 있다
const [userName, userAge] = fetchUser();
```
````

Any, Void, Never

Any

let anyValue = 10;
anyValue = "Hello"; // 컴파일 오류
anyValue = true;    // 컴파일 오류

타입스크립트는 동적타이핑이 아니기 때문에, 처음 추론한 타입을 끝까지 유지하므로 위와같이 코드를 작성하면 컴파일 오류가 발생한다

위 상황을 가능케하는 방법이 타입스크립트에도 존재한다 (유니온 타입, any)

any타입은 unknown을 제외한 타입들중에 가장 상위에 있는 타입으로 타입을 모르거나, 지정할 수 없을 때 사용할 수 있다

let anyValue: any = 10;
anyValue = "hello";
anyValue = true;

하지만 any타입을 사용하는것은 자바스크립트를 사용하는것과 다를 바 없기 때문에 사용하는것을 지양한다고 한다

Void, Never

void 와 never은 모두 함수의 반환값에 지정하는 타입이다. void 는 함수의 결과값이 없을 때 사용하며, never은 의도적으로 값을 반환하지 않을 때 사용한다

두 타입의 개념이 헷갈리는데 예시로 알아보자

// 결과값이 없음
function print(value: number): void {
	console.log(value);
}
 
// 예외를 던짐
function throwError(message: string): never {
	throw new Error(message);
}
 
// 무한 루프
function infinityLoop(): never {
	while (true) {}
}

유니온 타입

유니온 타입을 사용하면 변수 하나를 여러가지 타입으로 지정할 수 있다

let anyValue: number | string | boolean = 10;
anyValue = "hello";
anyValue = true;

아직 소개하지 않은 문법들을 사용해 위에 소개한 문법들을 더욱 더 활용하여 표현할 수 있다

다음 타입스크립트 주제: (타입스크립트) 다양한 타입지정

Jeonghoon Notes

탐색기

003 (타입스크립트) 첫시작

첫시작