[TIL] 2주차 - 4. TypeScript - 이걸 쓰면 더 안전하다

 

TypeScript? (JavaScript Superset)

JavaScript의 타입을 강제시키는 언어

 

TypeScript는 마이크로소프트에서 구현한

JavaScript의 슈퍼셋(Superset) 프로그래밍 언어입니다.

 

TypeScript = JavaScript + Type 문법

 

JavaScript와 완전히 다른 언어는 아니고 JavaScript의 문법을 이용하는데

자바스크립트의 타입을 강제 시켜 줍니다.

확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 코드를 출력합니다.

최종적으로 런타임에서는 이렇게 출력된 JavaScript 코드를 구동시키게 됩니다.

 

let aaa = "안녕하세요"
aaa = 123

 

JavaScript는 위와 같은 코드에서

에러가 발생하지 않습니다.

 

하지만 TypeScript로 타입을 강제하게 되면

 

let aaa:string = "안녕하세요" // aaa는 문자열만 넣을 수 있게 됨.
aaa = 123 //error <- aaa에는 문자만 넣어야 한다!

위 코드는 에러가 발생합니다.

TypeScript로 타입을 지정해뒀기 때문에

타입이 다른 값이 들어가게 되면

에러를 일으키게 됩니다.

 

 

 

TypeScript 왜  사용할까요?

 

프로젝트 사이즈가 커질 수록JavaScript 의 Dynamic Typing(숫자와 문자열 연산에서 자동으로 문자열을 숫자 타입으로 형변환 시켜서 연산되게 하는 것) 같은유연성이 오히려 독이 됩니다.

 

TypeScript를 사용하여

타입을 엄격하게 잡아주면

문제가 생기기 전에 에러를 발생시켜

사전에 버그를 방지할 수 있게 됩니다.

(간간히 오타도 잡아줍니다.)

 

즉, TypeScript를 사용하면

더 안전한 코딩을 할 수 있습니다.

 

실무에서는 거의 대부분 TypeScript를 사용하여

타입이 정해져 있을 수밖에 없습니다.

 

 

TypeScript 설치

1. typescript 검색 후 사이트에 접속합니다.

https://www.typescriptlang.org/

 

2. Docs에 들어가서  - 하단의 installation 

 

3. 중간에 yarn 버튼 클릭 후 해당 명령어 복사하기

 

 

5. VScode에서 TypeScripe 사용할 플젝으로 가서

복사한 명령어 붙여넣기 후 실행!

 

6. package.json에 들어가서 devDependencies 에

typescript가 추가된 것 확인.

 

 

실제 소스코드들은 node_modules에 있고
목록은 package.jason에서 확인할 수 있습니다.

 

--dev 는 devDependencies 즉, 브라우저에서 실행시 필요한 목록인 dependencies와 달리, 개발 시 vscode에서 필요한 목록으로 설치 된다는 의미입니다. devDependencies는 브라우저 실행 시에는 필요 없습니다.

 

 

TypeScript로 타입 지정하기

let aaa:string = "안녕하세요"
aaa = 123 //error

 

aaa: 뒤에 지정해줄 타입을 입력하면 됩니다.

위 코드에서는 타입이 string으로 지정되었으므로

aaa = 123 으로 숫자를 넘으면 에러가 뜹니다.

 

타입 추론

let  aaa = "안녕하세요" //타입추론
//aaa = 3 //error
aaa = "반갑습니다"

aaa뒤에 : [타입] 을 입력하지 않고

바로 값을 넣게 되면

해당 값에 대한 타입으로 자동 지정이 됩니다.

따라서 위코드에서 3을 넣으면 에러가 뜨게 됩니다.

 

문자타입, 숫자타입, 불린타입 지정

     // 문자타입
     let bbb : string;
     //bbb = 123//error
     bbb="반갑습니다"

     //숫자타입
     let ccc: number = 5
     //ccc = "asdjfkasj"//error

     //불린타입
     let ddd: boolean
     //ddd = 123//error
     //ddd = "문자도 안되겠죠"//error
     ddd = true

 

배열타입

     //배열타입
     let eee = [1 ,2 ,3 ,4 ,5 , 6]//타입추론 : let eee: number[]
     //let eee: number[] = [1 ,2 ,3 ,4 ,5 , 6, "ddd"]//error
     
     let fff: string[] = ["a","b","c"]

 

배열에서 안의 요소 값으로 서로 다른 

타입의 값들도 넣고 싶을 때 다음처럼

타입 지정해주면 됩니다.

 

 let ggg: (string | number)[] = [1, 2, 3, 4, "a", "b"] // (string | number)[]

 

혹은 모든 요소의 타입이 같아야 하되

그 타입의 종류를 다양하게 하고 싶다면

아래와 같이 하면 됩니다.

      // 몽땅 숫자로만 혹은 몽땅 문자열로만
     let hhh: string[] | number[] = [1, 2, 3]   
     hhh = ["a", "b", "c"]//전체가 다 숫자이거나 문자열일 수 있다.

 

객체타입

     //객체타입
     interface IProfile {
          name: string
          age: number | string
          school : string 
     }

     const profile: IProfile ={
          name: "철수",
          age: 8,
          school: "다람쥐초등학교"
     }

     //profile.name = 123 //error 이미 타입 추론되었음
     //타입추론은 처음 들어간 그상태로 고정된다.
     profile.school = 123//error
     
     profile.age = "8살"
     profile.age = 8

 

타입스크립트 파일 확장자

 

타입스크립트를 설치하였다면,

기존의 js 확장자를 변경합니다.

단순하게

javascript 만 있는 .js 파일은 typescript의 .ts로 변경하고,

javascript에서 JSX(React의 HTML)를 return 하는 컴포넌트들은 typescript의 .tsx 로 변경합니다.