리액트 강의를 들으며 어쩌다 보니 타입스크립트를 사용하게 된 경우라서 개념을 확실하게 하고 싶단 생각에 기초부터 다시 공부해보기로 했다.
타입스크립트
자바스크립트의 상위호환 언어로 타입 안정성을 보장해준다는 것이 가장 큰 장점이다.
따라서 런타임 에러를 방지할 수 있다. 코드에 타입을 명시하기 때문에 코드가 실행되기 전 에러를 발생시켜 사전에 제거할 수 있다.
타입스크립트로 코드 작성을 하면 컴파일 시 자바스크립트로 변환되고 브라우저는 변환된 자바스크립트 코드를 읽는 것이다.
타입스크립트는 타입을 굳이 명시하지 않아도 변수 선언 시 타입을 추론하기 때문에 한번 선언한 변수엔 다른 타입의 값을 할당할 수 없다.
타입스크립트의 타입
타입스크립트의 타입은 기본적으로 자바스크립트와 동일하다. 추가적인 몇개의 타입만 있을 뿐이다.
type Player = {
name: string;
age?: string;
};
optional 타입은 해당 값이 없을 수도 있다는 것을 의미한다.
변수명 뒤에 ?를 붙여주면 된다.
Alias 타입은 재사용이 가능한 타입이다. 객체타입에 적용하면 편리하게 사용할 수 있다.
function play(name: string): Player {
return {
name,
};
}
함수의 타입 지정하는 방법도 동일하다.
함수에서 Alias 타입을 사용하여 리턴값의 타입을 쉽게 지정할 수 있다.
const player: readonly [string, number, boolean] = ["seo", 20, true]
Tuple은 특정위치에 특정 타입이 오도록 하는 배열 형식 타입이다.
readonly 옵션은 변수 수정이 불가능 하게 한다.
let a: unknown;
if(typeof a ==='string'){
let b = 'dd'
}
unknown 타입은 변수 선언 시 타입을 모를 때 사용된다. 하지만 변수를 사용할 때는 변수의 타입을 확인하는 과정을 거쳐야 변수 사용이 가능해진다.
function hello() {
console.log("x");
}
void 타입은 아무것도 리턴하지 않는 함수를 대상으로 하는 타입이다. 따로 지정해줄 필요는 없다.
function hello(): never {
throw new Error("xxx");
}
never 타입은 함수가 절대 리턴하지 않을 때 발생한다. 함수가 예외처리를 하거나 프로그램을 종료시킬 때 발생한다.
'Tech > TypeScript' 카테고리의 다른 글
[TS 기초] TS의 객체 지향적 특징 (0) | 2023.03.21 |
---|---|
[ TS 기초 ] 함수 - Call signiture / 오버로딩 / 제너릭 (0) | 2023.03.21 |
[Typescript / TS] 영화 웹 서비스 만들기 (0) | 2023.02.07 |
[Typescript / TS] Frame motion을 사용한 애니메이션 (0) | 2023.01.29 |
[Typescript / TS] ToDo 칸반보드 만들기 (0) | 2023.01.23 |
리액트 강의를 들으며 어쩌다 보니 타입스크립트를 사용하게 된 경우라서 개념을 확실하게 하고 싶단 생각에 기초부터 다시 공부해보기로 했다.
타입스크립트
자바스크립트의 상위호환 언어로 타입 안정성을 보장해준다는 것이 가장 큰 장점이다.
따라서 런타임 에러를 방지할 수 있다. 코드에 타입을 명시하기 때문에 코드가 실행되기 전 에러를 발생시켜 사전에 제거할 수 있다.
타입스크립트로 코드 작성을 하면 컴파일 시 자바스크립트로 변환되고 브라우저는 변환된 자바스크립트 코드를 읽는 것이다.
타입스크립트는 타입을 굳이 명시하지 않아도 변수 선언 시 타입을 추론하기 때문에 한번 선언한 변수엔 다른 타입의 값을 할당할 수 없다.
타입스크립트의 타입
타입스크립트의 타입은 기본적으로 자바스크립트와 동일하다. 추가적인 몇개의 타입만 있을 뿐이다.
type Player = {
name: string;
age?: string;
};
optional 타입은 해당 값이 없을 수도 있다는 것을 의미한다.
변수명 뒤에 ?를 붙여주면 된다.
Alias 타입은 재사용이 가능한 타입이다. 객체타입에 적용하면 편리하게 사용할 수 있다.
function play(name: string): Player {
return {
name,
};
}
함수의 타입 지정하는 방법도 동일하다.
함수에서 Alias 타입을 사용하여 리턴값의 타입을 쉽게 지정할 수 있다.
const player: readonly [string, number, boolean] = ["seo", 20, true]
Tuple은 특정위치에 특정 타입이 오도록 하는 배열 형식 타입이다.
readonly 옵션은 변수 수정이 불가능 하게 한다.
let a: unknown;
if(typeof a ==='string'){
let b = 'dd'
}
unknown 타입은 변수 선언 시 타입을 모를 때 사용된다. 하지만 변수를 사용할 때는 변수의 타입을 확인하는 과정을 거쳐야 변수 사용이 가능해진다.
function hello() {
console.log("x");
}
void 타입은 아무것도 리턴하지 않는 함수를 대상으로 하는 타입이다. 따로 지정해줄 필요는 없다.
function hello(): never {
throw new Error("xxx");
}
never 타입은 함수가 절대 리턴하지 않을 때 발생한다. 함수가 예외처리를 하거나 프로그램을 종료시킬 때 발생한다.
'Tech > TypeScript' 카테고리의 다른 글
[TS 기초] TS의 객체 지향적 특징 (0) | 2023.03.21 |
---|---|
[ TS 기초 ] 함수 - Call signiture / 오버로딩 / 제너릭 (0) | 2023.03.21 |
[Typescript / TS] 영화 웹 서비스 만들기 (0) | 2023.02.07 |
[Typescript / TS] Frame motion을 사용한 애니메이션 (0) | 2023.01.29 |
[Typescript / TS] ToDo 칸반보드 만들기 (0) | 2023.01.23 |