3월 18일 TIL : TypeScript 시작

타입스크립트야 반갑다

object타입을 명시적으로 정해주는 방법

let a: number[] = [1, 2];

let b: string[] = ["hi"];

let c: boolean[] = [true];

콜론이용, 타입적어주면 됨

그리고 ts가 타입을 추론하게

let a = [1,2]
let b = ["il","1"]
let c = [true]

이렇게해도 됨 이런식으로 더 많이한다고 함. 

 

optional types

const player: {
	name: string;
	age?: number; 
    } = {
	name: "nico",
};

옵셔널 체이닝처럼 물음표이용가능(선택적 타입)

-> age가 undefined일 수도 있기때문에 ts가 에러처리함.  ts는 알아서 에러처리를 알잘딱깔센 잘한다!!!!

if (player.age&&player.age<10){}

VS코드에서 이런 에러처리를 함으로서 보호장치역할을 해줌. 

너무 좋당

 

Alias type

타입을 정해주고 재사용할 수 있게 -> 중복되는코드 줄이기 좋음!!!

type Player = {
//upper case로 써야함.
	name: string;
	age?: number;
};

const nico: Player = {
	name: "nico",
};
const Lynn: Player = {
	name: "Lynn",
	age: 34,
};

이렇게 Player라는 타입을 만들어 name과 age의 자료형을 정해주고 nico와 lynn을 Player로 타입을 지정하면 됨. (age는 ?<-요 옵셔널 타입이기때문에 있어도되고 없어도 된다. )

 

object 뿐만 아니라 다른 형태에도 이렇게 쓸 수 있다. 

type Age = number;

type Name = string;

type Player = {

	name: Name;
	
	age?: Age;

};

함수에도 사용 가능

함수가 return하는 타입이 뭔지 안다? 좋은 자동완성과 보호장치!


function playerMaker(name:string) <- 인수의 타입을 지정하는 방법

function playerMaker(name: string) {
//인수의 타입은 string만 가능해
	return {
		name,
	};
}


const nico = playerMaker("nico");

nico.age = 12;
//현재 이 부분은 에러사인이 난다.

함수를 만들고 playerMaker는 string인 name이라는 요소만 있는 object를 return

function playerMaker(name: string) : Player{
//playerMaker라는 함수가 Player의 형태라고 지정해주면 아래 에러가 사라짐. 
	return {
	name,
	};
}

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

이렇게하면 이제 ts가 이 nico가 player타입이란걸 알게되어 에러처리하지 않음. 

 

 

타입 지정하는 법

1. 콜론 뒤에 타입을 써주거나.
let a : boolean

2. 인수에 이름으 쓰고 타입을 쓰거나.
function playerMaker(name: string)

3. 함수 뒤에 타입을 써주거나..
function playerMaker(name: string) : Player

 

arrow function으로 표현하기

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

//이 함수를 arrow function으로 변경하면

const playerMaker = (name: string): Player => ({ name });

//이렇게 간결해짐.