TypeScript 속성 학습 - 1

타입스크립트란?
1.TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다. 

2. TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다. 

3. TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다. 

 

정적언어 (TypeScript, Java) : 컴파일 타임에 타입 결정 / 에러 발견

동적언어 (JavaScript) : 런타임에 타입 결정 / 에러 발견

 

 

타입스크립트의 기본적인 타입

타입 선언은 기본적으로 아래와 같은 방식으로 선언한다.

let age:number = 30;
let isAdult:boolean = true;
let a:number[] = [1,2,3];
let a2:Array<number> = [1,2,3];

 

튜플

let b:[string, number];
b = ['z', 1];

 

void, never

void는 함수에서 아무것도 반환되지 않는 함수에 사용

never는 항상 에러를 반환하거나 영원히 끝나지 않는 함수로 사용가능

function func():void { console.log('hello') }
function showError():never { throw new Error() }
function infLoop():never{ while(true){//do SomeThing} }

 

enum

특정 값만 입력할 수 있게 강조할고 싶을 때 그 값들이 공통점이 있을 때 사용

enum Os{
  Window,
  Ios,
  Android
}
let myOs:Os;
myOs = Os.Window 

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

 

프로퍼티를 정의해서 객체를 표시하고자 하면 interface를 이용

type Score = 'A' | 'B' | 'C' | 'F';
interface User {
  name : string;
  age : number;
  gender? : string;  // 있어도 되고 없어도 되는 프로퍼티는 ?를 붙여 사용
  readonly birthYear : number;  // readonly를 사용하면 생성할때만 사용가능하며 새로 쓰기 불가능
  // 문자열 인덱스 서명 만들기
  // [grade : number] : string;  
  // 이렇게 하면 입력할 수 있는 문자열의 범위가 넓으므로 위에 타입 선언된 Score를 이용
  [grade : number] : Score;
}
let user = {
  user : 'xx',
  age : 30,
  birthYear : 2000,
  1 : 'A',
  2 : 'B',
} 

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;
}

 

인터페이스로 클래스 선언

interface Car {
  color: string;
  wheels: number;
  start(): void;
}
class Bmw implements Car {
  color : 'red';
  wheels: 4;
  constructor(c:string)
} 

// extends(안터페이스 확장)
interface Benz extends Car{
  door: number;
  stop(): void;
}
const benz : Benz = {
  door: 5,
  stop(){
    console.log('stop');
  },
  color: 'black',
  wheel: 4,
  start(){
    console.log('start');
  }
}
확장은 동시에 확장 가능하다.
interface Toy {
  name: string;
}
interface ToyCar extends Toy, Car {
  price: number;
}

 

함수를 선언할 때는 매개변수와 같이 함수가 반환하는 타입을 입력

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

 

선택적 매개변수

function hello(name? : string) : string{
    return `Hello, ${name || 'world'}`
}
function hello2(name = "world") : string{
    return `Hello, ${name}`
}
const result = hello();
const result2 = hello("sam");
// 선택적 매개변수가 필수 매개변수보다 앞에오면 에러 발생
// 선택적 매개변수가 앞에 와야한다면 다음과 같이 사용
function hello(age:number | undefined, name: string): string{
    if(age !== undefined){
        return `Hello, ${name}. You are ${age}.`;
    }   else{
        return `Hello, ${name}`;
    }
}

 

펼침 연산자를 매개변수로 받은 경우 배열로 타임을 정의해 준다.

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

this의 타입을 정의하고 싶다면 매개 변수에서 정의해주면 된다.
interface User {
    name: string;
}
const Sam : User = {name:'Sam'}

function showName(this:User, age:number, gender:'m'|'f'){
    console.log(this.name, age, gender)
}
const a = showName.bind(Sam);
a(30,'m')

 

동일한 함수이지만, 매개변수의 타입이나 갯수에 따라 다른방식으로 동작해야한다면

오버로드를 사용할 수 있다.

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

function join(name: string, age: string): string;
function join(name: string, age: number): User;
function join(name: string, age: number | string): User | string{
    if(typeof age === "number"){
        return {
            name,
            age,
        };
    }   else{
        return '나이는 숫자로 입력해주세요.'
    }
}
const sam: User = join("Sam", 30);
const jane: string = join("Jane", "30");