✅ 타입스크립트란 ?
자바스크립트는 너무나 관대해서 어떤 타입이 들어오든 그냥 넘어갈 때가 많다.
const sum = (a,b) => a+b; 에서 a와 b는 숫자로 받을 생각이었지만, 여기에 문자열을 넘기면 그대로 적용이 됩니다. 또한 존재하지 않는 프로퍼티를 읽어 undefined를 출력하기도 한다.
그래서 좀더 깐깐한 언어인 타입스크립트를 통해 적용 할 수 있습니다. 타입스크립트는 자바스크립트를 바탕으로 하여 거의 유사하지만 좀 더 강력한 기능을 제공한다.
🔵 타입스크립트 특징
-
TypeScript는 JavaScript에 추가적인 구문을 추가하여 editor와의 단단한 통합을 지원합니다. editor에서 초기에 오류를 잡을 수 있습니다.
-
TypeScript 코드는 JavaScript가 실행되는 모든 곳(브라우저, Node.js 또는 Deno 및 앱 등)에서 JavaScript로 변환될 수 있습니다.
-
TypeScript는 JavaScript를 이해하고 타입 추론(type inference)을 사용하여 추가 코드 없이도 훌륭한 도구를 제공합니다.
✅ 타입스크립트 기본 문법정리
🔵 Type Sistem (명시적 정의와 추론)
타입스크립트는 타입을 명시하거나 추론이 가능하다. 아래 타입을 명시한 예시를 보자.
let a:string = true;
// => Type 'boolean' is not assignable to type 'string'.a라는 변수에 string 타입을 적용했음에도 boolean값으로 할당하여 에러가 발생한다. 타입 추론도 마찬가지다.
let b = true;
b = 1
// => Type 'number' is not assignable to type 'boolean'..위와 같이 변수 b를 boolean값으로 선언 후 숫자 1을 재할당했다. 이 때 타입스크립트에서는 위에 선언한 타입을 추론하여 넘버타입이 오길 바란다.
만약 추론하기 어려울 때는 어떠한 상황일까 ? 아래 예제를 보자.
// x
let c = [1,2,3]
c.push('1')
// good
let d:number[] = []
d.push(2)위의 예제 처럼 추론하기 어려울 경우에는 타입을 명시적으로 정의하는게 좋다. 하지만 추론이 가능한 상황이라면 가독성 측면에서 안쓰는게 좋을 때가 많다.
🔵 Optional
함수를 선언했을 때, 필수적으로 받아오지 않아도 되는 파라미터가 있다면, '?'를 사용하여 옵셔널로 지정할 수 있다. 이경우 함수 실행을 하면서 옵셔널로 설정된 파라미터에 인자를 전달하지 않아도 함수가 정상 작동됨을 알 수 있다.
const user : {
name: string,
age?:number
} = {
name: "coco"
}
// player.age가 undefined일 가능성 체크
if(user.age && user.age < 10) {
//...
}
🔵 Alias Type
Type Aliases을 사용하여 객체 타입뿐만 아니라 모든 타입에 이름을 지정할 수 있습니다.
// Alias Type을 안쓴 경우
const user_one : {
name: string,
age?:number
} = {
name: "coco"
}
const user_two : {
name: string,
age?:number
} = {
name: "kaka",
age:18
}// Alias Type을 쓴 경우
type User = {
name: string,
age?:number
}
const user_one :User = {
name: "coco"
}
const user_two :User = {
name: "kaka",
age:18
}확실히 Alias Type을 사용한 경우 가독성이 좋고 불필요한 코드를 줄 일 수 있어서 좋다.
type User = {
name: string,
age?:number
}
const user_one :User = {
name: "coco"
}
const user_two :User = {
name: "kaka",
age:18
}
const myUser = (name:string):User => ({name})
// User타입으로 인해 testUser.age가 실행이된다. 위에서 옵션을 주었기 때문에
const testUser = myUser('baba')
testUser.age = 12위에 예제 처럼 Alias Type은 재사용이 가능하다.
🔵 Readonly
요소들을 읽기전용으로 지정할 수 있게 해줍니다. 이를 통해 함수형 방식이 가능해집니다
const numbers : readonly number[] =
[1,2,3,4,5]
numbers.push(1)
// 작동하지 않는다.🔵 Tuple
정해진 배열에 정해진 갯수의 요소와 순서의 맞는 타입의 값을 요구할때 Tuple이 유용하다.
const player : [string, number, boolean] =
["kiki", 1, true]
player[0] = 1 // 바꿀수없다. string으로 지정됨🔵 any
'무엇이든'. 말 그대로 무엇이든 입력할 수 있게된다. 타입체크를 '비활성화' 시켜버린다.
const a : any[] = [1,2,3,4]
const b : any = true
a + b //별다른 오류를 내뱉지 않는다._텍스트_자주 사용하는 것은 좋지 않다. 타입스크립트의 타입의 보호를 받을 수 없기 때문이다.
🔵 unknown
unknown타입은 모든 값을 나타냅니다. 이것은 any타입과 비슷하지만 any보다 unknown이 더 안전합니다. 이유는 unknown값으로 작업을 수행하는 것은 합법적이지 않기 때문입니다.
let a:unknown
if(typeof a === 'number'){
let b = a + 1
}
if(typeof a === 'string'){
let b = a.toUpperCase()
}🔵 void
void는 값을 반환하지 않는 함수의 반환 값을 나타냅니다. 함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입입니다.
void 0은 undefined와 같습니다. 명시적으로 반환 값을 설정하지 않는 함수는 undefined를 반환하기에 TypeScript에서는 void를 명시합니다.
// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name:string): void {
document.documentElement.classList.add(name);
}
// 리턴 값 타입이 숫자인 함수
function factorial(n:number): number {
if (n < 0) { return 0; }
if (n === 1) { return 1; }
return n * factorial(n-1);
}
// 리턴 값 타입이 문자인 경우
function repeat(text:string, count:number=1): string {
let result:string = '';
while(count--) { result += text; }
return result;
}🔵 never
일부 함수는 값을 반환하지 않습니다. 이는 함수가 예외를 throw하거나 프로그램 실행을 종료함을 의미한다. 자주 사용하지는 않지만 어떤 의미인지만 간단하게 파악하는게 좋다.
function fail(msg: string): never {
throw new Error(msg);
}