[TypeScript] Day 1

soor.dev·2021년 8월 25일
0

TypeScript

목록 보기
1/1
post-thumbnail

youtube 코딩앙마님의 타입스크립트 강좌를 보고 정리한 내용입니다.

1. 왜 타입스크립트를 쓸까?

  • JS 같은 동적언어는 런타임에 타입이 결정되고, 오류도 그 때 발견된다. 사용자가 그 오류를 볼 수 있음
  • JAVA, TS 같은 정적언어는 컴파일시 타입이 결정되서 오류를 발결할 수 있음

2. 타입스크립트의 기본타입

string

let age:20;
let isStudent:boolean = false;
let a:number[] = [1, 2, 3];
let b:Array<number> = [1, 2, 3];

let days:string[] = ['mon', 'tue', 'wed'];
let days2:Array<string> = ['mon', 'tue', 'wed'];

tuple

let b:[string, number];

b = ['z', 1];
b[0].toLowerCase();
b[1].toLowerCase(); // error

void (함수에서 아무것도 반환하지 않을때)

function showError():never {
  throw new Error();
}

never (에러를 반환하거나 영원히 끝나지 않은 함수)

function infLoop():never {
  while (true) {
    // do sth...
  }
}

enum (비슷한 값들끼리 묶여짐)

  • 특정값만 입력할 수 있게 할 때 & 그 값들이 공통점이 있을 때
  • 수동으로 값을 주지 않으면 자동으로 0부터 값을 줌
enum Os {
  Window = 3,
  Ios = 10,
  Android // 11이 됨
}

console.log(Os['Ios']) // 10
console.log(Os[10]) // "Ios"
enum Os {
  Window = 'win',
  Ios = 'ios',
  Android = 'and'// 11이 됨
}

let myOs:Os;

myOs = Os.Window

null, undefined

let a:null = null;
let b:undefined = undefined;

3. 인터페이스

프로퍼티를 정해서 객체를 사용하고 싶을 때 interface 를 사용함

let user:object;

user = {
  name : 'xx',
  age : 20
}

console.log(user.name) // error => need interface
type Score = 'A' | 'B' | 'C' | 'D'

interface:User {
  name : string;
  age : number;
  gender? : string; // 있어도되고 없어도되는 프로퍼티. 하지만 있다면 무조건 string
  readonly birth : number;
  [grade:number] : Score; // key: number, property : Score값 중 하나인 값을 여러개 받을 수 있음
}

let user : User = {
  name : 'xx',
  age : 20,
  birth : 2021,
  1 : 'A',
  2 : 'B',
}

user.age = 10; // age 프로퍼티 수정 가능
user.gender = 'female' // gender? 로 정의되어있기 때문에 추가가능
user.birth = 20201; // error!!! readonly 수정 불가능

console.log(user.age) // 10
console.log(user.name) // 'xx'

interface로 함수 정의

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

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

add(10, 20); // 30

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

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

a(20) // true

interface로 class 정의

// implements
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('green');
console.log(b) // Bmw : {"wheels" : 4, "color" : "green"}
b.start(); // 'go...'
//extends

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

// 속성을 모두 입력해야 함
const benz : Benz = {
  door : 5,
  stop() {
    console.log('stop');
  }
  color : 'black';
  wheels : 4
}
// 각각의 인터페이스를 동시에 확장해서만들 수 있음

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

interface Toy {
  name : string;
}

interface ToyCar extends Car, Toy {
  price : number
}

0개의 댓글