Typescript

전서희·2022년 9월 3일
0

Typescript를 사용하는 이유

1. TypeScript는 타입을 엄격히 검사해준다

Javascript는 Dynamic Typing을 제공해서
5-'3'을 입력하면 알아서 '3'을 숫자로 바꿔서 계산해준다
(원래 숫자-숫자만 계산이 가능함)

이러한 기능은(편리도가 높고 유연성이 높은 기능) 편리하지만 프로젝트 규모가 커진다면 오히려 안좋다.

그래서 대규모 프로젝트 진행시에는 Typescript를 사용하여 이러한 JS의 특징을 제거하여 타입을 엄격하게 검사해준다.

2. TypeScript 에러메세지를 정확하게 알려준다

엄격하게 타입 검사를 하고, JS와 다르게 에러메세지를 다음과 같이 명확하게 알려준다.

TS error: "문자랑 숫자 빼는거 안되니까 수정하세요!"하고 알려준다.

이렇게 알려주면 어떤 부분에서 어떤 오류가 났는지 좀 더 쉽게 찾을 수 있다.

TypeScript 설치하는 방법

  1. Node.js 설치
  2. VScode 에디터 준비
  3. Terminal 에서 npm install -g typescript 입력
  4. VScode에서 .ts 파일 생성
  5. tsconfig.json 생성 후 하단 코드 입력하기
{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",  
  } 
}
  1. ts 파일로 돌아가서 코드 작성하면 끝!

브라우저는 js파일만 읽을 수 있어서 ts파일을 읽지 못함
-> ts파일을 js로 변환해서 사용해야함

tsc -w 를 입력해두면 자동변환됨
ts파일 저장할 때마다 js파일이 저장됨!

js로 변환하는 가정을 컴파일 한다고 하고 tsconfig.json은 ts->js 컴파일시 옵션설정이 가능하다

Typescript 사용하는 방법

let 이름 :string = 'kim';

string, number, boolean 등등을 넣을 수 있다

let 이름 :string[] = ['kim', 'park'];
//이 변수에는 string이 담긴 array만 들어올 수 있다(array 타입 지정)
let 이름 :{name?:string}={name:'kim'}
//name?은 name 속성이 옵션이란 의미
let 이름:string|number = 'kim'; //string 혹은 number가 들어갈 수 있음 (union type)

Type alias

type 지정하는것이 너무 길다 싶으면 변수에 담아서 쓸 수있다

type Name = string | number;
let 이름 :Name = 123;
function 함수(x :number) :number{
	return x * 2
}//number가 Input으로 들어오고 number가 return이 되는 엄격한 함수
type Member = [number,boolean]; //튜플타입
let john:Member = [123, true]
type Member={
	name:  string 
}
let john : Member = { name : 'kim'}

object에 타입 지정해야할 속성이 너무 많다면?

type Member={
	[key :string]:  string //글자로 된 모든 object 속성의 타입은 :string
}
let john : Member = { name : 'kim'}
class User{
  	name:string; //미리 변수를 만들어서 타입 지정을 해야함
	constructor(name){
      this.name = name;
    }
}
profile
UX디자인을 배우다 코딩의 매력에 흠뻑빠져 프론트엔드 개발자가 되고자 하는 코린이

0개의 댓글