[typescript] typescript 설치, 필수문법

드디어 타입스크립트 시작!

요즘 프론트엔드 채용공고에 아주아주 많이 보이기때문에 타입스크립트는 꼭꼭 공부해야겠다고 생각했었다.

 

 

 

typescript란?

 

javacript + type 문법 (자바스크립트 업글버전)

 

1. node.js 최신버전으로 설치

2. 터미널 오픈 후 npm install -g typescript 

3. 작명.ts 파일 생성

4. tsconfig.json 파일 생성 후 아래의 코드 복붙 *컴파일시 옵션설정이 가능한 곳

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

ts파일은 웹브라우저가 읽을 수 없다.

브라우저는 js만 읽을 수 있기 때문에 ts파일을 js파일로 변환해야 사용이 가능하다. 

변환은 어떻게?

터미널에 tsc -w 입력해두면 자동으로 변환됨

 

입력하면 자동으로 index.js 파일이 생성된다.

js로 변환되는 과정을 컴파일된다~ 라고함

 

 

 

 

typescript의 기본문법

 

let 이름: string = "김다빈"; //이변수엔 string 타입만 들어올 수 있다.

let arr: string[] = ["kim", "da", "bin"]; //string이 담긴 array만 들어올 수 있다.

let object: { name?: string } = { name: "kim" }; //object랑 key는 똑같이 만들고 value만 타입지정
//name뒤의 ?는 지정한 타입이 들어올수도 있고 안들어올수도 있다는 의미

//다양한 타입이 들어올 수 있게 하려면
let a: string | number = "kim";

//타입의 길이가 너무길면 변수에 담아서 쓸 수 있음
//다른 변수들과 차별점을 두기위해 첫글자는 대문자로!
type Name = string | number;
let b: Name = 123;

//함수의 파라미터, return 값도 타입지정 가능
function 함수(x: number): number {
  return x + 2;
}

//array에 쓸 수 있는 tuple 타입
//array 만들때 특정자리에 특정타입이 들어오게 만들기
//무조건 첫번째는 number, 두번째는 boolean으로 지정하기
type Member = [number, boolean];
let john: Member = [11, false];

//object에 타입지정할 속성이 너무 많으면
type Member1 = {
  [key: string]: string; //글자로된 모든 object 속성의 타입은 : string
};

let john1: Member1;

 

 

array 다른 예제

let project: { member: string[]; days: number; started: boolean } = {
  member: ["kim", "park"],
  days: 30,
  started: true,
};

 

 

union 타입

 

타입 2개 이상이 합쳐진 타입으로

타입의 후보는 있지만 정확한 타입이 지정되지 않았을 때 사용한다.

let 회원 : number|string = 123;

 

 

타입이 너무 여러개이면 소괄호 안에 넣어도 된다.

let 회원: (number | string | boolean) = 123;
let 회원들: (number | string)[] = [1, "2", 3];
let 회원들2: { a: string | number } = { a: "123" };

 

 

any타입

 

모든 자료형을 허용해준다. (타입실드 해제문법으로 안쓰는게 좋음)

let 주소: any = "kim"
주소 = "서울";
주소 = 123;
주소 = [];

any타입은 타입 실드 해제 문법이기 때문에

갑자기 타입을 바꿔도 에러가 나지 않는다.

편하다고 막쓰면 js랑 다를게 없으므로 비상시 변수 타입체크 해제 기능 용도로만 쓰는게 좋다.

 

 

 

 

unknown 타입

 

any타입과 마찬가지로 모든 자료형을 허용해준다.

요즘 많이 쓰는 타입

let 주소: unknown = "kim"
주소 = "서울";
주소 = 123;
주소 = [];

 

any와 다른점은 좀 더 안전하다는 것

let 이름: unknown;

let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

unknown 타입을 다른 곳에 집어 넣으려고 하면 에러가 난다. (any는 이런경우에도 에러 안남)