[20220620_typescript (1)]

YunTrollpark·2022년 6월 23일
0

Typescript

목록 보기
1/1

typescript

1. 왜 사용하는가?

• TypeScript는 타입 엄격히 검사해줌(num은 num대로, string은 string대로)

// 기존의 자바스크립트는
5 - 3 // 결과: 2, 이거는 num -  num
5 - '3' // 결과: 2, 이거는 num - string
// JavaScript는 Dynamic Typing을 제공
// 원래는 숫자 - 숫자만 가능하지만 Dynmaic Typing은 알아서 바꿔줘서 오류가 안남 →절때 좋은거 ❌
// 코드 기레 짤때는 자유도&유연성은 진짜 안좋음

• TypeScript는 타입을 엄격히 검사해줘서, 에러메세지 퀄리티가 좋음

const counter = 0;
counter = '1'
// const counter: number
// 오류메세지: Type 'string' is not assignable to type 'number'(문자가 아닌 숫자를 넣어라) 이렇게 정확히 나옴

const obj = {append: 123,}
obj.apend
// 오타도 검사해줌 ㅎㅎ
// 오류메세지: Property 'apend' does not exist on type '{append: number;}'. Did you mean 'append'?
// input.tsx(2, 5): 'append' is declared here.

2. TypeScript 설치

1) 사전준비

  1. nodejs 설치(최신버전)
  2. Vscode 에디터 준비
  3. Terminal 켬
  4. npm install -g typescript (이렇게 했는데 에러나면 sudo npm install -g typescript 그리고 맥 비번입력)
  5. 코드 작성할 폴더 만들고
  6. index.ts → typescript파일임
  7. tsconfig.json 파일 만들어서 하단의 코드 복붙
    (tsconfig.json은 ts에서 js 컴파일시 옵션설정가능)
// tsconfig.json에 들어갈건
{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",  
  } 
}
  1. .ts 파일에서 작업하면 되는데 문제는 브라우저는 .ts 파일은 못읽고, .js 파일만 읽음
  2. 그래서 자바스크립트 파일로 변환해서 사용해야함
// 터미널에서 하단 명령어 입력해두면 자동변환됨
// 파일 사용시 변환된 js파일만 사용해야함
tsc -w

3. TypeScript 문법

1) 예시

// 간단한 변수 타입지정 가능
const 이름 :string = 'kim';
// → 이름이라는 변수를 만드는데, 이 변수엔 string(문자)type만 들어올 수 있습니다.
이름 = 123; // → 이러면 바로 오류남

2) 변수 종류

• string
• number
• boolean
• null
• undefined
• bigint
• []
• {}
... etc

1️⃣ 배열


→ array를 사용한다고 하면 해당 배열안에 뭐가 들어가는지도 명시해야함(array 타입지정)
→ 이렇게 작성하면 해당 변수에는 string이 담긴 array만 들어올수 있음

2️⃣ 옵션처럼 사용

3️⃣ 다양한 타입이 들어올때(Union type)

const 이름 = 'kim'; // 여기에 문자 혹은 숫자가 들어올때는?

const 이름 :string | number = 'kim';
// | : or 연산자를 사용해서 지정
// 이랗게 작성하면 해당 변수에는 string 혹은 number가 들어올수도 있다는 것을 의미
const 이름 :string[] | number = 123;
// 이런식으로도 사용가능

4️⃣ 타입을 변수에 담아서 사용 (Type alias)

type MyType = string | number;

const myName :MyType = 123;

// 타입을 작문할때 대문자로 작성
// 그래야 일반 변수랑 차이를 둬서 사용할 수 있음

5️⃣ 함수에서 타입지정

function 함수(x){
  return x * 2
}
// ↓ 해당 함수를 타입지정 하면?

function 함수(x :number) :number { // 매개변수에 이런식으로 타입지정 가능
  return x * 2  // 매개변수 괄호 옆에 써주면 return값에 대한 타입지정 가능
}
// 해당 함수는 파라미터로 number, return 값으로 number 받음
함수('123') // 이러면 에러남

6️⃣ array에 사용가능한 tuple 타입

type Member = [number, boolean];  // 대괄호 안에 타입지정
const john:Member = [123, true]
// john이라는 변수는 무조건 type Member = [number, boolean] tuple 타입이 들어가야함
// 해당 변수에 첫번째는 무조건 'number', 두번째는 무조건 'boolean'

7️⃣ object에 타입지정해야할 속성이 너무 많으면

type Member = {
  name:string
}
const john :Member // john이라는 변수는 무조건 {name: string} 형식의 자료만 들어올수있음
const john :Member = {name: 'kim'}

속성이 너무 많으면?

출처: 코딩애플

profile
코딩으로 세상에 이야기하는 개발자

0개의 댓글