TypeScript 타입스크립트 기초 -2

m-ur-phy 2022. 11. 8. 20:33

시작하면서

타입스크립트의 기초를 공부합니다.

클래스 정의

클래스는 implements 를 사용합니다.
클래스는 객체와 비슷해보이지만, 상속을 할 수 있습니다.

// TS

interface Car{
    color:string;
    wheels:number;
    start():void;
} // 생성자(constructor) 까지는 control 할 수 없다

class Bmw implements Car{ // ':' 말고 implements 를 사용해야한다
    color; // TS 에서 생략하게 되면 BMW 안의 color를 찾지 못한다. 변수를 꼭 만들어 주어야한다.
    wheels=4; // TS 에서 생략하게 되면 wheels를 찾지 못한다. BMW class 에 Wheels 변수를 만들어 주어야한다.
    constructor(c:string){
        this.color=c;
    }
    start():void{
        console.log('go....!');
    }
}

const car1 = new Bmw('green');
console.log(car1);
car1.start();

// JS

class Bmw {
    constructor(c) { // constructor(생성자 함수)는 처음에 자동으로 시작 (멤버 변수를 초기화해준다)
        this.wheels = 4; // 멤버 변수
        this.color = c;
    }
    start() {
        console.log('go....!');
    }
}

const car1 = new Bmw('green'); // car1 은 인스턴스
console.log(car1);
car1.start();

extends (확장)

interface Car{ // 부모 인터페이스
    color:string;
    wheels:number;
    start():void;
}

interface Car2 extends Car{ // 자식 인터페이스
    door:number;
    stop(d:number):number;
}

// interface Car2{ // 자식 인터페이스
//     color:string;
//     wheels:number;
//     door:number;
//     start():void;
//     stop():void;
// }

class Bmw implements Car{
    color;
    wheels=4;
    constructor(c:string){
        this.color=c;
    }
    start():void{
        console.log('Bmw go....!');
    }
}

const car1 = new Bmw('green');
console.log(car1);
car1.start();

class Benz implements Car2{
    color='red';
    wheels=4;
    door;
    constructor(c:number){
        this.door=c;
    }
    start():void{
        console.log('Benz go....!');
    }
    stop(d:number):number{
        console.log('Benz stop....!');
        this.door = d;
        return this.door;
    }
}

const car2 = new Benz(4);
car2.wheels = 10;
car2.color = 'gray';
car2.door = 100;
console.log(car2);
car2.start();

let aaa:number = 0;
aaa = car2.stop(200);
console.log(aaa);

// 결과

[LOG]: Bmw: {
  "wheels": 4,
  "color": "green"
} 
[LOG]: "Bmw go....!" 
[LOG]: Benz: {
  "color": "gray",
  "wheels": 10,
  "door": 100
} 
[LOG]: "Benz go....!" 
[LOG]: "Benz stop....!" 
[LOG]: 200

extends (확장-2)

// interface Pro{
//     color:string;
//     wheels:number;
//     name:string;
//     price:number;

//     start():void;
//     open():void;
//     buy():void;
// }

interface Car {
    color:string;
    wheels:number;
    start():void;
}

interface Toy{
    name:string;
    open():void;
}

interface ToyCar extends Car, Toy {
    price:number;
    buy():void;
}

class Product implements ToyCar{
    color='red';
    wheels=4;
    name='doll';
    price=500;

    start():void{
        console.log('start....!');
    }
    open():void{
        console.log('open stop....!');
    }
    buy():void{
        console.log('buy stop....!');
    }
}

const person1 = new Product();

console.log(person1);
person1.start();
person1.open();
person1.buy();

함수 타입 정의 방법

예제 1

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

function isAdult(age:number):boolean{
    return age > 19;
}
console.log(isAdult(30));  // true

예제 2

매개변수를 전달해 주지 않는다면 TS 는 에러가 발생합니다.

function hello(name:string):string{
    return `Hello, ${name || "world"}`; // name이 들어오면 name 출력, 아니라면 "world" 를 출력하라
}

const result = hello();  // 에러발생
const result2 = hello('kim');
console.log(result, result2);

이를 잡기 위해서 선택적 매개변수 ? 를 사용합니다.

// 에러가 나오지 않게 작성하려면? 선택적 매개변수를 이용하자!

function hello(name?:string){  // 변수? -> 선택적 매개변수
    return `Hello, ${name || "world"}`;
}

const result = hello(); 
const result2 = hello('kim'); 
console.log(result, result2);

선택적 매개변수를 사용하지 않고 if문을 사용한다면?

function hello(name:string):string{
    if(name == undefined) {
        return `Hello, world`
    }else{
        return `Hello, ${name}`
    }
}

선택적 매개변수를 사용하지 않고 매개변수에 초기 값을 지정해줘서 사용할 수도 있습니다.

