TIL2_[TypeScript] 기초

석현정·2023년 2월 17일

TypeScript?

타입스크립트는 자바스크립트에 타입을 부여한 언어로,
자바스크립트의 확장된 언어이다.
(마이크로소프트(MS)에서 개발한 오픈소스 프로그래밍 언어)

사용 이유

  1. 자바스크립트 특징 중, 다이나믹 타이핑이 있는데,
    프로젝트가 작을 때는 편리하지만 커지면 단점으로 바뀌게 된다.

    5-'3'도 가능한 자바스크립트
    ? ->> 다이나믹 타이핑이 가능하기 때문임. 원래는 숫자-숫자만 가능한데 자스는 이걸 알아서 숫자로 바꿔줌.

허나, 타입스크립트는 타입을 엄격히 검사해주기 때문에,
위 예시 상황일 경우 5-'3'코드에서 ts 에러가 발생한다.

  1. 자바스크립트는 추상적이고 추적이 어려운 에러를 발생시키는 반면, 타입스크립트는 에러메세지 퀄리티가 높다.

    콘솔에 뜨는 에러메세지가 훨씬 간결하고 구체적이라서 어떤것이 문제인지 단번에 파악하기 쉬움.

사용 방법

  1. node.js 설치(최신버전)
  2. VScode 에디터 준비(다른 에디터도 가능하겠지)
  3. 터미널 오픈 후 npm install -g typescript 타이핑하고 엔터
  4. 파일명.ts -> 파일 생성 후 내용 작성
    (tsconfig.json의 역할은 ts -> js 컴파일시 옵션 설정하는 기능)

ts파일은 브라우저에서 인식 못하기 때문에 js파일로 변환해서 사용 가능함 => 터미널을 킨 후에 tsc -w 를 입력하면 자동으로 변환됨.

기본 문법

1. 간단한 변수 타입 지정 가능

string, number, boolean, null, undefined, bigint, "[]", {} 등
1) let 이름(변수):string = 'kim';
2) let 이름(변수):string[] = ['kim', 'park']; <= 이 변수에는 string(문자) 담긴 array(배열)만 들어올 수 있다는 의미
3) let 이름(변수):{name:string}={name:'kim'} <= object 타입 지정

2. Union type => 다양한 타입이 들어올 수 있게 하기 위함

예시)

 let 이름(변수):string | number = 'kim'
 // | (or의미)기호를 사용

3. 타입은 변수에 담아 쓸 수 있음(Type alias)

예시)

type Name=string[] | number;
// 작명할 때 보통 대문자로 많이 함.

let Name:내타입=123;

4. 함수에 타입 지정이 가능함

예시)

function 함수(x:number):number{
	return x*2
    }

위 함수는 파라미터로 number,return 값으로 Number로 타입 지정

5. array에 쓸 수 있는 tuple타입

예시)

type Member = [number, boolean];
// 무조건 첫째는 number, 둘째는 boolean으로 지정

let john:Member = []

6. object에 타입 지정해야 할 속성이 많을 때

예시)

type Member ={
	[key:string]:string,
    //모든 오브젝트 속성들이 글자로 된 모든 오브젝트 속성의 타입은 :string이라는 의미
}

let john:Member={ name:'kim', age:'123'}

7. class 타입 지정 가능

예시)

class User{
	name: string;
    constructor(name:string){
    	this.name=name;
    }
}

출처 및 참고

profile
온전히 나를 위한 코딩 기록 공간

0개의 댓글