Typescript types

지금까지 짠 프로젝트를 타입스크립트로 변환해보잣. 근데 나는 ts의 아무것도 모른다. 그래서! 공부 시작!

 

기존의 대충 흘려보던 타입스크립트의 가장 큰 차이점 : 타입을 지정해주는 것이다.

이게 뭔가? 했는데 이게 뭔지 알아보겠다.

 

 

 

 

 

 

가장 기초 타입 

string, number, boolean

 

 

 

배열 

숫자 배열 : number[], Array<number>

문자열 배열 : string[], Array<string>

단, [number]은 다른 얘기이다. 이것은 튜플이다.

 

 

 

any

아직 특정한 값을 갖지 않았을 때 타입 체크 오류를 방지하는 타입스크립트의 특별한 타입이다.

값의 타입이 any이면, 어떠한 타입이라도 접근이 가능하다.

 

let obj: any={x:0};
// 아래의 코드들은 오류가 나지 않는다.
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

 

 

 

변수에 타입 선언하기

 

let myName: string = "Kamea";

 

 

 

함수

변수에 타입 선언하기 : 변수 자리 옆에 써주면 된다.

 

function greet(name: string){
	console.log("Hello, "+ name);
}

 

위와 같이 써주면 name에 string 이외의 타입이 들어왔을 때는 오류가 난다.

 

 

반환값에 타입 선언하기 : 변수 자리 옆에 써주면 된다.

 

function getFavoriteNumber(): number {
	return 26;
}

 

 

객체 타입

 

function printCoord(pt: {x: number; y: number}){
	console.log("The coordinate's x value is " + pt.x);
    console.log("The coordinate's y value is " + pt.y);
}

printCoord({x: 3, y: 7})

 

선택적 프로퍼티

 

funtion printName(obj: {first: string; last?: string}{
	// ...
}

printName({first: "Bob"})
printName({first: "Kamea", last: "Lim"})

 

자바스크립트에서 흔히 발생하는 undefined는 다음과 같이 잡아낼 수 있다.

 

function printName(obj: {first: string, last?: string}){
	// 만약 obj.last가 없으면 오류
    console.log(obj.last.toUpperCase());
    
    // 오류를 막아줌
    if(obj.last !== undefined){
    	console.log(obj.last.toUpperCase());
    }
    
    // 모던 자바스크립트에서는 아래와 같은 맥락으로 쓰기도 함
    console.log(obj.last?.toUpperCase());
}

 

2개 이상의 타입 선언하기

 

function printId(id: number | string){
	console.log("ID is :" + id); 
}

// 성공
printId(101);
printId('200');

 

2개 이상의 타입을 선언하고 나서, 문자열에만 사용가능한 함수를 쓸 경우에는 조건문으로 타입을 확인해주면 된다.

 

function printId(id: number | string){
	if (typeof id === "string"){
    	console.log(id.toUpperCase());
    } else {
    	coonsole.log(id);
    }
}

 

 

 

 

타입 별칭

 

type Point = {
	x: number;
    y: number;
}

function printCoord(pt: Point){
	console.log("The coordinate's x value is " + pt.x);
	console.log("The coordinate's y value is " + pt.y);
}

printCoord({x: 100, y: 100});

 

 

 

 

인터페이스

 

interface Point{
	x: number;
    y: number;
}

function printCoord(pt: Point){
	console.log("The coordinate's x value is " + pt.x);
	console.log("The coordinate's y value is " + pt.y);
}

printCoord({x: 100, y: 100});

 

 

 

그럼 이제 시작해볼까! 신난당