function hello2(name = 'world'):string{  // 변수? -> 선택적 매개변수
    return `Hello, ${name}`;
}
const result3 = hello2(); 
const result4 = hello2('kim'); 
console.log(result3, result4);

나머지 매개변수

function add(...nums:number[]):number {
    return nums.reduce((result, num) => result + num);
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 55

예제 4

interface User {
    name:string;
    age:number;
}

function join(name:string, age:number):User {
    return{
        name,
        age
    };
};

const person1:User = join('신형만', 60);
console.log(person1); 
/*
{
  "name": "신형만",
  "age": 60
} 
*/

/*
// interface 없이 직접 명시해주는 방법

function join(name:string, age:number):{name:string, age:number} {
    return{
        name,
        age
    };
};

const person1:{name:string, age:number} = join('신형만', 60);
console.log(person1); 

*/

// this? 객체나 class 에서 사용

화살표함수로 수정

interface User {
    name:string;
    age:number;
}

interface Func {
    (name:string, age:number):User;
}

const join:Func = (name, age) => {
    return {
        name,
        age
    };
}

const person1:User = join('신형만', 60);
console.log(person1);

리터럴(Literal types) / 유니온(Union types) / 교차타입(Intersection types)

리터럴

리터럴이란? type을 생략하더라도, 초기값에 따라 type이 고정된다는 것 즉, 정확한 값이 지정됨을 말합니다.
문자열이나 숫자에 정확한 값을 지정한다는 것입니다.

유니온 → | (또는)

여러개의 선택지를 줄 수 있는 타입입니다.

const userName1 = 'Bob'; // type -> 'Bob' (상수 이기 때문에 값 자체가 type이 된다)
let userName2 = 'Tom';  // type -> string
let userName3: string | number;
userName3 = '유단자';
userName3 = 100;
console.log(userName1, userName2, userName3);

type Job = "police" | "developer" | "teacher";

interface User{
    name : string;
    job : Job;
}

const user:User ={
    name : "Bob",
    job : "developer"   // job : "student" -> 에러
}
console.log(user.name, user.job);

교차타입 -> & (여러개의 타입을 하나로 합친다)

interface Car{
    name : string;
    start(): void;
}

interface Toy{
    name : string;
    color : string;
    price: number;
}

const toyCar : Toy & Car ={
    name: '버스',
    color: 'blue',
    price: 10000,
    start(){
        console.log(this.name, this.color, this.price+'원');
    }
}
toyCar.start(); // "버스",  "blue",  "10000원"

class ES6 (클래스 복습)

자바스크립트(.js) 에서는 오류가 발생하지 않습니다.

class Car{
    constructor(color){
        this.color = color;
    }
    start(){
        console.log(this.color + " car start!");
    }
}

const bmw = new Car("red");
bmw.start();

.ts에서는 color 부분에서 오류 3개가 발생합니다.
클래스 맴버변수를 꼭 선언을 해주어야 합니다.(.ts)

class Car{
    color: string;
    constructor(color: string){
        this.color = color;
    }
    start(){
        console.log(this.color + " car start!");
    }
}

const bmw = new Car("red");
bmw.start();

public 사용

public 이란? → 전역 이라는 의미를 가지고 있습니다.

class Car{
    // color: string;
    constructor(public color: string){ // constructor 내부에서 public 사용
        this.color = color;
    }
    start(){
        console.log(this.color + " car start!");
    }
}

const bmw = new Car("red");
bmw.start();

readonly 사용(읽기전용)

class Car{
    // color: string;
    constructor(readonly color: string){
        this.color = color;
    }
    start(){
        console.log(this.color + " car start!");
    }
}

const bmw = new Car("red");
bmw.start();
// bmw.color='red';   // 에러 : 읽기 전용이라 값을 바꿀 수 없다

public / read-only 는 파라미터의 상수(const)를 만들어 주는 것이라고 생각하면 이해가 쉽습니다.

⭐⭐⭐⭐⭐ 접근 제한자(Access Modifier) ⭐⭐⭐⭐⭐

public → 자식 클래스, 클래스 인스턴스 모두 접근 가능 (생략하면 기본값)
private → 해당 클래스 내부에서만 접근 가능 (자식 클래스 사용 불가)
protected → 자식클래스에서 접근 가능/ 클래스 인스턴스에서 접근 불가

클래스 인스턴스 → 어쩌고 = new ddd → 어쩌고.name 이런식의 접근이 불가능합니다.

public

class Car{
    public name:string = "똥차";
    color:string;
    constructor(color:string){
        this.color=color;
    }
    public start(){ // 함수에도 public 사용이 가능하다
        console.log('부모클래스 strat!!',this.name, this.color);
    }
}

class Bmw extends Car{
    constructor(color:string){
        super(color);
    }
    showName(){
       console.log('자식클래스 strat!!', this.name , this.color);  // 부모에게서 물려받은 name, color (자식 클래스에서도 사용할 수 있다)
    }
}

const mycar = new Bmw("red");
mycar.name="새차";  // 인스턴스에서 직접 값을 바꿀 수 있다 (인스턴스에 접근 가능하다)

mycar.start(); // "부모클래스 strat!!",  "새차",  "red" 
mycar.showName(); // "자식클래스 strat!!",  "새차",  "red"

private

class Car{
    private name:string = "똥차";
    color:string;
    constructor(color:string){
        this.color=color;
    }
    private start(){ // 함수에도 public 사용이 가능하다
        console.log('부모클래스 strat!!',this.name, this.color);
    }
}

class Bmw extends Car{
    constructor(color:string){
        super(color);
    }
    showName(){
       console.log('자식클래스 strat!!', this.name , this.color);  // 부모에게서 물려받은 name, color (자식 클래스에서도 사용할 수 있다)
    }
}
const car = new Car("pink");
car.color = "blue";
console.log(car.color);

const mycar = new Bmw("red");
mycar.name = "새차";  // 에러 -> 자식 클래스에서 접근할 수 없다.
mycar.color = "green"

mycar.start(); // 에러 -> 자식 클래스에서 접근할 수 없다.
mycar.showName(); // "자식클래스 strat!!",  "새차",  "red"

protected

class Car{
    protected name:string = "똥차";
    color:string;
    constructor(color:string){
        this.color=color;
    }
    protected start(){
        console.log('부모클래스 strat!!', this.name, this.color);
    }
}

class Bmw extends Car{
    constructor(color:string){
        super(color);
    }
    showName(){
        console.log('자식클래스 strat!!', this.name , this.color);  //자식 클래스에서도 사용할 수 있다
        super.start();
    }
}
const car = new Car("pink");
car.color = "blue";

const mycar = new Bmw("red");
// mycar.name="새차";  // 에러 : 인스턴스에서 직접 값을 바꿀 수 없다
// mycar.start();
mycar.showName();

제네릭

제네릭은 특정 타입을 이용해서 템플릿처럼 함수를 만들 수 있습니다

함수의 매개변수의 전달 인자의 타입이 다를때…

function getSize(arr: number[]): number{
   return arr.length;
}

const arr=[1,2,3]; 
console.log(getSize(arr));  //3

const arr2 = ['a','b','c','d','e'];
console.log(getSize(arr2));  //에러가 발생한다

유니온 방식을 사용하는 방법

function getSize(arr: number[] | string[]): number{
   return arr.length;
}

const arr=[1,2,3]; 
console.log(getSize(arr));  // 3

const arr2 = ['a','b','c','d','e'];
console.log(getSize(arr2)); // 5

제네릭을 사용하는 법

function 함수명<타입파라미터>(매개변수:타입파라미터):타입{}

function getSize<T>(arr: T[]):number{
    return arr.length;
}

const arr = [1, 2, 3];
console.log(getSize<number>(arr));

const arr2 = ['a','b','c','d','e'];
console.log(getSize<string>(arr2)); 

const arr3 = [true,false,false,true];
console.log(getSize<Boolean>(arr3));

// any 를 쓰는 경우는?? type script를 쓸 이유가 없다. 그냥 vanila로 쓰면 된다.
// <타입파라미터> -> <T>,<A>,<X>... 아무 값이나 사용가능 하다

제네릭 예시 2

interface Mobile<T>{
    name: string;
    price: number;
    option: T;
}
/*
const obj1: Mobile<object> ={
    name: '삼성 s20',
    price: 100,
    option: {
        color: 'red',
        coupon: false
    }
};
*/

const obj1: Mobile<{color:string; coupon:boolean}> ={
    name: '삼성 s20',
    price: 100,
    option: {
        color: 'red',
        coupon: false
    }
};
console.log(obj1.name , obj1.price +'만원', '색상:'+obj1.option.color, '쿠폰:'+obj1.option.coupon);

const obj2: Mobile<string> ={
    name: '삼성 s22',
    price: 120,
    option: 'android OS'
};
console.log(obj2.name , obj2.price +'만원', obj2.option);

마무리하며

타입스크립트의 기초를 1, 2편에 걸쳐서 공부해 보았습니다.

변수 뿐만아니라 함수까지 모든 곳에 타입을 지정해줌으로써 오류를 최소화 한다는 것이 매력적으로 다가왔습니다. 자바스크립트 세상에서 가장 많이 겪는일 "오류는 안뜨는데 값이 안나와요"가 없는 타입스크립트! 한번쯤은 꼭 공부해보시면 좋을 듯 싶습니다.

댓글과 공감은 항상 환영입니다!