타입스크립트 기초, 함수

TypeScript

타입스크립트

자바스크립트의 상위 집합
JS의 코드에 변수나 함수 등 타입을 정의할 수 있다.
타입스크립트를 컴파일하여 자바스크립트로 변환한다.
JS의 동적타입을 정적으로 표현 할 수 있다.
실행하지 않아도 컴파일 단계에서 오류를 찾을 수 있다.

JS			//오류 없음
let a;
a=1;
a='f';

Ts			//오류 : a는 number 타입인데 문자열 string이 할당 되었다고 오류 알림
let a: number;
a = 1;
a = 'f';

배열 타입

const arr1: Array<number> = [1,2,3]
const arr1: number[] = [1,2,3]

tuple
let arr: [string, number] = ['Hi",6];

class 상속

class Vehicle{
    constructor(){
        console.log("Vehicle constructor");
    }
}

class Car extends Vehicle{
    constructor(){
				super();
        console.log("Car constructor");
        console.log(this);
    }
}
let car = new Car();

Utility types

interface Todo {
  title: string
  description: string
  completed: boolean
}
//Omit사용: 모든 프로퍼티 선택한 다음 k를 제거한 타입을 구성
type TodoPreview = Omit<Todo, "description">

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,  
}
//Pick사용: 프로퍼티 K의 집합을 선택해 타입을 구성
type TodoPreview = Pick<Todo, "title">

const todo: TodoPreview = {
  title: "Clean room"  

함수 타입
TS에서 함수 작성시 반환 타입까지 추론하는 것을 권장한다.
JS
const sum = (a,b) => { return a + b }
TS
const sum = (a: number,b: number):number => { return a + b }
매개변수 a,b 와 반환 값에 number타입을 정의함
타입추론

const sum = (a: number,b: number):number => { return a + b }
(a: number,b: number):number 으로 매개 변수와 리턴 값 까지 타입을 주었다.
const sum = (a: number,b: number) => { return a + b }
반환 값에 타입을 주지 않아도 TS가 타입을 추론하여 number로 반환해준다.

선택적 매개변수 Optional parameter

function name(firstName: string, lastName?: string) {
	if(lastName) return `${firstName} ${lastName}`
    else return firstName
}

매개변수 lastName뒤에 ?는 선택적 매개변수로 인수값이 있을수도 없을수도 있다는 뜻
lastName이 있다면 if문의 return을 반환
없다면 else return을 반환한다.
매개변수 중 마지막에 올 수 있다.

초기화 매개변수 Default parameter

function name(firstName: string, lastName = "asdf") {
	return `${firstName} ${lastName}`
    
}

위 코드는 lastName에 인수 값을 할당하지 않으면 함수 정의할 때 넣어둔 asdf을 리턴하고
함수를 호출할 때 할당해 주면 lastName에 넣어 반환하게된다.

나머지 매개변수 Rest parameter

function name(firstName: string, ...listName:string[]) {
	return `${firstName} ${listName.join(" ")}`
}

나머지 매개변수는 매개변수의 수를 무한으로 받을 수 있다.
위 코드의 경우 타입 string 배열로 받은 매개변수 만큼 할당해 준다.
매개변수 중 마지막에 올 수 있다.