TypeScript?

타입스크립트는 자바스크립트에 타입을 부여한 언어라고 한다.

문법도 별차이가 없고 그냥 자바스크립트의 확장팩이라고 생각합시다.

타입스크립트를 쓰는 이유????

타입스크립트는 아래 관점에서 자바스크립트 코드의 품질과 개발 생산성을 높일수있다.

에러의 사전방지 (타입을 엄격하게 지정)

에러는 사라지지 않으니 그냥 사전에 방지하려는 목적이 제일 크다.

const sum =  (a: number, b: number) => {
  return a + b;
}

타입을 미리 지정하기 때문에 일부러 이상한 똥값을 넣는게 아니라면 타입 오류는 일어날일이 없다.

타입 지정 정리

// 변수 선언
let name : string = 'rang'; // 변수명 : 타입
let age : number = 20;
let merry : boolean = false;

//array , object 타입지정

let members : string[] = ['rang','john']; // array

let me : {age : number} = {age : 20}; //object

//error 메시지
let name :string = 'rang';
name = 123;

//err : Type 'number' is not assignable to type 'string'.(2322)

이렇게 변수 선언시 타입을 지정 해 줄수 있다.

근데 아래처럼 해도 자동으로 타입이 할당되니 편한대로 하자.

let name = 'rang';
let age = 20;

유니온 타입 지정

그냥 변수에 복수의 타입을 지정하는것이라고 보면 된다.

let test :string | number; // 문자얄이나 숫자가 할당이 될수 있음.

함수에 타입 지정

에? 함수에도 타입을 지정한다고요..?

그렇다. 함수에도 타입을 지정할수있다.

근데 뭐 그리 어려운건 아니고 리턴값을 어떤 타입으로 할지를 정하는 거라 그리 어렵지는 안핟.

function sum(n1:number , n2:number) :number{ //숫자를 반환하는 함수.
	return n1+n2
}

function sum(n1:number , n2:number) :void{ //return 방지하려면 void로 지정하기
	return n1+n2 //error
}

function test(x? : number){ //파라미터가 있어도되고 없어도 될때 사용

}

function test(x?:string | boolean) :string | void { // 유니온 지정이 가능함
}

타입을 변수에 담기

말이 저렇지 그냥 커스텀 타입이라고 해도 될듯 하다.

let animal :string | number | undefined; // 이렇게 선언할경우 너무 길어짐

type AnimalType = string | number | undefined; // 이렇게 변수에 담는다.

let animal :AnimalType; //이렇게 담아주면 된다.

아 추가로....

const 로 선언한 오브젝트 자료형은 재할당은 안되지만 안에 있는값은 바꿀수있다. (내용물 바꿔치기)

const data = { name : 'rang');

data.name = 'ha' // 이러면 rang이 ha로 변경됨

근데 readonly 사용시 재할당이 안되게 설정이 가능하게 할 수 있다.

readonly <- 읽을 수만 있다는 뜻이니까 다들 이해한걸로 알겠다.

type wife = {
  readonly name : string
};

let 와이프 :wife = {
  name : ' '
} 

와이프.name = 'minori' // readonly라서 이렇게 선언이 불가함.

조건부로 타입 지정

type Age<Type> = Type;

타입 지정도 조건을 걸어보자.

위처럼 작성하면 Age<입력한타입> = 입력한 타입 이렇게 남게 된다.

그리고 타입 조건식은 주로 삼항연산자를 이용합니다.

type Age<T> = T extends string ? string : unknown;

T라는 값이 string의 성질을 가지고 있으면 string을, 아니면 unknown을 반환하는 코드이다.

Literal Type 만들기

Literal은 "문자 그대로" 라는 뜻이다.

즉, 문자 그대로가 타입이 된다는 의미다.

let tako :'대머리';

위 처럼 작성하면 tako에는 ‘대머리’ 라는 글자만 할당할 수 있다. 이런걸 Literal Type이라고 합니다.

이런걸 어디서 써먹냐면 가위바위보 만들때(고작?) 써 먹을 수 있다.

function rock(a : '가위'|'바위'|'보') :('가위'|'바위'|'보')[]{ // 가위 바위 보 중에 하나를 입력받고
  return ['가위','보'] // 가위 바위 보 가 있는 배열을 리턴
}

위처럼 함수, 배열에도 사용할수있다.

as Const 문법

var dict = {
	name : 'kim'
} as const;

object안에 있는 모든 속성을 readonly로 변경해주는 씹사기 문법이다.

함수: Type alias

type NumOut = (x:number , y:number) => number; // 두개의 숫자를 파라미터로 받고 숫자를 리턴하는 함수의 타입.

let sum :Numout = function(x,y) { //두 파라미터를 받고 더하여 리턴하는 함수
	return x+y
}

함수 선언할때마다 타입 지정하지 말고 위처럼 지정을 미리 해놓고 갖다 쓰자.

methods 안에 타입 지정하기

type Member = {
name : string,
age : number,
plusOne : (x : number) => number,
dchangeName : () => void
};
//위 타입을 사용해보자
let my :Member = {
	name : 'rang',
	age : 20,
	plusOne(age){
		return age+1	
	},
changeName(name){
		cosnole.log(name)
	}
}

어쩌면 이 파트가 제일 중요하다고 생각한다.

보통 Api호출 할때 저렇게 object로 값이 날라오는 경우가 있는데,

이때 타입 설정을 안하고 그냥 받아서 넣어버리면 lint에서 불같이 에러를 내뿜는다....

Object 타입 지정은 꼭! 숙지 하길 바란다.

interface 문법

interface Square {
	color : string,
	width : number,
}
let squ : Square { color : 'red' , width : 10 }

interface문법을 사용하면 Object자료형의 타입을 보다 쉽게 지정이 가능하다.

위에서 말했듯이 실무에서는 생각보다 Object 자료형을 많이 만나게 되니 숙지하는것을 권장한다.

extands 문법

A 타입을 B타입에 할당하고 추가로 @를 얹어서 새롭게 정의하는 방법이다.

코드로 보면 이해가 빠르다.

interface Student {
	name :string,
}

interface Teacher extends Student { //Teacher에 Student 추가
	age :number,
}

이렇게 되면 결과적으로 Teacher에는 name과 age가 존재하게 된다.

오늘은 여기까지. 다음에는 2부로 찾아오겠다.