타입스크립트란❓
타입스크립트는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어입니다. 타입스크립트는 자바스크립트의 상위 집합으로, 자바스크립트 코드를 포함하면서 정적 타입 시스템을 추가합니다. 이는 개발자가 변수, 함수, 객체 등을 사용할 때 타입을 명시적으로 지정하고 검사할 수 있게 해줍니다.
타입스크립트는 정적 타입 검사를 제공하기 때문에 개발자가 실수로 인한 버그를 사전에 감지하고 예방할 수 있습니다. 이를 통해 코드의 가독성, 유지 보수성, 안정성을 향상시킬 수 있습니다. 또한, 개발자들 사이에서 코드의 의도를 명확하게 전달하고 문서화하는 데 도움을 줍니다.
타입스크립트는 자바스크립트와 호환되기 때문에 기존의 자바스크립트 코드를 그대로 사용하면서 점진적으로 타입스크립트로 전환할 수 있습니다. 이러한 특징은 대규모 프로젝트의 경우 특히 유용합니다.
타입스크립트는 다양한 개발 환경에서 사용할 수 있으며, 강력한 개발 도구와 풍부한 에코시스템을 제공합니다. 타입스크립트는 타입 정의, 제네릭, 인터페이스, 클래스, 모듈 등과 같은 고급 기능을 지원하여 개발자가 유연하고 확장 가능한 코드를 작성할 수 있게 합니다.
요약하자면, 타입스크립트는 자바스크립트의 상위 집합으로 정적 타입 시스템을 추가한 프로그래밍 언어입니다. 타입스크립트는 코드의 안정성과 가독성을 향상시키며 대규모 프로젝트에서 특히 유용합니다.
function add(a: number, b: number): number {
return a + b;
}
const result: number = add(3, 5);
console.log(result);타입스크립트는 함수의 매개변수와 반환값에 대한 타입을 명시적으로 지정하고 있습니다. 이를 통해 개발자는 함수를 사용할 때 올바른 타입의 인수를 전달하고 반환값을 올바른 타입으로 처리할 수 있습니다.
📌변수의 타입 지정
1. 타입 주석(Type Annotation)
: 변수 선언 시 콜론(:) 뒤에 원하는 타입을 명시합니다. 예를 들어, let 키워드를 사용하여 변수를 선언하고 타입 주석을 추가할 수 있습니다.
let age: number = 30;위의 예시에서 age 변수의 타입은 number로 명시되었습니다.
2. 타입 추론(Type Inference)
: 변수의 초기값을 할당하는 경우, 타입스크립트는 할당된 값의 형태를 기반으로 변수의 타입을 추론합니다. 변수의 타입을 명시적으로 지정하지 않아도 됩니다.
let age = 30; // number 타입으로 추론됨위의 예시에서 age 변수의 타입은 초기값 30의 형태에 따라 number로 추론됩니다.
3. 타입 별칭(Type Alias)
: 복잡한 타입을 간략하게 표현하기 위해 타입 별칭을 사용할 수 있습니다. type 키워드를 사용하여 타입 별칭을 선언하고, 해당 별칭을 변수의 타입으로 사용할 수 있습니다.
type Point = {
x: number;
y: number;
};
let p: Point = { x: 0, y: 0 };위의 예시에서 Point는 { x: number, y: number } 형태의 타입 별칭입니다. 변수 p의 타입으로 Point를 사용하고 있습니다.
4. 유니온 타입(Union Type)
: 변수가 여러 가지 타입 중 하나일 수 있는 경우 유니온 타입을 사용하여 변수의 타입을 지정할 수 있습니다. | 기호를 사용하여 여러 타입을 연결합니다.
let value: string | number = "hello";
value = 10;위의 예시에서 value 변수는 문자열 또는 숫자 타입을 가질 수 있습니다.
5. 제네릭 타입(Generic Type)
: 변수가 다양한 타입을 가질 수 있지만, 특정 조건을 충족해야 할 때 제네릭 타입을 사용할 수 있습니다. 제네릭은 타입 매개변수를 사용하여 타입을 추상화하는 기능입니다.
function identity<T>(value: T): T {
return value;
}
let result = identity<string>("hello");위의 예시에서 identity 함수는 제네릭 타입 T를 가지고 있으며, 매개변수 value와 반환값의 타입이 동일합니다. result 변수는 identity 함수의 반환값에 타입을 명시적으로 지정한 예시입니다.
📌오브젝트와 배열의 타입 지정
😯 객체(Object)의 타입 지정
let 이름 : { name? : string } = { name : "민수" };name? : name의 속성은 옵션
: 객체의 타입을 지정하기 위해 인터페이스(Interface)나 타입(Type)을 사용할 수 있습니다. 이를 통해 객체의 속성 이름과 해당 속성의 타입을 명시할 수 있습니다.
인터페이스(Interface)를 사용한 객체 타입 지정 예시:
interface Person {
name: string;
age: number;
address?: string;
}
const person: Person = {
name: "John",
age: 30,
};// object에 타입지정한 속성이 많을 경우
interface Person {
[ key : string ] : string;
age: number;
address?: string;
} // 글자로된 모든 object 속석의 타입은 : string
위의 예시에서 Person 인터페이스는 name과 age라는 필수 속성을 가지고 있습니다. 또한, address는 선택적 속성으로 지정되어 있습니다. person 변수는 Person 인터페이스를 따르는 객체로 선언되었습니다.
타입(Type)을 사용한 객체 타입 지정 예시:
type Person = {
name: string;
age: number;
address?: string;
};
const person: Person = {
name: "John",
age: 30,
};인터페이스 대신 타입 별칭(Type Alias)을 사용하여도 동일한 결과를 얻을 수 있습니다.
🤔 배열(Array)의 타입 지정
: 배열의 타입을 지정하기 위해 제네릭 타입(Generic Type)을 사용합니다. 제네릭 타입은 <타입> 형태로 배열의 원소 타입을 명시합니다.
const numbers: number[] = [1, 2, 3, 4, 5];위의 예시에서 numbers 변수는 number 타입의 배열로 선언되었습니다. 배열의 각 원소는 숫자여야 합니다.
또는, Array<타입> 형태로 배열의 타입을 지정할 수도 있습니다.
const names: Array<string> = ["John", "Jane", "Smith"];위의 예시에서 names 변수는 string 타입의 배열로 선언되었습니다. 배열의 각 원소는 문자열이어야 합니다.
타입스크립트는 배열의 타입과 길이를 체크하여 올바른 타입의 원소가 할당되고 접근되는지 확인합니다.
📌함수의 타입 지정
1. 함수 매개변수와 반환값에 타입 주석(Type Annotation):
함수의 매개변수와 반환값에 타입을 지정하기 위해 콜론(:) 뒤에 원하는 타입을 명시합니다.
function add(a: number, b: number): number {
return a + b;
}위의 예시에서 add 함수는 number 타입의 a와 b 매개변수를 받으며, number 타입의 결과를 반환합니다.
2. 함수 매개변수와 반환값에 타입 추론(Type Inference):
함수의 매개변수에 초기값을 할당하거나 함수의 반환값이 있는 경우, 타입스크립트는 해당 값의 형태를 기반으로 타입을 추론할 수 있습니다.
function multiply(a: number, b = 1) {
return a * b;
}위의 예시에서 multiply 함수는 number 타입의 a와 b 매개변수를 받으며, b의 초기값은 1로 설정되어 있습니다. 반환값은 number 타입으로 추론됩니다.
3. 함수 타입(Type of Function):
함수에 타입을 지정할 때, 함수 타입을 사용하여 타입을 명시할 수 있습니다. 이는 함수를 변수에 할당하거나 다른 함수의 매개변수로 전달할 때 유용합니다.
type Calculator = (a: number, b: number) => number;
const add: Calculator = (a, b) => a + b;위의 예시에서 Calculator는 number 타입의 a와 b 매개변수를 받고 number 타입의 결과를 반환하는 함수 타입입니다. add 함수는 Calculator 타입을 따르는 함수로 할당되어 있습니다.
4. 제네릭 타입(Generic Type):
제네릭 타입을 사용하여 함수 내부에서 사용되는 타입을 동적으로 처리할 수 있습니다.
function identity<T>(value: T): T {
return value;
}위의 예시에서 identity 함수는 제네릭 타입 T를 가지고 있으며, 매개변수 value와 반환값의 타입이 동일합니다. 이렇게 제네릭 타입을 사용하면 함수를 호출할 때 매개변수의 타입을 동적으로 결정할 수 있습니다.
