[TIL] 내배캠4기-Typescript-78일차

주간 TODO

• 이전 프로젝트 ts로 리팩토링 해보기

타입스크립트

역할 : Static Checking
내가 코드를 작성하려고 할 때 에러를 체크해준다.
자바스크립트는 런타임 후에 에러를 뱉는다.

타입스크립트 타입

let car:string='bmw';

let age: number=30;
let a:number[]=[1,2,4];
let a2:Array<number>=[1,2,4];

let week1:string[]=['mon', 'tue'];

// 튜플
let b:[string, number];
b=['Z',1];
b[0].toLowerCase();
// b[1].toLowerCase(); error

함수

(매개변수: 타입): 리턴값의 타입

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

리턴 값이 없을 때 void

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

선택적 매개변수 처리

옵셔널

function hello(name?: string){ // 옵셔널 필요
    return `Hello ${name || "world"}`; //name 매개변수가 있어도 되고 없어도 됨
}

const result = hello();
const result2 = hello('Sammy');

위와 같은 식

function hello(name = 'world'){ 
    return `Hello ${name}`; 
}

나머지 매개변수 rest

type= number[]

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

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

인터페이스

프로퍼티를 사용해서 객체 값을 표현하고자 할 때

let user:object;

user = {
    name: 'heejin',
    age: 28
}

console.log(user.name); // Property 'name' does not exist on type 'object'.

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

let user: User={
    name: 'heejin',
    age: 28
}

user.age = 25; // age값 변경 가능
// user.gender = "female" 프로퍼티 추가 불가 - 인터페이스와 user객체에 정의되지 않았기 때문
console.log(user.name); //user까지만 적고 .을 찍으면 프로퍼티가 자동완성됨

옵셔널 파라미터

있어도 되고 없어도 되는 프로퍼티

interface User{
    name : string;
    age: number;
    gender? : string; // 옵셔널로 처리
}

readonly

읽기 전용 속성
최초 생성 시 할당 후 수정 불가

interface User{
    name : string;
    age: number;
    gender? : string; // 옵셔널로 처리
    readonly birthYear : number;
}

let user: User={
    name: 'heejin',
    age: 28,
    birthYear: 1996,
}

user.birthYear = 1997; // Cannot assign to 'birthYear' because it is a read-only property

전부 옵셔널로 처리해주면 번거로워진다.

interface User{
  1? : string;
  2? : string;
  3? : string;
  4? : string;
}
let user: User={
   1: 'A',
   2: 'B',
}

interface User{
  [grade:number]: string;
}
let user: User={
   1: 'A',
   2: 'B',
}

type Score = 'A'|'B'|'C'|'F';

interface User{
  [grade:number]: Score;
}

let user: User={
   1: 'A',
   2: 'B',
   3: 'D', // Type '"D"' is not assignable to type 'Score'
}

함수

interface Add {
    (num1: number, num2: number): number;
}

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

활용

interface IsAdult {
    (age:number): boolean;
}

const a:IsAdult = (age)=>{
    return age > 19;
}

a(28) // true

클래스

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

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string){
        this.color = c;
    }

    start(){
        console.log("Go!");
    }
}

const b = new Bmw('red');
console.log(b); 
// [LOG]: Bmw: {
//   "wheels": 4,
//   "color": "red"
// } 
b.start()

extends 가능

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

interface Benz extends Car {
    door: number;
    stop():void;
}

여러 개의 interface를 동시에 확장할 수 있다.

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

interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy{
    price: number;
}