이 글은 프로젝트를 하다가 TypeScript 공부가 필요해서 작성하게 되었다
1. TypeScript란?
- JavaScript에 타입을 지정해준 것이다
2. TypeScirpt는 왜 사용하는 것일까?
- 오류를 잡아내기 쉽다
타입스크립트는 컴파일 언어라고 했는데, 바로 이 컴파일 과정에서 오류를 잡아내기 때문에 오류를 잡아내기 쉽다는 장점이 있다.
3. TypeScript 기초문법
변수
우리는 JS에서 변수 선언을 이렇게 한다
let name = "kim"이렇게 JS변수에는 String, Number, Boolean 모든 타입의 값이 들어갈 수 있다
하지만 타입스크립트는 변수의 자료형을 지정해줄 수 있다
let name :string = "kim"이렇게 타입을 지정해주고 name 이라는 변수안에 100이라는 값을 저장해주면 에러가 발생한다
여러 자료형을 알아보자
let name :string = "park"; // 문자형 자료형
let num :number = 1; // 숫자형 자료형
let arr :string[] = ["kim", "park"]; // 문자 값을 담고 있는 array형
let a :boolean = true; // boolean형 자료형등이 있다.
함수
let 변수;
function 함수이름(변수) {
return 변수;
}JS식 함수이다
함수의 인자 또한 TS에서 자료형을 지정해줄 수 있는데
function 함수이름(변수 :number) {
return 변수;
}이렇게 소괄호 안에 인자와 함께 자료형을 지정해주면 된다
그리고 함수의 리턴값 또한 자료형을 지정해줄 수 있다
function 함수이름(변수 :number) :number {
return 변수;
}소괄호와 중괄호 사이에 자료형을 적으면 리턴값의 자료형을 지정할 수 있다
Object 자료형
let a = {
name: "kim"
}위 오브젝트 또한 자료형을 지정해보자
let a :{ name :string } = {
name: "kim"
}이렇게 지정할 수 있다
- TypeScript 자료형은 검색을 통해 찾아서 쓰면 된다
Union Type
Union Type이란?
- 두개 이상의 타입을 지정하고 싶을 때 쓰는 자료형이다
사용방법
| (or) 기호를 사용하면 두개 이상의 타입을 지정할 수 있다
let 변수 :string | number;변수를 이렇게 지정하면 string 또는 number 타입의 변수를 지정할 수 있다
:any 와 :unknown
:any 타입은 모든 자료형을 사용할 수 있게 해주는 타입이지만 타입스크립트의 기능을 잃어버리기 때문에 에러를 찾아주지 않는다
:any 타입의 단점을 보완하기 위해서 만들어진 자료형이 :unknown 자료형이다
모든 자료형을 사용할 수 있고 에러도 찾아준다
Type 지정 변수화
만약 Type이 너무 길다!
우리는 Type 또한 변수화를 할 수 있다
let a :number | string | booldean;
a = "kim";
a = 1;
a = true;이렇게 타입이 너무 길면 나중에 적기 힘들어지기 때문에 타입을 변수화를 시켜보자
type T = number | string | boolean;
let a :T;
a = "kim";
a = 1;
a = true;타입을 변수화 시킬때는 type이라는 명령어로 선언해주면 된다
TypeScirpt 2편에서 계속
