[TS] 타입스크립트 기초 - 1 (개인소장)

기본 타입형

number, string, boolean

 

arrays, objects

 

+함수타입, 파라메터 타입

 

 

1) 기본

let age: number = 24;

let name: string;

let check boolean = true;

 

 

 타입 대문자 쓰지마라

 

2) 문자열배열?

let name: string[];

name = ['a', 'b'];

이렇게 배열안에 문자열만 드감

 

3)객체형태 정의

let person;

person = {

name: 'max',

age: 32

}

디폴트는 any로 저장(대체로 안씀)

 

따라서

let person{

name: string,

age: number

};

 

person = {

name: 'max',

age: 32

}

 

위 2,3 합쳐서

 

let person{

name: string,

age: number

}[];

이렇게 쓰면 객체를 배열에 담을 수 있음

 

---

유형추론

 

변수를 만들면서 값을 할당하는경우?

let c = '리액트 강의';

c = 123;

이렇게하면 오류뜸(명시가 없어도 타입스크립트 타입추론때문)

 

따라서 let c = '리액트 강의'; 이렇게만 할당해줘도

이 c는 문자열이다 이렇게 알고

코드 작성시 불필요하게 타입을 쓸 필요가 없다

 

그러면 변수 선언하고 디폴트 값 할당 시 탑이이 알아서 정해짐

 

 

 

4) 한개 변수에 여러 타입 선언해주기(보통의 경우와 다름)

=> 유니온 타입

let c: string | number | boolean | string[];

 

이렇게 여러 타입 할당 가능

 

 

 

5)type Aliases

 

동일한 타입을 여러번 선언할 때 쉽게 하는방법

타입 별칭 -> 파이썬에서 import as 랑 비슷한

type person = {name: string, age: number
};이렇게 선언해주고

 

let person: person{

name: string,

age: number

};

 

이런식으로 사용함

 

-작성 코드량 줄어들지만 코드 식별에 어려움 ㅇ을 수 있음

 

 

 

6)

1. 타입을 가진 함수

const add =  (a: number, b: number) => {

 

return a + b;
}

이렇게 되면 add 함수타입을 number로 자동으로 추론해줌

 

 

+

const printNum = (v: any) =>{

console.log(v);

}

 

이런 retrun 없는 경우 함수는 void 타입이 된다

이때 이 함수의 반환값을 받으면 

undifined 가 된다 (중요!!!!!!!!!!!!!!!!!)

 

 

 

 

7)제네릭generics

 

const insertarr = (a: any[], value: any) =>{

const newarr = [value, ...];return newarr;

}

 

const demoarr = [1, 2, 3];

const updatearr = insertarr(demoarr, -1);

이렇게 실행하면 [-1, 1, 2, 3]배열이 업데이트배열에 반환됨

 

문제는 updatearr 배열이 any 타입이 되어버리는데 

예를들어 updatearr는 이제 number형으로 인식하고

updatearr[0].split('');(문자열에서만됨) 

이런식으로 자르면 js에서는 되는것처럼 문법 오류는 못 찾는데

실행하면 컴파일 오류뜸(숫자라서)

ts는 값이 nuber인지 모름...

 

이걸 뭐 어떻게 해야되나? (타입스크립트 장점 없어짐)

 

여기서 제네릭 쓴다

 

<>이걸 추가해야됨

c++에서 처럼 파라메타를 살펴야 이 함수 반환 타입을 추론할수 있다는 것을 알게됨

 

const insertarr = <T> (arr: T[], value: T) =>{

const newarr = [value, ...arr];return newarr;

}

 

const demoArr = [1, 2, 3];
const updateArr = insertArray(demoArr, -1); // TypeScript가 타입을 추론하여 updateArr의 타입을 number[]로 결정

updateArr[0].split(''); // TypeScript가 오류를 감지하여 문자열에서 사용되는 split 메서드는 number에서 사용할 수 없음을 알려줌

 

const updatearr = insertarr(문자열배열, 문자열);이렇게넣어주면?

updatearr[0].split(''); 동작

 

 

 

따라서 제네릭을 통해 T들이 같은 타입을 가져야 한다는것을 알게해줌

 

제네릭을 사용함으로써, 함수에 전달되는 값의 타입을 유연하게 처리하고, 반환되는 배열의 타입을 추론하여 정확한 타입 체크

TypeScript의 타입 안정성과 장점을 유지하면서, 일반적인 동작과 타입 검사를  수행

 

 

 

 

 

 

 

 

 

 

 

 

결론: 유연성, 타입안정성 잡을 수 있다.

 

타입 안정성: 타입스크립트는 정적 타입 언어로, 변수, 함수 및 객체의 타입을 명시적으로 선언할 수 있습니다. 이를 통해 개발자는 코드 작성 시 타입 관련 오류를 사전에 발견할 수 있고, 컴파일 과정에서 타입 체크를 수행하여 런타임 시 타입 관련 오류를 방지할 수 있습니다. 이는 코드의 안정성을 높이고 디버깅을 용이하게 만듭니다. 

 

유지보수성: 타입스크립트는 코드의 가독성과 유지보수성을 향상시키는 기능을 제공합니다. 명시적인 타입 선언은 코드를 이해하기 쉽게 만들어주며, 다른 개발자와의 협업 시 코드의 의도를 명확히 전달할 수 있습니다. 또한, IDE의 지원을 받아 자동 완성, 오류 강조, 리팩토링 등의 기능을 활용할 수 있어 생산성을 향상시킵니다. 

 

코드 예측성: 타입스크립트는 정적 타입 체크를 통해 코드의 예측성을 높입니다. 타입 정보를 기반으로 IDE나 도구가 코드 완성 기능을 제공하고, 잠재적인 버그를 미리 예방할 수 있습니다. 이는 개발자가 코드 작성 시 실수를 최소화하고 일관된 코드 스타일을 유지할 수 있도록 도와줍니다. 

 

대규모 프로젝트 관리: 타입스크립트는 대규모 프로젝트의 관리를 용이하게 합니다. 코드베이스가 커지면서 발생하는 복잡성과 의존성을 타입 체크를 통해 잡아낼 수 있으며, 모듈 시스템과 네임스페이스를 활용하여 코드를 모듈화하고 구조화할 수 있습니다.