TypeScript

TypeScript

정적인 언어로 컴파일 시간에 타입을 검사하는 자바스크립트 상위 언어
JavaScript Superset

• Node.js로 컴피일이 되기 때문에 Node.js가 필요

타입

type Union :string | number; // 말그대로 두개중 하나의 타입으로 가능하며 미리 선언도 가능하다
let union: Union // 선언한 타입을 사용할 때 
let annie : any;  // 모든 타입의 상위 타입
let num : number;
let str : string;
let bool : boolean;
let undifine : undefined;
let nul : null;
let obj : object;
let arr : any[];
let sym : symbol;
enum Position {
	GK = "GK",
	DF= "DF",
	MF = "MF",
	FW = "FW"
}

Function

//function
//인자를 "변수:타입"으로 설정해서 인자의 타입을 지정
//void => return X
const printHello = (name:string) void => {  
	console.log(`${name} Hello!!!`)
}

printHello("KDB")

Interface

• js는 interface가 없으므로 js로변환시 interface는 사라진다

interface Player {
	name: string;
	backNumber: number;
}

const kevin = {
	name: "KDB",
	backNumber: 17
}

const returnBacknumber = (person: Player):number => {
	//number타입 반환
	return person.backNumber
}

console.log(`${kevin.name}'s BackNumber is ${returnBackNumber(kevin)}`)

Class

• interface 대신 class를 이용해서 구현 가능

class Player {
	//public, private같은 공개범위는 js로 변환시에는 사라짐
  public name: string;
  public backNumber: number;
  public position: string;
	// "?" 키워드를 이용해서 선택적으로 사용가능
  constructor(name: string, backNumber: number, position: string?) {
    this.name = name;
    this.backNumber = backNumber;
    this.position = position;
  }
}

const Dias:Player = new Player(Dias, 3, defender)
//position은 Optional이므로 생략해도 에러 x
const Foden = new Player(Foden, 47)

//Player만을 요소로 갖는 배열 선언
let players: Player[] = [Dias,Foden]

const printPlayer = (person:Player):void => {
	console.log(`${person.name}'s back number is ${person.backNumber}`)
}
printPlayer(Dias)
printPlayer(Foden)

제네릭

• 고정된 타입을 선언하는 것이 아닌 사용할 때 타입을 지정해서 사용할 수 있는 기법

//일반 함수로 작성
//function lengthOfBackNumbers(arr: number[]):number {
//	return arr.length;
//}
//제네릭을 이용해서 작성
function lengthOfBackNumbers <T>(arr: T[]):number {
	return arr.length;
}

var df= [2, 3, 4, 5, 11, 14, 27];
var mf = [8, 17, 20, 25];

lengthOfBackNumbers<number>(df);
lengthOfBackNumbers(mf);

----------------------------------------------------
//인터페이스 생성
interface Player<T> {
	name: string;;
	position: T;
	backNumber: number?;
}

const Ederson: Player<string> = {
	name: "Ederson",
	position: "GK",
	backNumber: 31
}

const Pil: Player<string[]> = {
	name: "Foden",
	position: ["FW", "MF"],
	backNumber: 47
}

function returnPlayer<T extends {position: number} (player: T):string {
	if(Array.isArray(player.position)){
		return player.position[0];
	}
	return player.position;
}