Typescript 기본 타입

---

불리언 ( Boolean )

• let isDone: boolean = false;

숫자 ( Number )

• let decimal: number = 6;

문자열 ( String )

• let color: string = "blue";
• color = 'red';
• 템플릿 리터럴도 적용된다. 표현식도 포함가능하다
  • let sentence: string = 'yellow, my name is ${ name }. age is ${ age + 1 }

배열 ( Array )

// 배열 타입은 두가지 방법으로 선언 가능하다.
let list: number[] = [1,2,3];
// 1. 배열 요소들을 나타내는 타입 뒤에 []를 쓴다.

let list: Array<number> = [1,2,3];
// 2. 제네릭 배열 타입을 쓴다.

튜플 ( Tuple )

• 튜플은 요소의 타입과 개수가 고정된 배열을 나타낸다.
  • 모든 요소들의 타입이 모두 같을 필요는 없다.

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 위 선언된 변수의 타입과 같음으로 성공
// 잘못된 초기화
x = [10, 'hello']; // 오류

정해진 인덱스에 위치한 요소에 접근하면 해당 타입이 나타난다. 그 외에는 오류가 발생한다.

열거 ( Enum )

• JavaScript 표훈 자료형 집합과 사용하면 도움이 될만한 데이터 형이다?
  • enum은 값의 집합에 더 나은 이름을 붙여준다?
  • enum은 기본적으로 배열처럼 0부터 시작하는 번호를 가진다.
  • 하지만 번호를 수동으로 설정하여 변경할 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 기본 세팅

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
// 이렇게 Red에 숫자 1을 할당하면 1번부터 시작하는 번호를 각각 가진다. // Green = 2, Blue = 3

enum Color {Red = 1, Green = 3, Blue = 4}
let c: Color = Color.Green;
// 이렇게 하면 각각 번호가 매겨진 값들을 Key로 사용할 수 있다.

let colorNmae: string = Color[3]; // 'Green'
// 위처럼 배열과 객체 사이처럼 값을 가져올 수 있다.

Any

• 컴파일 검사를 통과하는 값을 지정할 때 사용되는 타입
  • 유저 / 서드 파티 라이버리 / 동적 컨텐츠에게 값을 받을 경우

let notSure: any = 4 ;
notSure = "maybe string"
notSure = false; // 이렇게 모든 값을 허용한다.

// 또한, any 타입은 타입의 일부만 알고 전체는 알지 못할 때 유용하다. ex) 여러 다른 타입이 섞인 배열
let list: any[] = [1, true, 'free'];

Void

• void는 어떤 타입도 존재할 수 없을 때 사용된다. any의 반대 타입
• 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 자주 사용된다.

function warnUser(): void {
console.log("warning");
}
// 이러면 반환 값이 없어도 실행된다.
// void 타입 변수는 null, undefined만 할당된다

let unusable: void = undefined;
unusable = null; // 성공 -- 이것이 가능한 이유는 '--strictNullChecks'를 사용하지 않아서

Null and Undefined

• null 과 undefined는 자신의 타입 이름으로 사용된다

let u: undefined = undefined;
let n: null = null;

• 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이다.
  • 그러므로 null / undefined는 number와 같은 타입에 할당된다.
  • 하지만 --strictNullChecks 를 사용하면 오직 any와 각자 타입에서만 할당 가능하다.
    • 예외적으로 undefined는 void에 할당 가능하다..
• 일반적인 에러를 방지하기 위해 사용된다
  • 유니언 타입을 활용하여 string | null | undefined 처럼 사용한다.

Never

• 절대 발생할 수 없는 타입을 나타낸다.
• 함수 표현식 / 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다??
  • 변수 또한 타입 가드에 의해 아무 타입도 얻지 못하게 좁혀지면 never 타입을 얻게 된다?
• never도 다른 모든 타입의 할당 가능한 하위 타입이다.
  • 하지만 어떤 타입도 never에 할당되거나 하위타입이 아니다. 심지어 any도 안됨

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
throw new Error(message);
}

// 반환 타입이 never로 추론된다. error 함수의 타입이 never이기 때문에
function fail() {
return error("someting fail");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다. while도 도달못한다
function infiniteLooop(): never {
while (true) {
}
}

객체 ( Object )

• 객체는 원시 타입이 아닌 타입을 나타낸다.

  • 원시타입 : number, string, boolean, bigint, symbol, null, undefined

• object 타입을 쓰면, object.create 같은 API가 더 잘 나타난다?

declare function create(o: object | null): void; 
// 함수의 타입이 void여서 실행문 없어도 오류가 발생하지 않는다.
// create로 받아오는 매개변수는 object여야 실행된다.

create({ props: 0}); // 객체여서 실행
create(null); // null은 왜 되는거야??
create(undefined); // undefined는 또 왜 안되는거야??

타입 단언 ( Type assertions )

• 타입 단언은 컴파일러를 대신해서 인간이 대신 검사를 했다고 타입 스크립트에게 고지한다.
  • 타입단언은 런타임에 영향을 미치지 않는다. 또한 타입스크립트가 개발자가 어떤 검사를 수행했다고 인지한다.

// 두가지 형식이 있다

// 1. angle-bracket 문법
let someValue: any = "this stirng!";
let strLength: number = (<string>someValue).length;
// any 타입의 변수의 앞에 타입을 angle-bracket으로 적어주고 대괄호로 감싸주면 string으로 컴파일된다.

// 2. as 문법
let someValue: any = "this stirng too";
let strLength: number = (someValue as string).length;
// any 타입의 변수의 뒤에 'as type'으로 적어주고 대괄호로 감싸면 string으로 컴파일된다.

Typescript와 JSX를 함께 사용할 때는 as문법만 허용된다

결론

---

새로운 친구들이 많다. 후후