How Typescript Works and Basics

javascript는 말도안되는 코드를 실행, 올바른 argument를 넣지 않아도 실행, 객체 안에 존재하지 않은 함수도 실행한다. 불안정한 언어이다. 이상적으로 코드를 실행하기도 전에 이런 메세지를 잡을 수 있어야 한다. 실무에서도 디버깅을 할 때, console.log를 계속 중간 중간에 넣어보면서 확인하는 등 번번히 원치 않은 동작으로 골머리를 썩였다.

타입스크립트는 개발자가 실수하는 것을 방지 할 수 있다고 한다. 타입스크립트는 어떻게 우릴 보호해 줄 수 있을까?

😀😀 타입스크립트는 자바스크립트 코드로 컴파일하기 전에 이를 확인한다. 에러가 발생한다면 자바스크립트 코드로 컴파일을 해주지 않는다.

타입스크립트는 타입을 추론해준다.

• Type

let a = 'hello' // ts에서 string이라고 추론할 것이다.
let b : boolean = false // 이렇게 직접 ts에게 명시적으로 알려주는 방법도 있다.
let c :number[] = []

• Object && Optional properties

const player1 : {
	name: string,
    age?: number // 옵션을 주어서 age가 없을 수도(undefined), 있다면 number라는 의미
	} = {
		name: 'ash'
	}

const player2 : {
	name: string,
    age?: number 
	} = {
		name : 'ssosung'
	}
    

위와 같이 object의 타입이 반복된다면 귀찮아 질 것이다.

이 경우에 Alias 타입을 생성할 수 있다.

• Alias

type Player = {
	name: string,
    age?: number
    }
const ash : Player = {
	name : 'ash'
    }
const ssosung : Player = {
	name : 'ssosung',
    age : 12
    }

• Argument && return type

function playerMaker(name:string) : Player{
	return {
    	name 
    }
}

• Arrow function

const playerMaker = (name:string) : Player => ({name}) // 주의 : 소괄호 꼭 하기!

• readOnly

const names: readOnly string[]= ['1','2'] // 타입선언 앞에 추가만 해주면 된다.

• tuple : Javascript에는 없는 개념. 수정x ( ✓ tuple은 셀 수 있는 수량의 순서 있는 열거)

const player: readOnly [string, number, boolean] = ['lego', 1, true]

• any : Typescript문법에서 빠져나오는 방법(어떤 타입이든 가능) -> Typescript의 보호를 받지 못함.

• unknown : 변수의 타입을 미리 알 지 못 할 때 사용.

let a:unkown;

if(typeof a === 'number') {
	let b = a + 1
}

if(typeof a === 'string') {
	let b = a.toUpperCase();
}    

• void : 아무것도 return하지 않는 함수를 대상으로 사용.

function hello(): void {
	console.log('x')
    }

• never : 함수가 절대 return 하지 않을 때 발생.

function hello(name:string|number) {
	if(typeof name === 'string') {
    	name // string
    } else if (typeof name === 'number') {
    	name // number
    } else {
    	name // never
    }    
}

대부분의 프론트엔드 개발자들이 타입스크립트로 넘어가는 추세이고, 실무에서 타입 체크에 대한 필요성을 직접적으로 느끼면서 타입스크립트를 배워보고자 하였다.

유튜브 노마드 코더의 니코쌤 강의를 바탕으로 나름대로 정리를 해보았다.
얼른 기초문법을 다 보고 깃헙에 잔디 심으러 가야겠다. 😁😁

도움될만한 사이트

• 타입스크립트 코드 테스트 사이트 : https://www.typescriptlang.org/play?#code/Q
• 타입스크립트 가이트 북 : https://yamoo9.gitbook.io/typescript/
• 한눈에 보는 타입스크립트 : https://heropy.blog/2020/01/27/typescript/