TypeScript - 1

15 Aug 2022

Reading time ~1 minute

1. TypeScript

기본 세팅

node version 17 이상
VScode

기존 Javascript의 문제

함수를 실행할 때 올바른 입력값을 사용하도록 강제 안함
리스트+불리안 같은 말도 안되는 코드 실행 가능
객체 안에 존재하지 않는 함수 불러내는 것 가능
등등…

특징

타입 안정성 (타입 - 스크립트)
타입스크립트 작성 이후 → 자바스크립트로 변환됨
브라우저는 타입스크립트가 아닌 자바스크립트를 이해한다.
타입스크립트가 코드 체크 → 문제 없음 → 자바스크립트 변환
일종의 보호 장치

타입 시스템

데이터와 변수의 타입을 명시적으로 정의 가능
자바스크립트와 같이 변수만 생성해도 됨 → 변수 타입 자동 추론

let a = "hello"
let b : boolean = "x" ->false
let b : boolean = true
let c : number[] = []

타입 시스템 종류 optional

let a :number = 1;
let b : string[] = ["1","2"]
let c : boolean = true

const player = {
	name:"nico"
}
// 만약 어떤 플레이어는 나이를 가지고 어떤 플레이어는 가지지 않는 오브젝트를 생성하려면 어떻게 해야 할까?

오브젝트 타입 지정

const player : {
			name:string,
			age?:number // 선택적으로 age를 가짐
} = {
		name:"nico"
}

타입 변수

type Player = {
	name:string,
	age?:number
}

const nico : Player = {
	name:"nico"
}
const lynn : Player = {
	name = "lynn",
	age:12
}

return 변수 타입 지정

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

const nico = playerMaker("nico")
nico.age=12

const PlayerMaker = (name:string):Player=>({name})
const nico = playerMaker("nico")
nico.age=12

Readonly

type Player = {
	readonly name:string, //데이터 변경 할 수 없음
	age?:number
}

const nico : Player = {
	name:"nico"
}
const lynn : Player = {
	name = "lynn",
	age:12
}

여러 타입의 값이 든 리스트

const player:[string,number,boolean] = ["nico",1,true]
player[0]=1