TypeScript 기본 형식

TypeScript란 JavaScript의 Superset으로 TypeScript로 작성된 프로그램은 컴파일시 JavaScript로 변환되어 실행된다

변수

타입스크립트에서 변수는 아래형식으로 사용
범위 변수이름:자료형;

var num:number = 1;

• 숫자를 저장하는 num 전역변수를 생성하고 값을 1로 저장
• var로 선언된 변수는 같은이름으로 다시 선언될 수 있음

let name:string = "John";

• 문자열을 저장하는 name 지역변수를 생성하고 John을 저장
• let로 선언된 변수는 업데이트될 수 있지만 다시 선언될 수 없음

const isman:boolean = true;

• boolean형을 저장하는 num2 지역변수를 생성하고 true를 저장
• const로 선언된 변수는 업데이트될수도, 다시 선언될수도 없음

enum

타입스크립트에서 enum은 아래형식으로 사용

enum 이름{
내용
}

enum Score{
  A = 4,
  B = 3,
  C = 2,
  D = 1,
  F = 0
}

let John:Score; // John에는 Score enum에 있는 값만 넣을수 있음
John = Score.B; // John은 Score의 B에 해당하는 3이 들어가게됨

인터페이스

interface Car{
    color : string;
    wheels : number;
  	readonly year : number; // readonly를 붙이면 초기설정 후 읽기만 가능하고 변경 불가능
    start(): void;
}

interface Benz extends Car{ // 상속느낌
    door?: number; // ?를 붙이면 있어도되고 없어도 됨
    stop() : void;
}

class BMW implements Car{
    color;
    wheels;
    year;
    constructor(c:string, w:number, y:number){
        this.color = c;
        this.wheels = w;
        this.year = y;
    }
    start(){
        console.log("car is started");
    }
}

class AMG implements Benz{
    color;
    wheels;
    door;
    year;
    constructor(c:string, w:number, d:number, y:number){
        this.color = c;
        this.wheels = w;
        this.door = d;
        this.year = y;
    }
    start(){
        console.log("car is started");
    }
    stop(){
        console.log("car is stoped");
    }
}

  //함수 인터페이스
interface Add{
  (num1:number, num2:number): number;
}

const add: Add = function(x, y){
  return (x + y);
}  

함수

타입스크립트에서 함수는 아래형식으로 사용

function 함수이름(인자이름:인자자료형):반환자료형{
함수 내용}

function add(num1:number, num2:number): number{
	console.log(num1 + num2);
    return (num1 + num2);
}

function hello(name?:string):string {
  // name에 ?가 붙었기때문에 있어도되고 없어도 됨
    return (`hello, ${name || "world"}`);
  // name이 있다면 'hello (name)'이 반환, 없다면 'hello world'가 반환
}

function hello2(name:string, age?:number):string {
    if (age !== undefined)
        return (`Hello, ${name}. You are ${age}.`);
    else
        return (`Hello, ${name}.`);
}
// name은 꼭 있어야하지만 age는 있어도되고 없어도됨, age가 없다면 age === undefined로 확인 가능

function add(...nums: number[]){
	let sum:number = 0;
    for(let num of nums)
        sum += num;
    return (sum);
}
// ...nums: number[]를 사용하면 add(1, 2, 3)이든 add(1, 2, 3, 4, 5)든
// number를 갯수상관없이 받아와 배열로 저장하여 인자로 넘겨줌

function call(num:string):string;
function call(num:number):number;
function call(num:number | string) : number | string{
    if(typeof num === "number"){
        console.log(`${num}에게 전화를 겁니다.`);
        return num;
    } else{
        console.log(`${num}님 에게 전화를 겁니다`);
        return ("숫자를 입력해주세요");
    }
}
// 반환값이 여러가지 타입일때에는 이런식으로 사용해주어야 함

타입

type Job = "Police" | "Doctor" | "Soldier" | "Cleaner";
interface user{
    name : string;
    job : Job;
}
const jim:user = {name : "Jim", job : "Soldier"};
// string을 저장하는 string형 리터럴 타입

interface Car{
    name : "car",
    start(): void
}
interface Mobile{
    name : "mobile",
    call(): void
}
function getGift(gift: Car | Mobile):void{
    if(gift.name === "car")
        gift.start();
    else
        gift.call();
}
// | 를 사용한 식별 가능한 유니온 타입

interface Car{
    name : string,
    start() : void
}
interface Toy{
    name : string,
    color : string,
    price : number
}
const toyCar : Toy & Car = {
    name : "타요",
    color : "파랑",
    price : 30000,
    start(){},
}
// &를 사용한 교차타입

클래스

// 클래스

class Car{
    public name:string = "car"; // 상속받은 클래스에서도 호출가능
    private color:string; // 소유한 클래스만 호출가능
    #hp : number; // #을 붙이면 private과 동일
    constructor(color:string, hp:number){
        this.color = color;
        this.#hp = hp;
    }
    start():void {
        console.log(`${this.color} Car Start`);
    }
}

class Bmw extends Car{
    private model:string;
	static wheel:number = 4;
    constructor(color:string, hp:number, model:string){
        super(color, hp); // 기본 클래스(Car) 호출시 사용, this를 사용하려면 꼭 해줘야함
        this.model = model;
    }
    showname(){
        console.log(this.name); // name은 public이기에 호출가능
    }
}

let m4 = new Bmw("red", 6, "M4");
m4.showname();
console.log(Bmw.wheel); // static변수를 불러올때는 class의 이름으로 가져옴

//추상클래스

abstract class A{ //abstract를 붙여 추상클래스로 만들어줌
    name:string;
    num:number;
    abstract doSomething():void; // 가상함수
    constructor(name:string, num:number){
        this.name = name;
        this.num = num;
    }
}
class B extends A{
    private extra?:string;
    constructor(name:string, num:number){
        super(name, num);
    }
    doSomething(){ // 가상함수는 자식클래스에서 반드시 정의해야함
        console.log(`${this.name} ${this.num} ${this.extra || "no extra"} `);
    }
    addExtra(str:string):void{
        this.extra = str;
    }
    getExtra():string | void{
        return this.extra;
    }
}

let test = new B("jae", 20);
test.doSomething();
test.addExtra("hihi");
console.log(test.getExtra());

제네릭

// 함수에서 사용
function getSize<T>(arr : T[]){
	return arr.length;
}
const arr1:string[] = ['a', 'b', 'c'];
const arr2:number[] = [1, 2, 3];
getSize(arr1);
getSize(arr2);
  -----------------------------------------
//인터페이스 사용
interface Foods<T>{
	name: string,
    price: number,
    option: T
}
const snacks : Foods<{extrafee:number; taste:string}> = { // T에 두가지 오브젝트를 넣어줌
	name : "snack",
  	price : 1000,
  	option : {
      extrafee : 0,
      taste : "sweet"
    }
}
const chicken : Foods<number> = { // T는 number라고 명시
	name : "chicken",
  	price : 1000,
  	option : 5000
}
	-----------------------------------------
interface Book{
    name:string
}
interface Car{
    name:string
}
interface Food{
    taste:string
}
const bible:Book = {name : "bible"};
const bmw:Car = {name : "M4"};
const snack:Food = {taste : "sweet"};
function getName<T extends {name:string}>(data:T){
    return (data.name);
}
getName(bible);
getName(bmw);
getName(snack); // name:string이 없기때문에 에러

partial, requierd
partial을 붙이면 ?가 안붙은 프로퍼티들도 ?가 붙은거처럼 해줌
requierd를 붙이면 ?가 붙은 프로퍼티들도 ?가 안붙은거처럼 해줌