Typescript 란?
-
Typescript는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어입니다.
-
마이크로소프트에서 개발,유지하고 있으며 엄격한 문법을 지원하고 있습니다.
-
동적 타입 언어인 JavaScript의 단점을 보완하기 위해 Javascript 기반으로 만들어진 정적 타입 언어입니다.
Type
- 타입 추론 , 명시적 표현
let a = "hello"; //
// a = 1
let b: boolean = false;
let c = [1, 2, 3];
// c.push("1");
const player = {
name: "nico"
}
// player.name = 1
// player.hello()
player 안에 hello가 없기 때문에 에러 발생
맨 처음 a의 타입이 string으로 하였을 경우 타입스크립트는 string으로 인지하고 다음에 나온 숫자 1은 string이 아니기 때문에 에러를 발생하게 된다. : 타입추론
b 변수에 boolean의 타입을 명시적으로 표현하고 있기 때문에 만약 다른 타입을 쓸 경우 에러를 발생하게 한다. : 명시적 표현
c 변수는 배열안에 숫자 타입을 넣었기 때문에 타입추론으로 이 배열은 숫자만 넣을 수 있기 때문에 다른 타입의 종류를 넣게 되면 맞지 않다는 에러가 발생한다. 또한 Push()를 사용할 경우에도 숫자가 아닌 다른 타입을 넣어도 에러가 발생한다.
상수 player 안에는 string으로 타입추론이 되었는데 숫자 및 다른 타입을 넣을경우 에러가 발생한다.
- Optional(선택적 변수), Alias (별칭 타입)
Optional 타입 (선택적 변수)
const player: { name: string; age: number } = {
name: "chanhyo",
};
위에 나온 상황에서 player가 물결 표시로 에러를 띄우게 된다. 왜냐하면 player안에 age를 찾지 못했기 때문에 발생하게 된다.
const player: { name: string; age?: number } = {
name: "chanhyo",
};
이럴 경우 age바로뒤에 ?를 넣게 되면 name: string , age : number | undefined로 나오게 된다.
if(player.age < 10){
}
이렇게 사용할 경우 player.age에 undefined 라고 에러 띄우게 되는데 이걸 사용하려면
if (player.age && player.age < 10) {
}
만약 player를 엄청 많이 만들게 된다면 밑에 나온거처럼 계속 쓰게 되는데 이 경우에는 Alias(별칭) 타입을 생성할 수 있다.
장점 : 코드가 많은 타입을 재사용할 수 있다.Alias 타입
type Player = {
name: string;
age?: number;
};
const playerChanhyo: Player = {
name: "chanhyo", age: 28,
};
const playerNico: Player = {
name: "Nico",
};
function playerChanhyo(name: string): Player {
return {
name,
};
}
const playerChanhyo = (name: string): Player => ({ name });
const chanhyo = playerChanhyo("chanhyo");
chanhyo.age = 27;- readonly , Tuple
readonly (읽기 전용)
type Player = {
readonly name: string;
age?: number;
};
const playerMaker = (name: string): Player => ({ name });
const nico = playerMaker("nico");
nico.name = "aa" // 에러
Player에 name은 readonly로 읽기 전용으로 변경되었기 때문에 작동하지 않고 에러를 발생하게 된다
const numbers: readonly number[] = [1, 2, 3, 4];
// numbers.push(1)
Numbers는 readonly(읽기 전용)으로 변경되었기 때문에 작동하지 않고 에러를 발생하게 된다Tuple (array를 생성할 수 있다)
정해진 개수와 순서에 따라 배열 선언 순서가 바뀔경우 type이랑 같지 않아 에러를 발생한다.
const player: [string, number, boolean] = ["nico", 1, true];
// readonly도 사용가능 ⇒ readonly [...] 형태로 쓰게 되면 변경 x
// undefined, null, any
// any: 아무 타입
// undefined: 선언X 할당X
// null: 선언O 할당X
- void, unknown, never
void
void는 값을 반환하지 않는 함수의 반환 값을 나타냅니다.
함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입입니다.
The inferred return type is void
function noop() {
return;
}unknown
unknown타입은 모든 값을 나타냅니다.
이것은 any타입과 비슷하지만 any보다 unknown이 더 안전합니다. 이유는 unknown값으로 작업을 수행하는 것은 합법적이지 않기 때문입니다.
let a : unknown;
let b = a+ 1 허용 x
if (typeof a === 'number'){
let b = a + 1
이 안에서는 a 가 number 이기 때문에 작동한다.
}
function hello(a: any) {
a.b(); // OK
}
// function hello2(a: unknown) {
// a.b(); // 에러: Object is of type 'unknown'.
// }never
일부 함수는 값을 반환하지 않습니다.
이는 함수가 예외를 throw하거나 프로그램 실행을 종료함을 의미합니다.
function fail(msg: string): never {
throw new Error(msg);
}
